淺析JSONP技術原理及實現
跨域問題一直是前端中常見的問題,每當說到跨域,第一浮現的技術必然就是JSONP
JSONP在我的理解,它并不是ajax,它是在文檔中插入一個script標簽,創(chuàng)建_callback方法,通過服務器配合執(zhí)行_callback方法,并傳入一些參數
JSONP的局限就在于,因為是通過插入script標簽,所以參數只能通過url傳入,因此只能滿足get請求,特別jQuery的ajax方法時,即使設置type: 'POST',但是只要設置了dataType: 'jsonp',在請求時,都會自動使用GET請求
實現邏輯
step1: 創(chuàng)建_callback方法 (_callback中可以刪除script標簽和_callback方法)
step2: 插入script標簽
step3: 服務器輸出js
實現:
var requestJsonp = function (opt) { var funName, script; /* * step1 創(chuàng)建_callback方法 */ //_callback函數名 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標簽 */ 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的值,作為函數名執(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標簽,執(zhí)行js代碼, 刪除script標簽
實現代碼并沒有考慮兼容以及傳入data后生成url的問題。
下面給大家說下jsonp的優(yōu)缺點:
JSONP的優(yōu)點是:它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制;它的兼容性更好,在更加古老的瀏覽器中都可以運行,不需要XMLHttpRequest或ActiveX的支持;并且在請求完畢后可以通過調用callback的方式回傳結果。
JSONP的缺點則是:它只支持GET請求而不支持POST等其它類型的HTTP請求;它只支持跨域HTTP請求這種情況,不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
以上所述是小編給大家介紹的淺析JSONP技術原理及實現的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
JavaScrip報錯:module?is?not?defined的原因及解決
這篇文章主要給大家介紹了關于JavaScrip報錯:module?is?not?defined的原因及解決方法,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09