前端面試11：通信類

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

課程思惟導圖

Q：什麼是跨域通訊？

一個域下的文檔或腳本試圖去請求另外一個域下的資源

Q：什麼是同源策略？

1. 同源：協議、域名、端口
2. 非同源的限制：
   1. cookie、localStorage、indexDB沒法讀取
   2. DOM沒法得到
   3. Ajax 請求不能發送

Q：先後端通訊有哪些？

1. Ajax ： 同源下的通訊方式
2. WebSocket：不受同源策略限制
3. CORS：支持跨域通訊，也支持同源通訊

Q：如何建立建立Ajax？

// 完整版
function ajax(opt) {
    if(!opt.url) return;
    var xhr = XMLHttpRequest
        ? new XMLHttpRequest()
        : new ActiveXObject('Microsoft.XMLHTTP');
     var data = opt.data,
         url = opt.url,
         type = opt.type.toUpperCase(),
         dataArr = [];
     for (var k in data) {
         dataArr.push(k + '=' + data[k]);
     }
     if (type === 'GET') {
         url = url + '?' + dataArr.join('&');
         xhr.open(type, url.replace(/\?$/g, ''), true);
         xhr.send();
     }
     if (type === 'POST') {
         xhr.open(type, url, true);
         xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
         xhr.send(dataArr.join('&'));
     }
     xhr.onload = function () {
         if (xhr.status === 200 || xhr.status === 304) {
             var res;
             if (opt.success && opt.success instanceof Function) {
                 res = xhr.responseText;
                 if (typeof res ==== 'string') {
                     res = JSON.parse(res);
                     opt.success.call(xhr, res);
                 }
             }
         } else {
             if (opt.error && opt.error instanceof Function) {
                 opt.error.call(xhr, res);
             }
         }
     };
}
// 簡易版，只考慮GET方式
var xhr = new XMLHttpRequest();
var url = '/test';
xhr.open('GET', url, true);
/**
 * 監聽服務端跟客戶端通訊的過程和進度
 */
xhr.onreadystatechange = function () {
    /**
     * 每當 readyState 改變時，就會觸發 onreadystatechange 事件。
     * 4: 請求已完成，且響應已就緒
     */
    if (xhr.readyState === 4) {
        // 200 成功
        if (xhr.status === 200) {
            console.log(xhr);
        } else {
            console.log('error');
        }
    }
}
xhr.send();//發起客戶端請求
複製代碼

Q：跨域解決方案有哪些？

方案1：document.domain：

1. 場景：兩個網頁一級域名相同，只是二級域名不一樣
2. 方案：瀏覽器容許經過設置document.domain共享 Cookie。這種方法只適用於 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 沒法經過這種方法

方案2：經過jsonp跨域

// 客戶端實現：
<script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
 
    // 傳參並指定回調執行函數爲onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);
 
    // 回調執行函數
    function onBack(res) {
        alert(JSON.stringify(res));
    }
</script>
// 服務端（返回時即執行全局函數）
onBack({"status": true, "user": "admin"})
複製代碼

方案三：location.hash

場景：當前頁面 A 經過iframe或frame嵌入了跨域的頁面 B

// 在A中僞代碼以下：
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
// 在B中的僞代碼以下：
window.onhashchange = function () {
  var data = window.location.hash;
};
複製代碼

方案四：postMessage

HTML5引入跨文檔通訊API，這個API爲window對象新增了一個window.postMessage方法，容許跨窗口通訊，不論這兩個窗口是否同源

// 例如，窗口A(http:A.com)向跨域的窗口B(http:B.com)發送信息
var popup = window.open('http://B.com', 'title');
popup.postMessage('Hello World!', 'http://B.com');
// 在窗口B中監聽
window.addEventListener('message', function (event) {
      console.log(event.origin);    // 消息發向的網址
      console.log(event.source);    // 發送消息的窗口
      console.log(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.');
};
複製代碼

方案六：CORS

fetch('/some/url/', {
      method: 'get',
  }).then(function (response) {
  }).catch(function (err) {
    // 出錯了，等價於 then 的第二個參數，但這樣更好用更直觀
  });
複製代碼