jQuery 跨域访问解决原理案例详解


Posted in Javascript onJuly 09, 2016

浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼。记得很久以前使用iframe 加script domain 声明、yahoo js util 的方式解决二级域名跨域访问的问题。

时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了。好在,有jQuery帮忙,跨域问题似乎没那么难缠了。这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题。。。有必要记下来备忘, 跨域的安全限制都是指浏览器端来说的。服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url。来间接完成跨域访问也是可以的。但很显然开发量比较大,但限制也最少,很多widget开放平台server端(如sohu博客开放平台)其实就么搞的。不在本次讨论范围。要讨论的是浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的。

真实案例:

var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({ 
async:false, 
url: http://跨域的dns/document!searchJSONResult.action, 
type: "GET", 
dataType: 'jsonp', 
jsonp: 'jsoncallback', 
data: qsData, 
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 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 
//请求出错处理 
alert("请求出错(请检查相关度网络状况.)"); 
} 
});

注意:$.getJSON(" http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?",

function(json){ 
if(json.属性名==值){ 
// 执行代码 
} 
});

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

这样,jquery就会拼装成如下的url get请求

http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15

在响应端(http://跨域的dns/document!searchJSONResult.action),

通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501

然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")";

jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组);

这样就达到了跨域数据交换的目的.

jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.

这样其实"jQuery AJAX跨域问题"就成了个伪命题了,jquery $.ajax方法名有误导人之嫌.

如果设为dataType: 'jsonp', 这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议.

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过JavaScript callback的形式实现跨域访问

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求, 我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。

这种跨域的通讯方式称为JSONP。

jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数

Jsonp原理:

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。

此时,服务器先生成 json 数据。

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

引用内容

注意,jquey是不支持post方式跨域的.

为什么呢?

虽然采用post +动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用.

也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..

client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案.

下面是实际springMVC的调用restful接口是的跨域问题解决:

1、URL请求以.jsonp结尾

http://www.test/find.jsonp

2、Jquery的Ajax请求如下:

$.ajax({ 
async:false, 
url: url, //跨域的dns/document!searchJSONResult.action, 
type: "GET", 
dataType: 'jsonp', 
jsonp: 'callback', 
timeout: 5000, 
beforeSend: function(){ 
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 
}, 
success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
myFunc(json); 
}, 
complete: function(XMLHttpRequest, textStatus){ 
//$.unblockUI({ fadeOut: 10 }); 
}, 
error: function(xhr){ 
//jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 
//请求出错处理 
alert("请求出错(请检查相关度网络状况.)"); 
} 
});

3、在myFunc方法中处理业务逻辑

以上所述是小编给大家介绍的jQuery 跨域访问解决原理案例详解的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木!

Javascript 相关文章推荐
jquery 事件执行检测代码
Dec 09 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
vue实现分页栏效果
Jun 28 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 #Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 #Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 #Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 #Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 #Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 #Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 #Javascript
You might like
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
列表内容的选择
2006/06/30 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
地质灾害防治方案
2014/05/14 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2014年小学工作总结
2014/11/26 职场文书
介绍信样本
2015/01/31 职场文书
督导岗位职责
2015/02/04 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
深入理解go slice结构
2021/09/15 Golang
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python