利用在頁面中創建<script>節點的方法向不同域提交HTTP請求的方法稱為JSONP,這項技術可以解決跨域提交Ajax請求的問題。
JSONP的優點是:它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制;它的兼容性更好,在更加古老的瀏覽器中都可以運行,不需要XMLHttpRequest或ActiveX的支持;並且在請求完畢后可以通過調用callback的方式回傳結果。
JSONP的缺點則是:它只支持GET請求而不支持POST等其它類型的HTTP請求;它只支持跨域HTTP請求這種情況,不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
代碼實現:原文地址(http://www.travisup.com/post/index/28)
var JSONP = {
// 獲取當前時間戳
now: function() {
return (new Date()).getTime();
},
// 獲取隨機數
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)});

