JSONP的实现

JSONP简介

要实现JSONP，首先得知道JSONP是干什么用的，以及如何使用。

JSONP主要用于跨域获取资源。一般来说，它的使用方法如下（以jquery为例）：

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
 
    // 回调函数的名称
    jsonp: "callback",
 
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",
 
    // 传递的参数
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
 
    // 调用成功的处理函数，处理返回值
    success: function( response ) {
        console.log( response ); // server response
    }
});

JSONP的原理

我们知道，AJAX请求具有跨域的限制。但是某些标签，比如<script>, <img>等就没有这样的限制。因此，我们就可以利用这样的特点，突破跨域的限制。

JSONP就是利用<script>标签能够跨域的特点来从服务器获取数据。

首先，我们前端写好请求成功后的回调函数，后端服务器会把数据当作参数传进来。比如说：

function Success(response) {
    // 简单打印返回值
    console.log(response);
}

然后我们创建一个<script>标签，并指定src属性，让浏览器向服务器发起请求：

let s = document.createElement("script");
s.src = "http://api.test.com?callback=Success&qeury=123";
document.documentElement.appendChild(s);

服务器收到请求后，可以根据url中的参数进行数据库的查询等一系列的操作，获取到前端想要的值，然后生成响应。响应的方式是调用前端之前定义好的回调函数，如下所示：

Success({data: "test"});

这样，前端就能把{data: "test"}给打印出来了

JSONP的实现

知道了JSONP的原理，我们现在的目标就是设计出一套合理的接口，方便直接进行JSONP的调用。我们这里只考虑前端的事情，后端事情忽略。

function JSONP(config) {
    let url = config.url || "";
    let callback = config.callback || "";  // 回调函数名称
    let data = config.data || {};  // 请求的参数
    let success = config.success || function () {};  // 成功的回调函数

    // 注册成功后的回调函数
    window[callback] = success;

    // 对象转换成url参数
    function obj2url(obj) {
        let res = "";
        for(let attr in obj) {
            res += attr + "=" + obj[attr] + "&";
        }
        return res;
    }

    data.callback = callback;
    url += obj2url(data);

    let script = document.createElement("script");
    script.src = url;
    document.documentElement.appendChild(script);
}

至此，我们就实现了一个简陋的JSONP。