JSONP

一、JSONP详解

 json相信大家都用的多，jsonp我就一直没有机会用到，但也经常看到，只知道是“用来跨域的”，一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

同源策略

首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。

1.随便建两个网页

一个端口是2698，一个2701，按照定义它们是不同源的。

 

 

2.用jQuery发起不同源的请求

在2698端口的网页上添加一个按钮，Click事件随便发起两个向端口为2701域的请求。

$("#getOtherDomainThings").click(function () {
    $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
        console.log(data)
    })

    $.get("http://localhost:2701/home/index", function (data) {
        console.log(data)
    })
})
根据同源策略，很明显会悲剧了。浏览器会阻止，根本不会发起这个请求。（not allowed by Access-Control-Allow-Origin）

OK，原来jsonp是要解决这个问题的。

不知道大家知不知道CDN这个东西，例如微软的CDN，使用它，我们的网页可以不提供jQuery，由微软的网站帮我们提供：

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我们的2698端口的网页，上面我们在Click事件里有一个对2701端口域的jQuery文件的请求，这次使用script标签来请求。

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然，200，OK了

同样是端口2698的网页发起对2701域的请求，放在script里设置scr属性的OK了，另一个方式就悲剧。利用script的跨域能力，这就是jsonp的基础。

利用script获取不同源的json

既然它叫jsonp，很明显目的还是json，而且是跨域获取。根据上面的分析，很容易想到：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。实践：

function CreateScript(src) {
    $("<script><//script>").attr("src", src).appendTo("body")
}

添加一个按钮事件来测试一下：

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp")
})

首先，第一个浏览器，http://localhost:2701/home/somejson这个Url的确是存在一个json的，而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的，但是最下面报js语法错误了。原来用script标签加载完后，会立即 把响应当js去执行，很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

利用script获取异域的jsonp

显然，把上面的json放到一个回调方法里是最简单的方法。例如，变成这样：

如果存在jsonpcallback这个方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定，上面的是”callback“。

添加回调函数：

function jsonpcallback(json) {
    console.log(json)
}

把前面的方法稍微改改参数：

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK，服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"})，我们也写了jsonpcallback方法，当然会执行。OK顺利获得了json。没错，到这里就是jsonp的全部。

利用jQuery获取jsonp

上面的方式中，又要插入script标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp：

$("#getJsonpByJquery").click(function () {
    $.ajax({
        url: 'http://localhost:2701/home/somejsonp',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})

得到的结果跟上面类似。

总结

一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})

 

二、浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用

JSON和JSONP
 
　　JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。
 
　　JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。
 
　　JSON是一种数据格式，JSONP是一种数据调用方式。

JSON和JSONP
 
　　JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在浏览器和服务器之间交换信息。
 
　　JSONP(JSON With Padding)，就是打包在函数调用中的的JSON（或者包裹的JSON）。
 
　　JSON是一种数据格式，JSONP是一种数据调用方式。

 //JSON
 {
 “name”: “sb”
 }

 //JSONP
 callback({
 “name”: “sb”
 })

出于安全考虑，脚本（AJAX）不能访问非本域的内容。但是，静态资源是不受域策略限制的，可以加载任意域的脚本、样式、图片等静态资源，JSOP就是利用这种原理来实现跨域获取数据的。
 
例1：

 //定义shoPrice函数
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }

 //在Web页面中包含showPrice函数和参数
 <script type="text/javascript">
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }
 </script>
 <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

　　本例展示了如何将静态JSON数据作为参数调用JavaScript函数。
 
 例2：
 
　　第一种的函数调用完全可以写在一个js文件中放在服务器上，用script标签加载到页面，而且这个标签可以动态地创建。
 

 <script type="text/javascript">
 // This is our function to be called with JSON data
 function showPrice(data) {
     alert("Symbol: " + data.symbol + ", Price: " + data.price);
 }
 
 var url = “remote.js”; // 外部脚本的URL
 // 动态插入脚本
 var script = document.createElement('script');
 script.setAttribute('src', url);
 
 // 加载script
 document.getElementsByTagName('head')[0].appendChild(script); 
 </script>

remote.js的内容和之前在标签里写的一样是：
 
 1 showPrice({symbol: 'IBM', price: 91.42}); 
 
　　动态插入的JavaScript代码，将要传递的JSON数据作为参数，showPrice函数调用语句的参数。
 
　　那么问题来了，每次获取到数据都调用showPrice函数吗？这就需要前后端程序猿做好约定，当然这样有很多不便，尤其是对于开放接口给公众开发的情况。JSOP这样处理：支持前端传递一个回调函数名参数，后端接收回调函数名参数，然后生成对该函数的调用，将JSON数据作为参数传递，在到达客户端时将其插入页面开始执行。
 
例3：
 
　　动态插入代码，带有callback参数：

  <script type="text/javascript">
  // This is our function to be called with JSON data
  function showPrice(data) {
      alert("Symbol: " + data.symbol + ", Price: " + data.price);
  }
 var url = “remote.js?callback='showPrice'”; // 外部脚本的URL
 // 动态插入脚本
 var script = document.createElement('script');
 script.setAttribute('src', url);
 // 加载script
 document.getElementsByTagName('head')[0].appendChild(script); 
  </script>

后端用PHP实现的JSONP服务的代码片段：

 $jsonData = getDataAsJson($_GET['symbol']);
 echo $_GET['callback'] . '(' . $jsonData . ');';
 // 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});

很好的契合了JSONP的定义，打包在函数调用中的JSON数据。
 
以上几个例子来自：
 
使用 JSONP 实现跨域通信，第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
 
在jQuery中使用JSONP
 
　　AJAX和JSONP在jQuery中的调用方式看起来极为相像，千万不要被这种现象迷惑，它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容，而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装，但JSONP并不是AJAX的一种形式或一种特例。

 $.ajax({
     url: "http://query.yahooapis.com/v1/public/yql",
     jsonpCallback: "showPrice",
     jsonp: "callback",
     // tell jQuery we're expecting JSONP
     dataType: "jsonp",
     data: {
         q: "select title,abstract,url from search.news where query=\"cat\"",
         format: "json"
     },
     // work with the response
     success: function( data ) {
         console.log( data ); // server response
     }
 });

ajax请求参数说明：

dataType  String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

jsonp，
 
　　重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=?”这种GET或POST请求URL参数里的“callback”部分，例如{jsonp:'onJsonPLoad'}会导致“onJsonPLoad”传递给服务器。
 
jsonpCallback，
 
　　为jsonp指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。但是实际使用过程中，并不用写回调函数，比如此例中的showPrice，不写也不会报错，因为jQuery在处理JSONP的时候，自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样：

 function success_jsonpCallback(data) { success(data); }  

以上就是本文的全部内容了，大家是否对jsonp有了细致的了解了呢。有什么疑问也请给我留言，大家共同探讨。