jquery解决客户端跨域访问问题


Posted in Javascript onJanuary 06, 2015

客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解。由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算是解决了跨域问题。便记录下来,以供查阅。

 jQuery.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的。

 真实案例:

 

 $.ajax({ 

            async:false, 

            url: 'http://www.mysite.com/demo.do',  // 跨域URL

            type: 'GET', 

            dataType: 'jsonp', 

            jsonp: 'jsoncallback', //默认callback

            data: mydata, 

            timeout: 5000, 

            beforeSend: function(){  //jsonp 方式此方法不被触发。原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了

            },

            success: function (json) { //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 

                if(json.actionErrors.length!=0){ 

                    alert(json.actionErrors); 

                } 

                genDynamicContent(qsData,type,json); 

            }, 

            complete: function(XMLHttpRequest, textStatus){ 

                $.unblockUI({ fadeOut: 10 }); 

            }, 

            error: function(xhr){ 

                //jsonp 方式此方法不被触发

                //请求出错处理 

                alert("请求出错(请检查相关度网络状况.)"); 

            } 

        });

        注意:

 $.getJSON(" http://www.mysite.com/demo.do?name1="+value1+"&callback=?", 

            function(json){ 

                if(json.属性名==值){ 

                    // 执行代码 

                } 

        });

    这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了。

    在服务端通过callback= request.getParameter("callback") 得到jQuery端随后要回调的jsonp32440980
    然后返回类似:"jsonp32440980("+要返回的json数组+")";
    jquery就会通过回调方法动态加载调用这个:jsonp32440980(json数组);
    这样就达到了跨域数据交换的目的.
    jsonp的最基本的原理是:动态添加一个是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) 。JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患。

    注意:jquey是不支持post方式跨域的。
    这是因为虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用。也可以说get方式的跨域是合法的,post方式从安全角度上被认为是不合法的,万不得已还是不要post,client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案。

Javascript 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
angular.foreach 循环方法使用指南
Jan 06 #Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 #Javascript
json实现前后台的相互传值详解
Jan 05 #Javascript
jQuery中eq()方法用法实例
Jan 05 #Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 #Javascript
jQuery中toggleClass()方法用法实例
Jan 05 #Javascript
jQuery中removeClass()方法用法实例
Jan 05 #Javascript
You might like
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python爬取招聘要求等信息实例
2020/11/20 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
成教自我鉴定
2013/10/27 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
食品质检员岗位职责
2015/04/08 职场文书
预备党员介绍人意见
2015/06/01 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
HAM-2000摩机图
2021/04/22 无线电
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS