/*------------同源---------------*/
同源:當兩個接口的協議、域名、端口號都相等時,這倆接口是同源的,只要有一個條件不相等,則非同源。不是同源的兩個頁面不能互相訪問本地緩存、不能互相修改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腳本。