相關(guān)定義：

• XMLHttpRequest

• Fetch

• AJAX

先從AJAX入手，下面的定義很重要：

AJAX（Asynchronous JavaScript And XML ）是一種使用 XMLHttpRequest 技術(shù)構(gòu)建更復(fù)雜，動(dòng)態(tài)的網(wǎng)頁的編程實(shí)踐。
AJAX允許只更新一個(gè) HTML 頁面的部分 DOM，而無須重新加載整個(gè)頁面。AJAX還允許異步工作，這意味著當(dāng)網(wǎng)頁的一部分正試圖重新加載時(shí)，您的代碼可以繼續(xù)運(yùn)行。
AJAX正在逐漸被 JavaScript 框架中的函數(shù)和官方的 Fetch API 標(biāo)準(zhǔn)取代。

回答 1： AJAX vs Fetch

AJAX 和 Fetch都可以訪問和操縱 HTTP 管道（發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)），是解決動(dòng)態(tài)網(wǎng)頁的技術(shù)方案。

未來發(fā)展方向是Fetch取代AJAX

回答 2： XHR vs AJAX

XHR（XMLHttpRequest）對(duì)象用于與服務(wù)器交互，是AJAX技術(shù)方案的基礎(chǔ)，也可以說，使用XHR對(duì)象來發(fā)送一個(gè)Ajax請(qǐng)求。

看看如何使用 XHR 發(fā)送 AJAX請(qǐng)求。

function sendAjax() {
  //構(gòu)造表單數(shù)據(jù)
  var formData = new FormData();
  formData.append('username', 'johndoe');
  formData.append('id', 123456);
  //創(chuàng)建xhr對(duì)象 
  var xhr = new XMLHttpRequest();
  //設(shè)置xhr請(qǐng)求的超時(shí)時(shí)間
  xhr.timeout = 3000;
  //設(shè)置響應(yīng)返回的數(shù)據(jù)格式
  xhr.responseType = "text";
  //創(chuàng)建一個(gè) post 請(qǐng)求，采用異步
  xhr.open('POST', '/server', true);
  //注冊(cè)相關(guān)事件回調(diào)處理函數(shù)
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };
  
  // 監(jiān)聽xhr狀態(tài)
  xhr.onreadystatechange = function () {
    try {
       switch(xhr.readyState){
          case 1://OPENED
          break;
          case 2://HEADERS_RECEIVED
          break;
          case 3://LOADING
          break;
          case 4://DONE
          // Everything is good, the response was received.
            if (xhr.status === 200) {
               // Perfect!
            } else {
                // There was a problem with the request.
                // For example, the response may hava a 404 (Not Found)
                // or 500 (Internal Server Error) response code.
             }
           break;
          }
      } catch (e) {
        // 通信錯(cuò)誤的事件中（例如服務(wù)器宕機(jī)）
        alert('Caught Exception: ' + e.description)
     }
    
  //發(fā)送數(shù)據(jù)
  xhr.send(formData);
}

回答 3： XHR vs axios

Axios是一個(gè)基于promise的HTTP庫，可以用在瀏覽器和 node.js 中。它本質(zhì)也是對(duì)原生XMLHttpRequest的封裝，只不過是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。

有了上面的了解，再回頭對(duì)比下AJAX 和 Fetch，Fetch有什么優(yōu)缺點(diǎn)呢？

優(yōu)點(diǎn)

• fetch更加底層，提供的API豐富(request和response)
• fetch基于標(biāo)準(zhǔn)promise實(shí)現(xiàn)，支持async/await

缺點(diǎn)

• 只有網(wǎng)絡(luò)錯(cuò)誤（如斷網(wǎng)）才會(huì)調(diào)用reject，而對(duì)400，500這種錯(cuò)誤并不會(huì)reject
• 默認(rèn)不會(huì)帶cookie，需要添加配置項(xiàng)：fetch(url,{credentials:‘include’})
• 不支持abort，不支持超時(shí)控制或主動(dòng)取消 （XHR支持xhr.ontimeout超時(shí)自動(dòng)取消，也支持xhr.abort()主動(dòng)取消請(qǐng)求）
• 無法檢測(cè)請(qǐng)求的進(jìn)度（XHR可以）