跨域問題一直是前端中常見的問題，每當說到跨域，第一浮現的技術必然就是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調用的問題。
以上所述是小編給大家介紹的淺析JSONP技術原理及實現的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！