1. 概述

jsonp是一种跨域通讯的手腕，它的道理实在很简朴：

1. 首先是应用script标签的src属性来完成跨域。

2. 经由过程将前端要领作为参数通报到服务器端，然后由服务器端注入参数以后再返回，完成服务器端向客户端通讯。

3. 因为运用script标签的src属性，因而只支撑get要领

2. 完成流程

1. 设定一个script标签

   <script src="http://jsonp.js?callback=xxx"></script>

2. callback定义了一个函数名，而长途服务端经由过程挪用指定的函数并传入参数来完成通报参数，将fn(response)通报回客户端

   $callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
   echo $callback.'(.json_encode($data).)';

3. 客户端接收到返回的js剧本，最先剖析和实行fn(response)

3. jsonp简朴完成

一个简朴的jsonp完成，实在就是拼接url，然后将动态增加一个script元素到头部。

function jsonp(req){
    var script = document.createElement('script');
    var url = req.url + '?callback=' + req.callback.name;
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script); 
}

前端js示例

function hello(res){
    alert('hello ' + res.data);
}
jsonp({
    url : '',
    callback : hello 
});

服务器端代码

var http = require('http');
var urllib = require('url');

var port = 8080;
var data = {'data':'world'};

http.createServer(function(req,res){
    var params = urllib.parse(req.url,true);
    if(params.query.callback){
        console.log(params.query.callback);
        //jsonp
        var str = params.query.callback + '(' + JSON.stringify(data) + ')';
        res.end(str);
    } else {
        res.end();
    }
    
}).listen(port,function(){
    console.log('jsonp server is on');
});

但是，这个完成虽然简朴，但有一些不足的处所：

1. 我们通报的回调必需是一个全局要领，我们都晓得要只管削减全局的要领。

2. 须要到场一些参数校验，确保接口能够一般实行。

4. 牢靠的jsonp完成

(function (global) {
    var id = 0,
        container = document.getElementsByTagName("head")[0];

    function jsonp(options) {
        if(!options || !options.url) return;

        var scriptNode = document.createElement("script"),
            data = options.data || {},
            url = options.url,
            callback = options.callback,
            fnName = "jsonp" + id++;

        // 增加回调函数
        data["callback"] = fnName;

        // 拼接url
        var params = [];
        for (var key in data) {
            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
        }
        url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
        url += params.join("&");
        scriptNode.src = url;

        // 通报的是一个匿名的回调函数，要实行的话，暴露为一个全局要领
        global[fnName] = function (ret) {
            callback && callback(ret);
            container.removeChild(scriptNode);
            delete global[fnName];
        }

        // 失足处置惩罚
        scriptNode.onerror = function () {
            callback && callback({error:"error"});
            container.removeChild(scriptNode);
            global[fnName] && delete global[fnName];
        }

        scriptNode.type = "text/javascript";
        container.appendChild(scriptNode)
    }

    global.jsonp = jsonp;

})(this);

运用示例

jsonp({
    url : "www.example.com",
    data : {id : 1},
    callback : function (ret) {
        console.log(ret);
    }
});

5. 泉源

个人博客