在web2.0時代，熟練的使用ajax是每個前端攻城師必備的技能。然而由于受到瀏覽器的限制，ajax不允許跨域通信。

JSONP就是目前主流的實(shí)現(xiàn)跨域通信的解決方案。

雖然在在jquery中，我們可以通過$.ajax的dataType設(shè)置為jsonp來調(diào)用jsonp，但是jsonp和ajax的實(shí)現(xiàn)原理一個關(guān)系都木有。jsonp主要是通過script可以鏈接遠(yuǎn)程url來實(shí)現(xiàn)跨域請求的。如：

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

callback定義了一個函數(shù)名，而遠(yuǎn)程服務(wù)端通過調(diào)用指定的函數(shù)并傳入?yún)?shù)來實(shí)現(xiàn)傳遞參數(shù)。

搜索了網(wǎng)上好多文章，他們實(shí)現(xiàn)方法都過于簡單，要實(shí)際應(yīng)用還要多加修改，我在這里封裝了一個對象，可以直接運(yùn)用于實(shí)際操作。

var JSONP = {

// 獲取當(dāng)前時間戳

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]);

}

}

// 加個時間戳，防止緩存

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

// 檢測callback的函數(shù)名是否已經(jīng)定義

var match = /callback=(\w+)/.exec(url);

if(match && match[1]) {

name = match[1];

} else {

// 如果未定義函數(shù)名的話隨機(jī)成一個函數(shù)名

// 隨機(jī)生成的函數(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)建一個script元素

var script = document.createElement("script");

script.type = "text/javascript";

// 設(shè)置要遠(yuǎn)程的url

script.src = url;

// 設(shè)置id，為了后面可以刪除這個元素

script.id = "id_" + name;

// 把傳進(jìn)來的函數(shù)重新組裝，并把它設(shè)置為全局函數(shù)，遠(yuǎn)程就是調(diào)用這個函數(shù)

window[name] = function(json) {

// 執(zhí)行這個函數(shù)后，要銷毀這個函數(shù)

window[name] = undefined;

// 獲取這個script的元素

var elem = document.getElementById("id_" + name);

// 刪除head里面插入的script，這三步都是為了不影響污染整個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)過程基本寫在注釋里啦，自己看。調(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)，那就比較簡單了，以php為例：

$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';

echo $callback.'( .json_encode( $data ).')';

ajax與jsonp的異同再做一些補(bǔ)充說明： 

1、ajax和jsonp這兩種技術(shù)在調(diào)用方式上“看起來”很像，目的也一樣，都是請求一個url，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進(jìn)行了封裝； 

2、但ajax和jsonp其實(shí)本質(zhì)上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內(nèi)容，而jsonp的核心則是動態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js腳本。 

3、所以說，其實(shí)ajax與jsonp的區(qū)別不在于是否跨域，ajax通過服務(wù)端代理一樣可以實(shí)現(xiàn)跨域，jsonp本身也不排斥同域的數(shù)據(jù)的獲取。 

4、還有就是，jsonp是一種方式或者說非強(qiáng)制性協(xié)議，如同ajax一樣，它也不一定非要用json格式來傳遞數(shù)據(jù)，如果你愿意，字符串都行，只不過這樣不利于用jsonp提供公開服務(wù)。 

總而言之，jsonp不是ajax的一個特例，哪怕jquery等巨頭把jsonp封裝進(jìn)了ajax，也不能改變這一點(diǎn)！