JSONP 教程

什么是JSONP

JSONP是一种跨域数据传输方式，它的全称是JSON with Padding，即通过在请求URL中加入一个回调函数名来取得数据。

JSONP的原理

因为浏览器同源策略的限制，普通的ajax请求无法跨域获取数据。但是JSONP是可以跨域请求数据的。它利用了script标签不受同源策略限制的特点。当使用script标签请求一个包含JSON数据的URL时，响应的内容会被当做JS代码执行。所以JSONP的原理就是，动态生成一个script标签，然后将请求地址加上回调函数名后作为src属性的值，服务器向这个地址发送数据，并在响应中将回调函数名与JSON数据一起返回，此时，浏览器就会自动执行新建的script标签内的回调函数，从而使用数据。

JSONP的使用

客户端

客户端需要指定一个回调函数来接收返回的数据，这个回调函数可以是已经定义好的函数，也可以是匿名函数。一般来说，使用jQuery库的ajax方法来发送JSONP请求最方便。代码示例：

$.ajax({
    type: "GET",
    url: "http://example.com/api/jsonp",
    dataType: "jsonp",
    jsonpCallback: "callbackFunc",
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log(xhr.responseText);
    }
});

function callbackFunc(data) {
    console.log(data);
}

其中，dataType指定数据类型为JSONP，jsonpCallback指定回调函数名，success和error分别指定成功和失败时的回调函数。

服务端

服务端需要根据请求参数中回调函数名来构造响应数据，响应数据的格式必须是一个函数调用，并将要返回的JSON数据作为参数传递给这个函数。代码示例：

callbackFunc({"name": "John", "age": 20})

JSONP的优缺点

优点

1. 解决跨域问题，客户端可以从不同的域获取数据；
2. 不需要特殊的服务器支持，只需服务端返回JSON数据即可；
3. 相对于XMLHttpRequest跨域请求访问数据更简单；

缺点

1. 安全问题，JSONP是在客户端执行代码，如果返回的JSON数据中包含恶意代码，会造成客户端执行恶意代码的风险；
2. 只支持GET请求，不能进行POST等其它类型的数据传输；
3. 可能存在缓存导致的数据更新问题。

总结

JSONP是一种跨域数据传输方案，它利用了浏览器的script标签不受同源策略限制的特点。客户端通过动态生成一个script标签来请求数据，服务端返回的数据将被当做JS代码执行，并执行客户端指定的回调函数，从而完成数据接收的过程。JSONP相对于XMLHttpRequest因其简单易用而被广泛地使用，但存在一定的安全隐患，适用场景需要慎重考虑。