jsonp原理详解

Posted haishen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsonp原理详解相关的知识,希望对你有一定的参考价值。

先说说JSONP是怎么产生的:

1、一个众所周知的问题,ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态页面、web服务、WCF,只要是跨域请求,一律不准。

2、不过我们又发现,web页面上调用js文件时则不受跨域的影响(不仅如此,我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>)。

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理。

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。

5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装进去。

6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常想ajax,但其实并不一样。

7、为了便于客户端使用数据,逐渐形成了一种非正式的传输协议,人们把它称作jsonp,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

 

jsonp的客户端具体实现:

  不管jquery也好,extjs也罢,又或者是其他支出jsonp的框架,他们幕后所做的工作都是一样的,厦门来循序渐进的说明一下jsonp在客户端的实现:

1、我们知道,哪怕是跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。

  远程服务器 remoteserver.com 根目录下有个 remote.js 文件,代码如下:

alert(‘我是远程文件‘);

 

本地服务器 localserver.com 下有个jsonp.html 页面代码如下:

<!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></title>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
 
</body>
</html>

 

毫无疑问,页面将会弹出一个提示窗体,显示跨域调用成功。

 

2、现在我们在jsonp.html 页面定义一个函数,然后在远程remote.js 中传入数据进行调用。

jsonp.html 页面代码如下:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6     var localHandler = function(data){
 7         alert(我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是: + data.result);
 8     };
 9     </script>
10     <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
11 </head>
12 <body>
13  
14 </body>
15 </html>

 

remote.js 文件代码如下:

 

localHandler({"result":"我是远程js带来的数据"});

 

 

 

  运行之后查看结果,页面成功弹出提示窗口,显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。

  很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。

 

3、聪明的开发者很容易想到,只要服务端提供的js脚本是动态生成的就行了呗,这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码,请你返回给我”,预算服务器就可以按照客户端的需求来生成js脚本并响应了。

看jsonp.html 页面的代码:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6     // 得到航班信息查询结果后的回调函数
 7     var flightHandler = function(data){
 8         alert(你查询的航班结果是:票价  + data.price +  元, + 余票  + data.tickets +  张。);
 9     };
10     // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
11     var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
12     // 创建script标签,设置其属性
13     var script = document.createElement(script);
14     script.setAttribute(src, url);
15     // 把script标签加入head,此时调用开始
16     document.getElementsByTagName(head)[0].appendChild(script); 
17     </script>
18 </head>
19 <body>
20  
21 </body>
22 </html>

 

  这次的代码变化比较大,不再直接把远程js文件写死,而是编码实现动态查询,而这也正是jsonp客户端实现的核心部分,本例中的重点也就在于如何完成jsonp调用的全过程。

  我们看到调用的url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做fightHandler,所以请把查询结果传入中国函数中进行调用。

  OK,服务器很聪明,中国叫做fightResult.aspx 的页面生成了一段这样的代码提供给jsonp.html(服务端的实现这里就不演示了,与你选用的语言无关,说到底就是拼接字符串)

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

 

4、到这里为止,剩下的就是如何把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。

jquery如何实现jsonp调用?

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4      <title>Untitled Page</title>
 5       <script type="text/javascript" src=jquery.min.js"></script>
 6       <script type="text/javascript">
 7      jQuery(document).ready(function(){ 
 8         $.ajax({
 9              type: "get",
10              async: false,
11              url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
12              dataType: "jsonp",
13              jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
14              jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
15              success: function(json){
16                  alert(您查询到航班信息:票价:  + json.price +  元,余票:  + json.tickets +  张。);
17              },
18              error: function(){
19                  alert(fail);
20              }
21          });
22      });
23      </script>
24      </head>
25   <body>
26   </body>
27 </html>

 

是不是有点奇怪?为什么我这次没有血flightHandler 这个函数呢?而且竟然也运行成功了!

这就是jquery的功劳了,jquery在处理jsonp类型的ajax时(虽然jquery也把jsonp归入了ajax,但其实它们真的不是一回事儿),自动帮你生成回调函数并把数据取出来供success属性方法来调用,是不是很爽啊?

 

补充:

这里针对ajax与jsonp的异同再做一些补充说明:

1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XMLHttpRequest获取非本页内容,而jsonp的核心是动态添加。

 

以上是关于jsonp原理详解的主要内容,如果未能解决你的问题,请参考以下文章

jsonp原理详解

跨域详解之jsonp,底层的实现原理

jsonp原理和实例详解

AJAXjsonp原理详解

转JS跨域(ajax跨域iframe跨域)解决方法及原理详解(jsonp)

JSONP详解