JSONP详解

时间 2019-11-17

标签 jsonp 详解栏目 JSON 繁體版

原文原文链接

什么是JSONP?

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。因为同源策略，通常来讲位于 server1.example.com 的网页没法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页能够获得从其余来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并非 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。javascript

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差异，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。咱们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给本身同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。php

先说说JSONP是怎么产生的：html

一、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一概不许；java

　　二、不过咱们又发现，Web页面上调用js文件时则不受是否跨域的影响（不只如此，咱们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，好比<script>、<img>、<iframe>）；web

　　三、因而能够判断，当前阶段若是想经过纯web端（ActiveX控件、服务端代理、属于将来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；ajax

　　四、恰巧咱们已经知道有一种叫作JSON的纯字符数据格式能够简洁的描述复杂数据，更妙的是JSON还被js原生支持，因此在客户端几乎能够为所欲为的处理这种格式的数据；json

　　五、这样子解决方案就呼之欲出了，web客户端经过与调用脚本如出一辙的方式，来调用跨域服务器上动态生成的js格式文件（通常以JSON为后缀），显而易见，服务器之因此要动态生成JSON文件，目的就在于把客户端须要的数据装入进去。跨域

　　六、客户端在对JSON文件调用成功以后，也就得到了本身所需的数据，剩下的就是按照本身需求进行处理和展示了，这种获取远程数据的方式看起来很是像AJAX，但其实并不同。浏览器

　　七、为了便于客户端使用数据，逐渐造成了一种非正式传输协议，人们把它称做JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。安全

　　若是对于callback参数如何使用还有些模糊的话，咱们后面会有具体的实例来说解。

　　JSONP的客户端具体实现：

　　无论jQuery也好，ExtJs也罢，又或者是其余支持jsonp的框架，他们幕后所作的工做都是同样的，下面我来按部就班的说明一下jsonp在客户端的实现：

　　一、咱们知道，哪怕跨域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>

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

　　二、如今咱们在jsonp.html页面定义一个函数，而后在远程remote.js中传入数据进行调用。

　　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" 
         > 
        
         var  
         localHandler = function(data){ 
        
         alert( 
         '我是本地函数，能够被跨域的remote.js文件调用，远程js带来的数据是：'  
         + data.result); 
        
         }; 
        
         </script> 
        
         <script type= 
         "text/javascript"  
         src= 
         "http://remoteserver.com/remote.js" 
         ></script> 
        
         </head> 
        
         <body> 
        
         </body> 
        
         </html>

　　remote.js文件代码以下：

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

运行以后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，而且还接收到了远程js带来的数据。很欣喜，跨域远程获取数据的目的基本实现了，可是又一个问题出现了，我怎么让远程js知道它应该调用的本地函数叫什么名字呢？毕竟是jsonp的服务者都要面对不少服务对象，而这些服务对象各自的本地函数都不相同啊？咱们接着往下看。

　　三、聪明的开发者很容易想到，只要服务端提供的js脚本是动态生成的就好了呗，这样调用者能够经过url链传递一个参数过去，形式像这样?callback=functionName,告诉服务端“我想要一段调用functionName函数的js代码，请你返回给我”，以PHP为例，服务器就能够按照客户端的需求来生成形如_GET['callback'](服务端要提供的JSON数据)的响应了。

jsonp.php代码以下:

 
         <?php 
        
         header( 
         'Content-type: application/json' 
         ); 
        
         //获取回调函数名 
        
         $jsoncallback  
         = htmlspecialchars( 
         $_REQUEST  
         [ 
         'jsoncallback' 
         ]); 
        
         //json数据 
        
         $json_data  
         =  
         '["customername1","customername2"]' 
         ; 
        
         //输出jsonp格式的数据 
        
         echo  
         $jsoncallback  
         .  
         "("  
         .  
         $json_data  
         .  
         ")" 
         ; 
        
         ?>

　客户端代码以下:

 
         <! 
         DOCTYPE  
         html> 
        
         < 
         html 
         > 
        
         < 
         head 
         > 
        
         < 
         meta  
         charset="utf-8"> 
        
         < 
         title 
         >JSONP 实例</ 
         title 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         div  
         id="divCustomers"></ 
         div 
         > 
        
         < 
         script  
         type="text/javascript"> 
        
         function callbackFunction(result, methodName) 
        
         { 
        
         var html = '< 
         ul 
         >'; 
        
         for(var i = 0; i <  
         result.length 
         ; i++) 
        
         { 
        
         html += '<li>' + result[i] + '</ 
         li 
         >'; 
        
         } 
        
         html += '</ 
         ul 
         >'; 
        
         document.getElementById('divCustomers').innerHTML = html; 
        
         } 
        
         </ 
         script 
         > 
        
         < 
         script  
         type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></ 
         script 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >