1.原理

jsonp是一種跨域通信的手段，它的原理其實(shí)很簡(jiǎn)單：

首先是利用script標(biāo)簽的src屬性來(lái)實(shí)現(xiàn)跨域。

通過(guò)將前端方法作為參數(shù)傳遞到服務(wù)器端，然后由服務(wù)器端注入?yún)?shù)之后再返回，實(shí)現(xiàn)服務(wù)器端向客戶端通信。

由于使用script標(biāo)簽的src屬性，因此只支持get方法。

2.實(shí)現(xiàn)流程

1.設(shè)定一個(gè)script標(biāo)簽

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

2.callback定義了一個(gè)函數(shù)名，而遠(yuǎn)程服務(wù)端通過(guò)調(diào)用指定的函數(shù)并傳入?yún)?shù)來(lái)實(shí)現(xiàn)傳遞參數(shù)，將fn(response)傳遞回客戶端

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

3.客戶端接收到返回的js腳本，開(kāi)始解析和執(zhí)行fn(response)

3.jsonp簡(jiǎn)單實(shí)現(xiàn)

一個(gè)簡(jiǎn)單的jsonp實(shí)現(xiàn)，其實(shí)就是拼接url，然后將動(dòng)態(tài)添加一個(gè)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 
});

服務(wù)器端代碼

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');
});

然而，這個(gè)實(shí)現(xiàn)雖然簡(jiǎn)單，但有一些不足的地方：
1.我們傳遞的回調(diào)必須是一個(gè)全局方法，我們都知道要盡量減少全局的方法。
2.需要加入一些參數(shù)校驗(yàn)，確保接口可以正常執(zhí)行。

4.可靠的jsonp實(shí)現(xiàn)

(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++;

        // 添加回調(diào)函數(shù)
        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;

        // 傳遞的是一個(gè)匿名的回調(diào)函數(shù)，要執(zhí)行的話，暴露為一個(gè)全局方法
        global[fnName] = function (ret) {
            callback && callback(ret);
            container.removeChild(scriptNode);
            delete global[fnName];
        }

        // 出錯(cuò)處理
        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);
    }
});