JSONP原理及簡單實現(xiàn)
在web2.0時代，熟練的使用ajax是每個前端攻城師必備的技能。然而由于受到瀏覽器的限制，ajax不允許跨域通信。
JSONP就是目前主流的實現(xiàn)跨域通信的解決方案。
雖然在在jquery中，我們可以通過$.ajax的dataType設(shè)置為jsonp來調(diào)用jsonp，但是jsonp和ajax的實現(xiàn)原理一個關(guān)系都木有。jsonp主要是通過script可以鏈接遠(yuǎn)程url來實現(xiàn)跨域請求的。如：
<script src="http://jsonp.js?callback=xxx"></script>
callback定義了一個函數(shù)名，而遠(yuǎn)程服務(wù)端通過調(diào)用指定的函數(shù)并傳入?yún)?shù)來實現(xiàn)傳遞參數(shù)。
搜索了網(wǎng)上好多文章，他們實現(xiàn)方法都過于簡單，要實際應(yīng)用還要多加修改，我在這里封裝了一個對象，可以直接運用于實際操作。
var JSONP = {
// 獲取當(dāng)前時間戳
now: function() {
return (new Date()).getTime();
},
// 獲取16位隨機(jī)數(shù)
rand: function() {
return Math.random().toString().substr(2);
},
// 刪除節(jié)點元素
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);
}
}
};
實現(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ù)端的實現(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其實本質(zhì)上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內(nèi)容，而jsonp的核心則是動態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js腳本。
3、所以說，其實ajax與jsonp的區(qū)別不在于是否跨域，ajax通過服務(wù)端代理一樣可以實現(xiàn)跨域，jsonp本身也不排斥同域的數(shù)據(jù)的獲取。
4、還有就是，jsonp是一種方式或者說非強(qiáng)制性協(xié)議，如同ajax一樣，它也不一定非要用json格式來傳遞數(shù)據(jù)，如果你愿意，字符串都行，只不過這樣不利于用jsonp提供公開服務(wù)。
總而言之，jsonp不是ajax的一個特例，哪怕jquery等巨頭把jsonp封裝進(jìn)了ajax，也不能改變這一點！
好了，寫完了，有什么問題歡迎討論。
相關(guān)文章
這篇文章主要介紹了如何基于原生javaScript生成帶圖片的二維碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)鼠標(biāo)點擊頁面彈出自定義文字效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
本文主要介紹了JavaScript 對象合并的幾種方法小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章介紹了JavaScript:Div層拖動效果實例代碼，有需要的朋友可以參考一下2013-08-08
js中AppendChild與insertBefore的用法詳細(xì)解析
這篇文章主要是對js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
input file的默認(rèn)value清空與賦值方法
出于安全性考慮，JS是不能直接設(shè)置File的value值的，下面是我總結(jié)出來的方法2010-09-09
彈出層永遠(yuǎn)居中的方法有很多，在本文為大家詳細(xì)介紹下使用js是如何輕松實現(xiàn)的，喜歡的朋友可以參考下2013-11-11
JavaScript中操作Mysql數(shù)據(jù)庫實例
這篇文章主要介紹了JavaScript中操作Mysql數(shù)據(jù)庫實例,本文直接給出實現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下2015-04-04
這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之Promise用法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)全選和全不選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07