跨域問(wèn)題一直是前端中常見的問(wèn)題，每當(dāng)說(shuō)到跨域，第一浮現(xiàn)的技術(shù)必然就是JSONP

JSONP在我的理解，它并不是ajax，它是在文檔中插入一個(gè)script標(biāo)簽，創(chuàng)建_callback方法，通過(guò)服務(wù)器配合執(zhí)行_callback方法，并傳入一些參數(shù)

JSONP的局限就在于，因?yàn)槭峭ㄟ^(guò)插入script標(biāo)簽，所以參數(shù)只能通過(guò)url傳入，因此只能滿足get請(qǐng)求，特別jQuery的ajax方法時(shí)，即使設(shè)置type: 'POST'，但是只要設(shè)置了dataType: 'jsonp'，在請(qǐng)求時(shí)，都會(huì)自動(dòng)使用GET請(qǐng)求

實(shí)現(xiàn)邏輯

step1: 創(chuàng)建_callback方法 (_callback中可以刪除script標(biāo)簽和_callback方法)

step2: 插入script標(biāo)簽

step3: 服務(wù)器輸出js

實(shí)現(xiàn):

var requestJsonp = function (opt) {
var funName, script;
/*
* step1 創(chuàng)建_callback方法
*/ 
//_callback函數(shù)名
funName = '_cb' + (Math.random() * 1000000);
//創(chuàng)建_callback方法
window[funName] = function (data) {
if (typeof opt.success == 'function') {
opt.success(data);
}
window[funName] = null;
delete window[funName];
document.body.removeChild(script);
script = null;
};
/*
* step2 插入script標(biāo)簽
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 服務(wù)器輸出js
* 服務(wù)器應(yīng)接受url參數(shù)中_callback的值,作為函數(shù)名執(zhí)行輸出js
* 類似輸出
* _callback({"name":"jsonp","description":"jsonp test"});
*/ 
/*
* 處理error
*/
script.addEventListener('error', function () {
window[funName] = null;
delete window[funName];
if (typeof opt.error == 'function') {
opt.error();
}
document.body.removeChild(script);
script = null;
});
};
requestJsonp({
url: 'http://www.url.org?tid=Jsx2',
success: function (data) {
console.log(data);
},
error: function () {
console.log('request error!');
}
}); 

對(duì)于瀏覽器的行為就是插入script標(biāo)簽，執(zhí)行js代碼， 刪除script標(biāo)簽

實(shí)現(xiàn)代碼并沒有考慮兼容以及傳入data后生成url的問(wèn)題。

下面給大家說(shuō)下jsonp的優(yōu)缺點(diǎn)：

JSONP的優(yōu)點(diǎn)是：它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。

JSONP的缺點(diǎn)則是：它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。

以上所述是小編給大家介紹的淺析JSONP技術(shù)原理及實(shí)現(xiàn)的相關(guān)知識(shí)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論