1. 程式人生 > >JSONP的原理及跨域

JSONP的原理及跨域

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;  ]