前端中的通訊（一）

weixin_34290000發表於2018-06-29
前端

什麼是同源策略及限制

  • 源：協議(http/https/ws)+域名(www.baidu.com)+埠(80)，不一樣就是跨域了。
  • 同源策略：限制兩個不同的源之間的資源互動，是用於隔離潛在惡意檔案的安全機制。
  • 限制：
    -- cookie、localStorage、indexDB無法讀取
    -- DOM無法獲得
    -- Ajax請求不能傳送

前後端如何通訊

  • Ajax
  • websocket
  • CORS

如何建立Ajax

  • 建立ajax物件(相容處理)
  • open()
  • send()
  • onreadystatechange
  • readyState
  • status
  • JSON.parse(xhr.responseText)
function ajax(){
    var xhr = null;
    try{
        xhr = new XMLHttpRequest();
    } catch(e){
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xhr.open('get','getNews.php',true);
    xhr.send();
    
    /*
    xhr.open('post','1.post.php',true);
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明傳送的資料型別
    xhr.send('username=劉&age=3');
    */
    
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if( xhr.status ==200 || xhr.status ==304  ){
                //alert( xhr.responseText );//string
                var data = JSON.parse(xhr.responseText);
            }else{
                alert( '出錯了，Err:' + xhr.status );
            }
            
        }
    };
};

跨域通訊的幾種方式

  • jsonp :動態新增<script>標籤，執行伺服器返回的函式
  • hash :hash改變頁面不會重新整理，改變hash後，監聽hash變化，獲取資料
  • postMessage :
window.postMessage('data','http://a.com')
window.addEventListener('message',(event)=>{
   console.log(event.origin,event.source,event.data) 
},false)
  • websocket :
var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};  
--------------------------------------------------
> Connection open ...
> Received Message: Hello WebSockets!
> Connection closed.
  • CORS(Cross-Origin Resource Sharing, 跨源資源共享) : 瀏覽器會攔截ajax請求，如果是跨域的，會在http請求中新增origin
fetch("/a/url",{
    method:'get',
}).then(
    function(response){
        if(response.status!==200){
            console.log("存在一個問題，狀態碼為："+response.status);
            return;
        }
        //檢查響應文字
        response.json().then(function(data){
            console.log(data);
        });
    }
).catch(function(err){
    console.log("Fetch錯誤:"+err);
});

相關文章