在web2.0時(shí)代，熟練的使用ajax是每個(gè)前端攻城師必備的技能。然而由于受到瀏覽器的限制，ajax不允許跨域通信。
JSONP就是目前主流的實(shí)現(xiàn)跨域通信的解決方案。
雖然在在jquery中，我們可以通過(guò)$.ajax的dataType設(shè)置為jsonp來(lái)調(diào)用jsonp，但是jsonp和ajax的實(shí)現(xiàn)原理一個(gè)關(guān)系都木有。jsonp主要是通過(guò)script可以鏈接遠(yuǎn)程url來(lái)實(shí)現(xiàn)跨域請(qǐng)求的。如：
<script src="http://jsonp.js?callback=xxx"></script>
callback定義了一個(gè)函數(shù)名，而遠(yuǎn)程服務(wù)端通過(guò)調(diào)用指定的函數(shù)并傳入?yún)?shù)來(lái)實(shí)現(xiàn)傳遞參數(shù)。
搜索了網(wǎng)上好多文章，他們實(shí)現(xiàn)方法都過(guò)于簡(jiǎn)單，要實(shí)際應(yīng)用還要多加修改，我在這里封裝了一個(gè)對(duì)象，可以直接運(yùn)用于實(shí)際操作。
var JSONP = {
// 獲取當(dāng)前時(shí)間戳
now: function() {
return (new Date()).getTime();
},
// 獲取16位隨機(jī)數(shù)
rand: function() {
return Math.random().toString().substr(2);
},
// 刪除節(jié)點(diǎn)元素
removeElem: function(elem) {
var parent = elem.parentNode;
if(parent && parent.nodeType !== 11) {
parent.removeChild(elem);
}
},
// url組裝
parseData: function(data) {
var ret = "";
if(typeof data === "string") {
ret = data;
}
else if(typeof data === "object") {
for(var key in data) {
ret += "&" + key + "=" + encodeURIComponent(data[key]);
}
}
// 加個(gè)時(shí)間戳，防止緩存
ret += "&_time=" + this.now();
ret = ret.substr(1);
return ret;
},
getJSON: function(url, data, func) {
// 函數(shù)名稱
var name;
// 拼裝url
url = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);
// 檢測(cè)callback的函數(shù)名是否已經(jīng)定義
var match = /callback=(\w+)/.exec(url);
if(match && match[1]) {
name = match[1];
} else {
// 如果未定義函數(shù)名的話隨機(jī)成一個(gè)函數(shù)名
// 隨機(jī)生成的函數(shù)名通過(guò)時(shí)間戳拼16位隨機(jī)數(shù)的方式，重名的概率基本為0
// 如:jsonp_1355750852040_8260732076596469
name = "jsonp_" + this.now() + '_' + this.rand();
// 把callback中的?替換成函數(shù)名
url = url.replace("callback=?", "callback="+name);
// 處理?被encode的情況
url = url.replace("callback=%3F", "callback="+name);
}
// 創(chuàng)建一個(gè)script元素
var script = document.createElement("script");
script.type = "text/javascript";
// 設(shè)置要遠(yuǎn)程的url
script.src = url;
// 設(shè)置id，為了后面可以刪除這個(gè)元素
script.id = "id_" + name;
// 把傳進(jìn)來(lái)的函數(shù)重新組裝，并把它設(shè)置為全局函數(shù)，遠(yuǎn)程就是調(diào)用這個(gè)函數(shù)
window[name] = function(json) {
// 執(zhí)行這個(gè)函數(shù)后，要銷毀這個(gè)函數(shù)
window[name] = undefined;
// 獲取這個(gè)script的元素
var elem = document.getElementById("id_" + name);
// 刪除head里面插入的script，這三步都是為了不影響污染整個(gè)DOM啊
JSONP.removeElem(elem);
// 執(zhí)行傳入的的函數(shù)
func(json);
};
// 在head里面插入script元素
var head = document.getElementsByTagName("head");
if(head && head[0]) {
head[0].appendChild(script);
}
}
};
實(shí)現(xiàn)過(guò)程基本寫在注釋里啦，自己看。調(diào)用的方法跟jQuery基本一樣。如：
var data = {
from: "北京",
count: 27,
output: "json",
callback: "?"
}
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});
當(dāng)然要這么寫也行：
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});
至于服務(wù)端的實(shí)現(xiàn)，那就比較簡(jiǎn)單了，以php為例：
$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';
echo $callback.'( .json_encode( $data ).')';
ajax與jsonp的異同再做一些補(bǔ)充說(shuō)明：
1、ajax和jsonp這兩種技術(shù)在調(diào)用方式上“看起來(lái)”很像，目的也一樣，都是請(qǐng)求一個(gè)url，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進(jìn)行了封裝；
2、但ajax和jsonp其實(shí)本質(zhì)上是不同的東西。ajax的核心是通過(guò)XmlHttpRequest獲取非本頁(yè)內(nèi)容，而jsonp的核心則是動(dòng)態(tài)添加<script>標(biāo)簽來(lái)調(diào)用服務(wù)器提供的js腳本。
3、所以說(shuō)，其實(shí)ajax與jsonp的區(qū)別不在于是否跨域，ajax通過(guò)服務(wù)端代理一樣可以實(shí)現(xiàn)跨域，jsonp本身也不排斥同域的數(shù)據(jù)的獲取。
4、還有就是，jsonp是一種方式或者說(shuō)非強(qiáng)制性協(xié)議，如同ajax一樣，它也不一定非要用json格式來(lái)傳遞數(shù)據(jù)，如果你愿意，字符串都行，只不過(guò)這樣不利于用jsonp提供公開服務(wù)。
總而言之，jsonp不是ajax的一個(gè)特例，哪怕jquery等巨頭把jsonp封裝進(jìn)了ajax，也不能改變這一點(diǎn)！