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