js里的同源

/*------------同源---------------*/

同源:當兩個接口的協議、域名、端口號都相等時,這倆接口是同源的,只要有一個條件不相等,則非同源。不是同源的兩個頁面不能互相訪問本地緩存、不能互相修改dom節點、不能使用ajax請求對方接口數據

如何判斷兩個網頁同源

1、協議相同? ? ?? 2、域名相同????????? 3、端口號相同

同源策略目的:1、保護本地緩存不被讀取2、保護網站不被其他網站修改

同源策略的限制:

1、Cookie、localStorage、indexDB無法讀取

2、dom節點無法獲得。

3、AJAX請求無法發送。

JSONP:利用scritp標簽請求外部服務器中的數據,從而繞開同源策略對AJAX請求數據的限制。

jsonp的本質:利用script標簽中src屬性可以加載任意文件的特性,通過這個屬性來訪問數據接口(添加一個回調函數作為參數),而數據接口會返回一個由回調函數名包裹的json數據,從而達到獲取跨域數據的目的。

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'http://10.0.159.198/data.php?callback=foo';

document.getElementsByTagName('head')[0].appendChild(script);

function foo (data) {

alert(data);

}

/*------------封裝JSONP---------------*/

function creatScriptTag (srcString) {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = srcString;

document.getElementsByTagName('head')[0].appendChild(script);

}

creatScriptTag('http://10.0.159.198/data.php?callback=abc');

function abc (data) {

alert(data);

}

ajax和jsonp其實本質上是不同的東西。

ajax的核心是通過XmlHttpRequest獲取非本頁內容,而jsonp的核心則是動態添加標簽來調用服務器提供的js腳本。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容