JSONP简介

    在介绍JSONP之前，先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩写，是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本，因此可通过许多途径进行JSON消息的传递。

 

1. JSONP定义
    JSONP是英文JSON with Padding的缩写，是一个非官方的协议。它允许在服务器端生成script tags返回至客户端，通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入，将server返回的response添加到页面实现特定功能。

2.JSONP由来

    要解释JSONP的来由，先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之，就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

     如何解决跨域访问呢？那就要借助浏览器的一个特性：尽管浏览器不允许页面中的脚本程序跨域读取数据，但却允许HTML引用跨域的资源，如图片，CSS和脚本程序。对于脚本程序的引用比较特殊，它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件，一个简单的提示框：alert（“This is Victor！”）;。在A站点引用这个js，这个脚本就会在B站点的应用中执行，显示一个alert信息。由于站外脚本的引用是通过script tag来实现的，而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制（包括动态的创建script标签），这就可以实现通过调用站外程序对本地资源进行更改了。另外，通过<script> 标记的使用，就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。

 

3. JSONP原理与实现
    首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成 JSON数据。然后以JavaScript 语法的方式，生成一个function, function名字就是传递上来的参数jsonp.  

    然后，将JSON数据直接以入参的方式，放置到function中，这样就生成了一段 js 语法的文档，返回给客户端。 

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

 

 

其实 JSONP是个很简单的一个东西。主要是利用了 <script/>标签对javascript文档的动态解析来实现。（其实也可以用eval函数） 

 

JSONP实现代码：

< script  type=" text/javascript" >       
        function  jsonpCallback(result){
             alert(result.msg);
        }       
< /script>       
< script  type=" text/javascript"   src=" http://mydomain.com/jsonService?jsonp=jsonpCallback">
< /script> 

注解：

jsonCallback是获取跨域服务器上的JSON数据后的客户端的回调函数。 

http://mydomain.com/jsonService?jsonp=jsonpCallback是获取跨域服务器JSON数据的接口，参数为回调函数的名字。返回的格式为:

jsonpCallback({ msg:'this  is  json  data'} )

 

4. jQuery与JSONP

    从 1.2 版本开始，jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调，就可以加载位于另一个域的 JSON 数据，回调的语法为：url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。

 

jQuery回调函数：

 

jQuery.getJSON(url+"&callback=?", function(data) {
    alert("Name: " + data.name + ", Phone: " + data.phone);
});

    为此，jQuery 将一个全局函数附加到插入脚本时需要调用的窗口对象。另外，jQuery 也能优化非跨域调用。如果向同一个域发出请求，jQuery 就将其转化为普通 Ajax 请求。

 

5. JSONP的安全问题

    在JavaScript 程序中有多种方法可动态地生成代码，最著名的函数之一就是 eval()。该函数允许您将任意字符串做为 JavaScript 代码执行。然而，随意使用该函数是非常危险的。遗憾的是，一些使用广泛的 JavaScript 库在内部都直接使用 eval() 函数。JSON本身是安全的，不含有赋值和调用。但由于 JSON 是以 JavaScript 的一个子集为基础的，所以脚本内容会潜在地包含恶意代码。由于许多 JavaScript 库使用 eval() 函数将 JSON 转换成 JavaScript 对象，利用这点，攻击者就可以向这些库发送畸形的 JSON 对象，这样 eval() 函数就会执行这些恶意代码。为保护 JSON 的使用，可使用RFC 4627 中所定义的正则表达式确保 JSON 数据中不包含活动的部分。 

 

JavaScript代码：

 

var my_JSON_object = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(  
             text.replace(/"(\\.|[^"\\])*"/g, ''))) &&  
         eval('(' + text + ')'); 

 

6. JSONP的缺陷

 

    JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，必须认真考虑它们。

    第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

   第二， JSONP 被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。