jQuery 跨域访问问题解决方法


Posted in Javascript onDecember 02, 2009

时间过得好快,又被拉回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标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案.

Javascript 相关文章推荐
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 #Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 #Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 #Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 #Javascript
JS类的封装及实现代码
Dec 02 #Javascript
Jquery选择器 $实现原理
Dec 02 #Javascript
js 表格隔行颜色
Dec 02 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
基于mysql的bbs设计(一)
2006/10/09 PHP
php编写一个简单的路由类
2011/04/13 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
python函数的5种参数详解
2017/02/24 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python tkinter组件摆放方式详解
2019/09/16 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
2014信息公开实施方案
2014/02/22 职场文书
安全教育实施方案
2014/03/02 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
三问三解心得体会
2014/09/05 职场文书
民间个人借款协议书
2014/09/30 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
应收账款管理制度
2015/08/06 职场文书
商业计划书之服装
2019/09/09 职场文书
七年级作文之秋游
2019/10/21 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
详解Vue router路由
2021/11/20 Vue.js