首頁 > web前端 > js教程 > 主體

JS如何實現瀏覽器通信

零到壹度
發布: 2018-03-23 11:40:33
原創
2277 人瀏覽過

本文主要和大家分享JS如何實現瀏覽器通信,主要以程式碼形式,希望能幫助大家。

同源策略及限制

同源策略限制了從同一個來源載入的文件或腳本如何與來自另一個來源的資源互動。這是一個用於隔離潛在惡意檔案的重要安全機制。 (三相同:協定http/https,網域名稱和連接埠)

  • Cookie/LocalStorage和IndexDB無法讀取

  • DOM無法取得

  • Ajax請求不能發送發送

##原因http://store.company.com/dir2/other.htmlhttp://store.company.com/dir/inner/another.html成功#https://store.company.com/secure.html失敗#不同協定( https與http )http://store.company.com:81/dir/etc.html失敗#不同連接埠( 81和80)http://news.company.com/dir/other.html失敗不同網域( news和store )
#URL


前後端如何溝通

  • Ajax:在同源下通訊方式

  • WebSocket:不限制同源策略

  • CORS:支援跨域通信,也支援同源通信

如何建立Ajax

  • XMLHttpRequest物件的工作流程

  • 相容性處理

  • 事件的觸發條件

  • 的觸發順序

#方法說明JSONP動態建立
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">var xht = XMLHttpRequest ? new XMLHttpRequest():new window.ActiveXObject(&amp;#39;Microsoft.XMLHTTP&amp;#39;);var data = opt.data, url = opt.url, type=opt.type.toUpperCase(), dataArr=[];for(var k in data){ dataArr.push(k+&amp;#39;=&amp;#39;+data[k]); }if(type === &amp;#39;GET&amp;#39;){ url = url + &amp;#39;?&amp;#39; + dataArr.join(&quot;&amp;&quot;); xhr.open(type, url.replace(/\?s/g,&amp;#39;&amp;#39;), true); xhr.send(); }if(type === &amp;#39;POST&amp;#39;){ xhr.open(type, url, true); xhr.setRequestHeader(&amp;#39;Content-type&amp;#39;,&amp;#39;application/x-www-form-urlencoded&amp;#39;); xhr.send(dataArr.join(&amp;#39;&amp;&amp;#39;)); } xhr.onload = function(){ if(xhr.status === 200 || xhr.status === 304){ //媒体资源需要206 var res; if(opt.success &amp;&amp; opt.success instanceof Function){ res = xhr.responseText; if(typeof res === &amp;#39;string&amp;#39;){ res = JSON.parse(res); opt.success.call(xhr, res); } } }else{ if(opt.error &amp;&amp; opt.error instanceof Function){ opt.error.call(xhr, res); } } }</pre><div class="contentsignin">登入後複製</div></div>跨域通訊的幾種方式