jsonp详解及跨域请求

什么是JSONP？

JSON是一种轻量级的数据传输格式语言，被广泛应用于当前Web应用中。JSON格式数据的编码和解析基本在所有主流语言中都被实现，所以现在大部分前后端分离的架构都以JSON格式进行数据的传输。

那么什么是JSONP？

jsonp就是动态创建script，与ajax无关。是一种非官方跨域数据交互协议。

请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）

• 请求方创建 script，src 指向响应方，同时传一个查询参数 ?callbackName=yyy
• 响应方根据查询参数callbackName，构造形如浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
  1. yyy.call(undefined, '你要的数据')
  2. yyy('你要的数据')
     这样的响应
• 那么请求方就知道了他要的数据

这就是 JSONP

约定：callbackName -> callback
　　　yyy -> 随机数 frank12312312312321325()

---

JSONP的作用

首先我们要知道浏览器同源策略这个概念。为了保证用户访问的安全，现代浏览器使用了同源策略，即不允许访问非同源的页面。在ajax中，不允许请求非同源的URL，比如www.a.com下的一个页面，其中的ajax请求是不允许访问www.b.com/c.php这样一个页面的。
ajax请求受同源策略影响，js文件的调用则不受跨域与否的限制，因此如果想通过纯web端跨域访问数据，只能在远程服务器上设法将json数据封装进js格式的文件中，供客户端调用和进一步处理，这就是jsonp协议的原理。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP具体实现

• 远程服务器remoteserver.com根目录下有个remote.js文件代码
• 本地服务器localserver.com下有个jsonp.html页面代码
• 在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用
• 运行之后查看结果，页面成功弹出提示窗口，显示本地函数被跨域的远程js调用成功，并且还接收到了远程js带来的数据。
• 只要服务端提供的js脚本是动态生成的，这样调用者可以传一个参数过去告诉服务端 “我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应。

//remote.js文件代码
alert('我是远程文件');
localHandler({"result":"我是远程js带来的数据"});
flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

//jsonp.js文件代码

    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 

    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>

---

jQuery实现JSONP调用:

$.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
             success: function(json){
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });

jQuery ajax方式以jsonp类型发起跨域请求，其原理跟<script>脚本请求一样，因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。

---

ajax与jsonp的异同

1. ajax和jsonp这两种技术在调用方式上”看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装。但实际jsonp和ajax没关系。
2. ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加。
3. ajax无法跨域请求，可以用多种请求 方法；jsonp可以跨域请求，但只能用get请求。

---

跨域请求和同源策略

• 同源策略，只有协议+端口+域名 一模一样的才允许法AJAX请求。
• 因为AJAX可以读取响应内容，浏览器必须保证同源策略。