本文主要和大家分享JS如何實現瀏覽器通信,主要以程式碼形式,希望能幫助大家。
同源策略限制了從同一個來源載入的文件或腳本如何與來自另一個來源的資源互動。這是一個用於隔離潛在惡意檔案的重要安全機制。 (三相同:協定http/https,網域名稱和連接埠)
Cookie/LocalStorage和IndexDB無法讀取
DOM無法取得
Ajax請求不能發送發送
#URL | ##原因||
---|---|---|
失敗 | #不同協定( https與http ) | |
失敗 | #不同連接埠( 81和80) | |
失敗 | 不同網域( news和store ) |
##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">var xht = XMLHttpRequest ? new XMLHttpRequest():new window.ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);var data = opt.data,
url = opt.url,
type=opt.type.toUpperCase(),
dataArr=[];for(var k in data){
dataArr.push(k+&#39;=&#39;+data[k]);
}if(type === &#39;GET&#39;){
url = url + &#39;?&#39; + dataArr.join("&");
xhr.open(type, url.replace(/\?s/g,&#39;&#39;), true);
xhr.send();
}if(type === &#39;POST&#39;){
xhr.open(type, url, true);
xhr.setRequestHeader(&#39;Content-type&#39;,&#39;application/x-www-form-urlencoded&#39;);
xhr.send(dataArr.join(&#39;&&#39;));
}
xhr.onload = function(){
if(xhr.status === 200 || xhr.status === 304){ //媒体资源需要206
var res; if(opt.success && opt.success instanceof Function){
res = xhr.responseText; if(typeof res === &#39;string&#39;){
res = JSON.parse(res);
opt.success.call(xhr, res);
}
}
}else{ if(opt.error && opt.error instanceof Function){
opt.error.call(xhr, res);
}
}
}</pre><div class="contentsignin">登入後複製</div></div> 跨域通訊的幾種方式
| |
說明 | |
JSONP | 動態建立 |