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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
vue + vuex todolist的实现示例代码
Mar 09 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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
dedecms模板标签代码官方参考
2007/03/17 PHP
php 注释规范
2012/03/29 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
React组件refs的使用详解
2018/02/09 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Python显示进度条的方法
2014/09/20 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python一键升级所有pip package的方法
2017/01/16 Python
Python队列的定义与使用方法示例
2017/06/24 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Python实现全排列的打印
2018/08/18 Python
python reverse反转部分数组的实例
2018/12/13 Python
pyspark 随机森林的实现
2020/04/24 Python
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
职务任命书范本
2014/06/05 职场文书
2014年中秋寄语
2014/08/11 职场文书
2015年植树节活动总结
2015/02/06 职场文书
办公室个人总结
2015/02/28 职场文书
接待员岗位职责范本
2015/04/15 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
德能勤绩工作总结
2015/08/11 职场文书