【javascript】jsonp是什么

原文地址：http://melon.github.io/blog/2014/08/08/how-jsonp-really-works/

mine：由于AJAX的同源策略，不能实现跨域请求。jsonp的产生，刚好可以解决这个问题。

我对这个问题的探究来源于一个需求：

当访问某个页面的时候，需要向另外一个网站报告一下这次访问的信息。

其实发一个跨域的请求就能大致实现这个需求。我们发跨域的例子其实很常见，例如请求一个第三方的图片、引入一个第三方的样式文件、引入一个cdn上的js文件。然后，说到发送请求，在这个web2.0的时代，我们自然而然会想到Ajax请求。但是遗憾的是，考虑到安全问题，即所谓的同源安全策略，用ajax请求一个第三方的地址是被浏览器所禁止的。然而天无绝人之路，有个叫JSONP的技术就是来解决这种问题的。

说道JSONP，可能多数人对它的知晓程度仅限于jQuery，jQuery提供了发送jsonp请求的方法。比如在使用$.ajax()方法的时候：

点击(此处)折叠或打开

1. // Using YQL and JSONP
   
2. $.ajax({
   
3.     url: "http://query.yahooapis.com/v1/public/yql",
   
4.     // the name of the callback parameter, as specified by the YQL service
   
5.     jsonp: "callback",
   
6.     // tell jQuery we're expecting JSONP
   
7.     dataType: "jsonp",
   
8.     // tell YQL what we want and that we want JSON
   
9.     data: {
   
10.         q: "select title,abstract,url from search.news where query=\"cat\"",
    
11.         format: "json"
    
12.     },
    
13.     // work with the response
    
14.     success: function( response ) {
    
15.         console.log( response ); // server response
    
16.     }
    
17. });

jQuery将jsonp请求封装成类似ajax请求的样子，这样能让开发者在使用的时候更加方便，但是实际上，jsonp压根不是通过XMLHttpRequest来实现的。

一个简单的JSONP请求可以通过一下代码实现：

点击(此处)折叠或打开

1. var callbackName = 'iAmTheCallback';
   
2. window[callbackName] = function (uuu, vvv, www) {
   
3.     // 对返回的数据做后续处理
   
4. }
   
5. var script = document.createElement('script');
   
6. script.src = 'http://melon.github.io/xxx/yyy?callback='+callbackName;
   
7. document.body.appendChild(script);

这是前端部分的代码，要想真正实现JSONP的功能，还需要后端的配合。针对上面这个例子，当前端请求这个script地址的时候，后端只要按以下内容响应就会有神奇的效果：

点击(此处)折叠或打开

1. iAmTheCallback('abc', 'def', 'ghi');

说道这儿，很多人也许就恍然大悟了。JSONP名字听着高端，其实也不过如此嘛。

实际上，jQuery发JSONP请求时也是这么做的，去这里可以窥见一斑。