深入分析JSONP跨域的原理


Posted in Javascript onDecember 10, 2014

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档 在同一域下的内容。

JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略,在baidu.com下的 页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代 码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在 abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。

然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域提交Ajax请求的问题。JSONP的工作原理如下所述:

假设在http://example1.com/index.php这个页面中向http://example2.com /getinfo.php提交GET请求,我们可以将下面的JavaScript代码放在http://example1.com/index.php这 个页面中来实现:

var eleScript= document.createElement("script");

eleScript.type = "text/javascript";

eleScript.src = "http://example2.com/getinfo.php";

document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

当GET请求从http://example2.com/getinfo.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://example1.com/index.php页面中的一个callback函数。

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中 都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

再来一个例子:

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原理

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)传给服务器。注意:服务端得到callback的数值后,要用 jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 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)行为,所以有一定的安全隐患。

jquery为什么不支持post方式跨域呢?

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

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

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

来个超简单的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml" >  

<head>  

    <title>Test Jsonp</title>  

    <script type="text/javascript">  

            function jsonpCallback(result)  

            {  

            alert(result.msg);  

            }  

        </script>  

    <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>  

</head>  

<body>  

</body>  

</html>

其中 jsonCallback 是客户端注册的,获取跨域服务器上的json数据后,回调的函数。http://crossdomain.com /jsonServerResponse?jsonp=jsonpCallback 这个 url 是跨域服务器取 json 数据的接口,参数为回调函数的名字,返回的格式为:jsonpCallback({msg:'this is json data'})

简述原理与过程:首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 json 数据。 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp。最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里。(动态执行回调函数)

Javascript 相关文章推荐
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
模拟select的代码
Oct 19 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
node.js中的console.dir方法使用说明
Dec 10 #Javascript
node.js中的console.error方法使用说明
Dec 10 #Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 #Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 #Javascript
JavaScript解析json格式数据简单示例
Dec 09 #Javascript
浅谈页面装载js及性能分析方法
Dec 09 #Javascript
深入分析jquery解析json数据
Dec 09 #Javascript
You might like
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
构建Python包的五个简单准则简介
2015/06/15 Python
简单学习Python time模块
2016/04/29 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
医学护理系毕业生求职信
2013/10/01 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
体操比赛口号
2014/06/10 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
mysql使用FIND_IN_SET和group_concat两个方法查询上下级机构
2022/04/20 MySQL
python解析照片拍摄时间进行图片整理
2022/07/23 Python