JSONP跨域请求实例详解

什么是JSONP

JSONP是JSON with Padding（填充式 JSON 或参数式 JSON）的缩写，是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。JSONP 的优势在于它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，需服务器端改变响应头来实现跨域。

JSONP一般通过动态创建script标签，使得该标签可以访问跨域接口，而script标签是不受同源策略限制的，因此可以加载跨域脚本，从而实现跨域请求。需要注意的是，JSONP只能用于从服务器获取数据，不能用于向服务器发送数据。

JSONP实例1 - 简单的跨域请求

前端代码：

/* callback function */
function callback(data) {
    console.log(data);
}

/* create script element */
var script = document.createElement("script");
script.src = "https://example.com/api/data?callback=callback";
document.getElementsByTagName("head")[0].appendChild(script);

后端代码：

/* get data from database */
var data = getDataFromDatabase();

/* wrap data with callback */
var callback = req.query.callback;
data = callback + "(" + JSON.stringify(data) + ")";

/* response data with text/javascript */
res.writeHead(200, {
    "content-type": "text/javascript"
});
res.end(data);

上面是一个简单的JSONP请求示例，前端创建一个script标签，请求后端接口，并指定回调函数名。后端将获取到的数据包装在回调函数中，返回给前端。

需要注意的是，后端返回的数据格式为text/javascript，并且数据已经被包装在回调函数中。

JSONP实例2 - 处理多个JSONP请求

前端代码：

var loadCount = 0;
function onScriptLoaded() {
    loadCount++;
    if (loadCount === 2) {
        console.log("All scripts loaded");
    }
}

function callback1(data) {
    console.log(data);
    onScriptLoaded();
}

function callback2(data) {
    console.log(data);
    onScriptLoaded();
}

/* create script elements */
var script1 = document.createElement("script");
var script2 = document.createElement("script");
script1.src = "https://example.com/api/data1?callback=callback1";
script2.src = "https://example.com/api/data2?callback=callback2";
document.getElementsByTagName("head")[0].appendChild(script1);
document.getElementsByTagName("head")[0].appendChild(script2);

后端代码：

/* get data from database */
var data1 = getData1FromDatabase();
var data2 = getData2FromDatabase();

/* wrap data with callback */
var callback1 = req.query.callback1;
var callback2 = req.query.callback2;
data1 = callback1 + "(" + JSON.stringify(data1) + ")";
data2 = callback2 + "(" + JSON.stringify(data2) + ")";

/* response data with text/javascript */
res.writeHead(200, {
    "content-type": "text/javascript"
});
res.write(data1);
res.write(data2);
res.end();

上面是一个处理多个JSONP请求的示例，前端创建两个script标签，请求两个不同的接口，并指定不同的回调函数。后端将获取到的数据分别包装在对应的回调函数中，一并返回给前端。

需要注意的是，后端返回的是多个text/javascript类型的响应，且需要使用res.write()方法来写入多个响应数据。

总结

在跨域数据访问方面，JSONP是一种非常常用的实现方式。但是，JSONP也存在一些安全问题，比如可能会被一些第三方服务滥用，因此需要在使用JSONP时进行一些安全性检查。