JSONP跨域详解

0. 前言

说到AJAX就会不可避免的面临两个问题。

AJAX以何种格式来交换数据？
第二个是跨域的需求如何解决？

什么是JSON？

JSON是JavaScript Object Notation的缩写，它是一种数据交换格式。在JSON中，一共就这么几种数据类型：
- number
- boolean
- string
- null
- array
- object
- 以及上面的任意组合
AJAX直接请求普通文件存在跨域无权限访问的问题，但是，凡是拥有src这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>)；
JSONP的客户端具体实现

(1）我们知道，哪怕跨域js文件中的代码（当然指符合web脚本安全策略的），web页面也是可以无条件执行的。远程服务器remoteserver.com根目录下有个remote.js文件代码如下：
```
alert('我是远程文件');
```
本地服务器localserver.com下有个jsonp.html页面代码如下：
```
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
  </head>
  <body></body>
</html>
```
毫无疑问，页面将会弹出一个提示窗体，显示跨域调用成功。

(2）现在我们在jsonp.html页面定义一个函数，然后在远程remote.js中传入数据进行调用。

jsonp.html页面代码如下：
```
<html>
  <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带来的数据。

（3）只要服务端提供的js脚本是动态生成的就行了呗，这样调用者可以传一个参数过去告诉服务端“我想要一段调用XXX函数的js代码，请你返回给我”，于是服务器就可以按照客户端的需求来生成js脚本并响应了。

看jsonp.html页面的代码：
```
<html>
  <head>
    <title></title>
    <script type="text/javascript">
      // 得到航班信息查询结果后的回调函数
      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>
  </head>
  <body></body>
</html>
```
这次的代码变化比较大，不再直接把远程js文件写死，而是编码实现动态查询，而这也正是JSONP客户端实现的核心部分，本例中的重点也就在于如何完成JSONP调用的全过程。我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。 OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）。
```
flightHandler({
  "code": "CA1998",
  "price": 1780,
  "tickets": 5
});
```
我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，JSONP的执行全过程顺利完成！
总结原生JS实现JSONP的步骤

（1）客户端
- 定义获取数据后调用的回调函数
- 动态生成对服务端JS进行引用的代码：
  - 设置url为提供jsonp服务的url地址，并在该url中设置相关callback参数
  - 创建script标签，并设置其src属性
  - 把script标签加入head，此时调用开始
（2）服务端
- 将客户端发送的callback参数作为函数名来包裹住JSON数据，返回数据至客户端

JSONP在jQuery中的具体实现

在jQuery中实现JSONP主要有两种方式：

$.getJSON
$.ajax

（1）getJSON实现方式

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.getJSON("http://crossdomain.com/services.php?callback=?", function(json){
        alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
    });  
</script>

（2）$ajax实现方式：

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

vue.js

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

后端node.js代码示例：

var querystring = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request', function(req, res) {
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { 'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');

    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

jsonp缺点：只能实现get一种请求

JSONP与GET / POST 请求

我们知道script，link，img 等标签引入外部资源，都是GET请求的，那么就决定了 JSONP 一定是GET的。即便在$.ajax()中使用POST请求也能成功。一旦当我们指定dataType: 'jsonp'，不管指定type的值是什么（GET/POST/甚至不写），都会进行GET请求。 这是jQuery在封装JSONP跨域时就已经写死了的。 对应的源码如下：
```
jQuery.ajaxPrefilter( "script", function( s ) {
    if ( s.cache === undefined ) {
        s.cache = false;
    }
    if ( s.crossDomain ) {
        s.type = "GET";
        s.global = false;
    }
});
```
JSONP 不是 ajax

jsonp 是用来解决跨域获取数据的一种解决方案，具体是通过动态创建 script 标签，然后通过标签的 src 属性获取 js 文件中的 js 脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是 ajax 技术。

JSONP学习

JSONP跨域详解

0. 前言

什么是JSON？

JSONP的客户端具体实现

总结原生JS实现JSONP的步骤

（1）客户端

（2） 服务端

JSONP在jQuery中的具体实现

（1）getJSON实现方式

（2）$ajax实现方式：

vue.js

JSONP与GET / POST 请求

JSONP 不是 ajax

（2）服务端