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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
vue实现户籍管理系统
May 29 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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 实现的将图片转换为TXT
2015/10/21 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
JS实现多功能计算器
2020/10/28 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
python递归查询菜单并转换成json实例
2017/03/27 Python
python绘制圆柱体的方法
2018/07/02 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python 存取npy格式数据实例
2020/07/01 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
致垒球运动员加油稿
2014/02/16 职场文书
个人综合鉴定材料
2014/05/23 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技