JSONP實作原理與案例詳解

這次帶給大家JSONP實作原理與案例詳解，JSONP實現的注意事項有哪些，下面就是實戰案例，一起來看一下。

跨域問題一直是前端中常見的問題，每當說到跨域，第一浮現的技術必然就是JSONP

JSONP在我的理解，它並不是ajax，它是在文件中插入一個script標籤，建立_callback方法，透過伺服器配合執行_callback方法，並傳入一些參數

JSONP的限制就在於，因為是透過插入script標籤，所以參數只能透過url傳入，因此只能滿足get請求，特別jQuery的ajax方法時，即使設定type: 'POST'，但是只要設定了dataType: 'jsonp'，在請求時，都會自動使用GET請求

#實作邏輯

step1: 建立_callback方法(_callback中可以刪除script標籤和_callback方法)

step2: 插入script標籤

step3: 伺服器輸出js

實作:

var requestJsonp = function (opt) {
var funName, script;
/*
* step1 创建_callback方法
*/ 
//_callback函数名
funName = '_cb' + (Math.random() * 1000000);
//创建_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标签
*/
script = document.createElement('script');
script.type = 'text/javascript';
script.src = opt.url + (opt.url.indexOf('?') > -1 ? '&' : '?') + '_callback=' + funName;
document.body.appendChild(script);
/*
* step3 服务器输出js
* 服务器应接受url参数中_callback的值,作为函数名执行输出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標籤，執行js程式碼， 刪除script標籤

#實作程式碼並沒有考慮相容以及傳入data後產生url的問題。

下面要跟大家說下jsonp的優缺點：

JSONP的優點是：它不像XMLHttpRequest物件實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支援；並且在請求完畢後可以透過呼叫callback的方式回傳結果。

JSONP的缺點則是：它只支援GET請求而不支援POST等其它類型的HTTP請求；它只支援跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript呼叫的問題。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

使用JSONP的案例歸納

#在js中怎麼把json當作參數使用

以上是JSONP實作原理與案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！