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 相关文章推荐
简单实例处理url特殊符号&处理(2种方法)
Apr 02 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
详解vue 组件的实现原理
Nov 12 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
如何提高JDBC的性能
2013/04/30 面试题
表彰先进集体通报
2014/01/12 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
车辆工程专业求职信
2014/06/14 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书