- 概述
jsonp是一種跨域通信的手段佩捞，它的原理其實很簡單：
首先是利用script標(biāo)簽的src屬性來實現(xiàn)跨域。
通過將前端方法作為參數(shù)傳遞到服務(wù)器端闻葵，然后由服務(wù)器端注入?yún)?shù)之后再返回陪竿，實現(xiàn)服務(wù)器端向客戶端通信跷乐。
由于使用script標(biāo)簽的src屬性，因此只支持get方法
- 實現(xiàn)流程
設(shè)定一個script標(biāo)簽
<script src="http://jsonp.js?callback=xxx"></script>
callback定義了一個函數(shù)名座硕，而遠(yuǎn)程服務(wù)端通過調(diào)用指定的函數(shù)并傳入?yún)?shù)來實現(xiàn)傳遞參數(shù)弛作，將fn(response)傳遞回客戶端
_GET['callback']) ?
callback.'(.json_encode($data).)';
客戶端接收到返回的js腳本，開始解析和執(zhí)行fn(response)
- jsonp簡單實現(xiàn)
一個簡單的jsonp實現(xiàn)华匾，其實就是拼接url映琳，然后將動態(tài)添加一個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');
});
然而蜘拉，這個實現(xiàn)雖然簡單萨西，但有一些不足的地方：
我們傳遞的回調(diào)必須是一個全局方法，我們都知道要盡量減少全局的方法旭旭。
需要加入一些參數(shù)校驗谎脯，確保接口可以正常執(zhí)行。
-
可靠的jsonp實現(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; // 傳遞的是一個匿名的回調(diào)函數(shù)持寄，要執(zhí)行的話穿肄，暴露為一個全局方法 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.exampe.com",
data : {id : 1},
callback : function (ret) {
console.log(ret);
}
});
