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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
Nov 17 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
使用JS实现简易计算器
Jun 14 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
关于JS中的闭包浅谈
2013/08/23 Javascript
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
python3爬取淘宝信息代码分析
2018/02/10 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
办理信用卡收入证明范例
2014/09/13 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2014年林业工作总结
2014/12/05 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
电力工程合作意向书
2015/05/11 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
深入浅析Django MTV模式
2021/09/04 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS