AJAX（Asynchronous JavaScript and XML），非同步的 JavaScript 與 XML（僅管 X 代表 XML，但現今使用 JSON 來作為資料格式已逐漸成為主流）

AJAX 能夠非同步的處理網頁上與伺服器溝通、資料交換、更新資料等需求，而無須對頁面進行重整。

非同步

我們拿按鈕的監聽事件來說好了

function callback() {
    alert('click!!!')
}

document.querySelector('.primary-btn').addEventListener('click', callback)

在按鈕被點下之前，程式碼在執行的時候並不會執行 callback 這個 function，會先去執行其他的程式碼，直到監聽的按鈕被點擊，才會執行 function callback() 並顯示 click!!!

非同步程式碼執行的順序上，不會因為 function callback() 還沒執行過，就卡在那邊沒辦法繼續往下；相反地，同步的情況下就必須要等前面的函示執行完之後，才能繼續往下。

現在我們可以延續前幾天的主題，拿 Request & Response 來做舉例。
同步請求（Synchronous Request）的情況下，在得到 Response 之前，程式碼會卡在那邊無法繼續往下進行。
非同步請求（Asynchronous Request）則是在送出請求後，就不管它了，先去執行其他的程式碼，直到請求得到了 Response 才會回來執行後續的動作。

XMLHttpRequest

以往在向伺服器發送請求的時候會用這個 XMLHttpRequest（又稱為 XHR）來建立連線。
同步的情況下：

// 建立 XHR
var request = new XMLHttpRequest();

// 建立 request（第三個參數是 false 的時候表示此請求為“同步”）
request.open('GET', '/bar/foo.txt', false);

// 發送，null 是因為 GET 不需要在 body 帶入資訊便可發送
request.send(null);

// 若回傳結果 200 則往下執行
if (request.status === 200) {
  console.log(request.responseText);
}

而非同步的情況下會是：

// 建立 XHR
var xhr = new XMLHttpRequest();

// 建立 request，第三個參數是 true 時，表示此請求為非同步
xhr.open("GET", "/bar/foo.txt", true);

// 請求順利的話，執行下列：
xhr.onload = function (e) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};

// 請求發生錯誤的時候執行：
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};

// 發送請求
xhr.send(null);

第二個非同步的做法可以在請求後，當發生了錯誤或是請求成功的時候去執行對應的 function，而一開始的同步則是要一行一行的往下執行，要等收到了伺服器給予的回應後，去判斷是否成功才能往下繼續進行，不像非同步的做法，可以等回傳後再去執行。

而實作 AJAX 的方式除了上述的 XHR 之外，還有 jQuery 的 Ajax、ES6 的 Promise、HTML5 的 fetch api、套件的 axios 等方式來從伺服器取回請求的資料。

參考

AJAX與Fetch API
什麼是 Ajax？ 搞懂非同步請求 (Async request) 概念
AJAX_Getting-Started
JS Asynchronous
Using_XMLHttpRequest