JSONP的原理及跨域
阿新 • • 發佈:2018-12-22
JSONP原理
只要你聊到跨域,就必須聊到JSONP,所以在這裡說一下JSONP的實現原理,以及你在專案中的哪個需求使用了JSONP,簡單點理解就是HTML裡面所有帶src屬性的標籤都可以跨域,如iframe,img,script等。
所以可以把需要跨域的請求改成用script指令碼載入即可,伺服器返回執行字串,但是這個字串是在window全域性作用域下執行的,你需要把他返回到你的程式碼的作用域內,這裡就需要臨時建立一個全域性的回撥函式(callback),並傳到後臺,最後再整合實際要請求的陣列,返回給前端,讓瀏覽器直接呼叫,用回撥的形式回到你的原始碼流程中。
JS:
① 動態建立 src標籤;var script=document.createElement("script");
② 設定script的src為跨域的地址?callback=動態獲取的地址 document.body.appendChild(script);
JQ:
① 動態建立 src標籤;var script=document.createElement("script");
② 設定script的src為跨域的地址?callback=?隨機生成一個函式名:
var cbName="callback"+Math.random().toSring().substr(2,10);
將url地址中的callback=?替換為callback=生成的函式名;
var url=opt.url.replace(/callback=\?/,"callback="+cbName)
[全域性,不要衝突; 函式名是變數,通過[]; 汙染了window,釋放,window[cbName]=null; ]