AJAX和Fetch的學習與比較

一、Ajax

AJAX簡介

Ajax：異步的JavaScript和XML，一種用於快速創建動態網頁的技術。通過在後臺與服務器進行少量數據交換，是網頁實現異步更新。
注意：Ajax不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的web應用程序的技術。

AJAX-創建XMLHttpRequest對象

XHR：可擴展超文本傳輸請求。用於在後臺與服務器交換數據，可以在不向服務器提交整個頁面的情況下，實現局部更新網頁，是Ajax的基礎。
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari、Opera）均內建XHR對象，其語法爲：

const xmlhttp = new XMLHttpRequest();

AJAX-向服務器發送請求

將請求發送到服務器時，使用XMLHttpRequest對象的open()和send()方法，實例如下：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

AJAX-服務器響應

1、監聽響應

XHR對象提供了三個重要屬性來監聽響應的狀態，繼而實現響應：

當readyState等於4且狀態爲200時，表示響應已就緒：

xmlhttp.onreadystatechange = () => {
 if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
  console.log(xmlhttp.responseText);
 }
};

注意：onreadystatechange 事件被觸發5次（0 - 4），對應着readyState的每個變化。

2、獲取響應

XMLHttpRequest對象提供responseText 、responseXML 屬性來獲取服務器的響應：

AJAX實例

const request = new XMLHttpRequest();
request.open('POST', `/ipos-chains/1/2`, true);
request.send(params);
request.onreadystatechange = () => {
  if (request.readyState === 4 && request.status === 200) {
    const data = JSON.parse(request.responseText);
    if (data.success) {
      message.success('成功');
    } else {
      message.error(data.errorInfo);
    }
  }
};

二、Fetch

認識Fetch

fetch是全局變量window的一個方法，它的主要特點有：

1. 第一個參數是URL；
2. 第二個是可選參數，可以控制不同配置的init對象；
3. 使用了JavaScript Promise來處理結果/回調；

Fetch實例

// 鏈式處理,將異步變爲類似單線程的寫法: 高級用法.
fetch('/some/url').then(function(response) {
    return . //... 執行成功, 第1步...
}).then(function(returnedValue) {
    // ... 執行成功, 第2步...
}).catch(function(err) {
    // 中途任何地方出錯...在此處理...
});

Fetch規範與AJAX的區別

1. Ajax的本質是使用XMLHttpRequest對象來請求數據，而fetch採用了Promise的異步處理機制，使用比ajax更加簡單，有可能會逐漸代替ajax；
2. 從fetch()返回的Promise將不會拒絕HTTP錯誤狀態, 即使響應是一個HTTP404或500。相反，它會正常解決 , 並且僅在網絡故障時或任何阻止請求完成時，它纔會拒絕。可以做簡單的封裝：

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

3. 默認情況下, fetch在服務端不會發送或接收任何cookies。如果想要在同域中自動發送cookie，加上credentials的same-origin 選項，same-origin值使得fetch處理Cookie與XMLHttpRequest類似。如下：

fetch(url, {
  credentials: ’same-origin'
})

三、參考

https://www.w3cschool.cn/ajax/ajax-tutorial.html.
https://www.cnblogs.com/September-9/p/7099975.html