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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JQueryEasyUI datagrid框架的进阶使用
Apr 08 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 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
德劲1104的电路分析与改良
2021/03/01 无线电
php5 pdo新改动加载注意事项
2008/09/11 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php学习之 数组声明
2011/06/09 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
基于JavaScript实现类似于百度学术高级检索功能
2016/03/02 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
软件测试笔试题
2012/10/25 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
办公室内勤工作职责
2013/12/11 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
奥林匹克的口号
2014/06/13 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android