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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章