茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

這篇文章主要介紹了淺析JSONP技術(shù)原理及實現(xiàn) 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

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

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

JSONP的局限就在于，因為是通過插入script標(biāo)簽，所以參數(shù)只能通過url傳入，因此只能滿足get請求，特別jQuery的ajax方法時，即使設(shè)置type: 'POST'，但是只要設(shè)置了dataType: 'jsonp'，在請求時，都會自動使用GET請求

實現(xiàn)邏輯

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

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

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

實現(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!');

}

});

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

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

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

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

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

以上所述是小編給大家介紹的淺析JSONP技術(shù)原理及實現(xiàn)的相關(guān)知識，希望對大家有所幫助