這一系列的文章為修習 Udemy 的 The Complete JavaScript Course 2022: From Zero to Expert! 這堂課時所做的筆記。

想實行非同步請求（asynchrnous request)，一定得先認識它： AJAX ！

AJAX 全名為 Asynchronous JavaScript And XML，透過 AJAX 這項技術，我們可以動態向遠端伺服器請求資料（request data）。讓我們在不需要重整網頁的情況下，就能夠即時地與伺服端交換資料。

✏️ AJAX 裡面的 X 代表XML。XML 是一種以前常用來交換資料的格式，現在多用 JSON！不過因為 AJAX 這個詞是以前當 XML 還盛行時所創的，所以才會包含 XML（即便現在已經很少用了）。

AJAX 的運作方式

當事件發生時（如載入網頁或是點擊按鈕）...

OK！你或許注意到了以上有個叫做 XMLHttpRequest 的酷東東～
它就是那位幫助我們實行 非同步請求 的大功臣...嗎？
以前是，但現在不是。

現在大家都在用 Fetch API，因為它比 XMLHttpRequest 更簡單方便。

接著簡單介紹 XMLHttpRequest 和 Fetch API 吧！

XMLHttpRequest

//1. 創建一個 XMLHttpRequest 物件
const request = new XMLHttpRequest();
//2. 打開 XMLHttpRequest 物件
request.open("GET", "url");
//3. 傳送請求給伺服器
request.send();
//4. 設定當伺服器回覆時要進行的動作
request.addEventListener("load", function(){
  console.log(this.responseText);
Fetch API
fetch('url', {options})
  .then(response => {
      //伺服器若有回應的話執行這裡，處理response
  .catch(error =>{
      //如果沒有 response（沒有網路或是伺服器連線失敗）執行這行，處理錯誤
fetch() 會傳送 request 給伺服器，只要伺服器有回應就會回傳一個 Promise 物件（內包含 response物件），接下來需使用 then() & catch() 來處理。
fetch 內的參數
url: 欲訪問的網址，必填
[options]: 若沒填，預設的 HTTP 請求方法為 GET
fetch(url, {
    method: 'POST', 
    mode: 'cors', 
    cache: 'no-cache', 
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    redirect: 'follow', 
    referrerPolicy: 'no-referrer', 
    body: JSON.stringify(data) // body內的資料類型一定要和header裡面標注的 "Content-Type" 相符
之後再來寫一篇文章好好研究裡面的參數😅

不過可以先有個觀念是，我們傳送給伺服器的請求以及伺服器的回覆，都會有 header（資料內容以外的相關資訊） & body（資料內容）兩大區塊。
response 物件
我們用 fetch() 送出請求後，用 then() 接收伺服器回覆（一個 response 物件）。你會發現回傳的這個 response 物件並不是我們預期中資料的模樣，因為資料藏在「回應內容主體（response body）」裡，所以接著我們得想辦法來把資料取出來：
json()：將資料轉成 JSON
text()：將資料轉成純文字
blob()：將資料轉成 blob（binary large object）物件
記得！被處理過的資料就無法再用其他方法取出資料囉
一些實用的 response 屬性
status: 回應狀態碼，判斷請求是否成功
ok: 如果 status 介於 200-299，則為 true
還在努力學習中，如有錯誤請不吝指正🙇🏻‍♀️
練習 fetch 的好幫手：

https://designer.mocky.io/design
其他資料：

https://www.w3schools.com/xml/ajax_intro.asp

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX