什麼是 AJAX？

覺得寫得還不錯所以存一下。（自肥？）

簡述

我一直覺得這名字念起來很饒口：Asynchronous JavaScript and XML，AJAX（非同步的 JavaScript 與 XML）。

簡單來說就是利用 JavaScript 中的「非同步」行為來跟伺服器拿「資料」。另外以前的資料格式大多是 XML 所以最後一個字才會是 X（XML）。不過現在都是以 JSON 的資料為主了，因此改叫 AJAJ（Asynchronous JavaScript and JSON）說不定更符合現代背景。

我覺得 AJAX 的重點其實是指「非同步」的觀念，因為就算不用 AJAX 這個「技術」，你一樣能跟伺服器拿資料，只是使用者體驗會不好罷了。

同步與非同步

到底非同步是什麼？很簡單，直接舉例：

console.log('yo')
for (let i = 0; i <= 1000000000; i++) {}
console.log('so long~')

出來的順序是：yo -> （等迴圈大概一秒） -> so long~

這個「等」一行跑完才往下執行的行為就叫做為「同步」。

再來看一段：

console.log('yo')
setTimeout(() => console.log("I'm async"), 1000)
console.log('so fast')

出來的順序是：yo -> so fast -> I'm async

這邊在執行到第二行的時候就「不等了」，繼續往下執行的行為就叫做「非同步」。

AJAX 要的就是這個「非同步」的行為，因為我們不希望在跟伺服器拿資料時你的程式卡在那邊等 response。你想想看如果要等的話使用者體驗有多糟？

function getData(callback) {
  const xhr = new XMLHttpRequest()
  /* 
  注意這邊的最後一個參數 async 是 false，
  代表我要讓這段 request 是「同步」執行
*/
  xhr.open('GET', 'https://gorest.co.in/public/v1/users', false)
  xhr.onload = () => {
    if (xhr.status >= 200 && xhr.status < 400) {
      callback(null, xhr.responseText)
    } else {
      callback('error!')
    }
  }
  xhr.send()
}

// 點按鈕就顯示 click
const button = document.querySelector('button')
button.onclick = () => console.log('click')

// 跟伺服器拿資料，這邊因為設定成同步，所以會「卡在這裡等」
getData((err, data) => {
  if (err) {
    console.log(err)
  } else {
    console.log(data)
  }
})

// 手動太慢了，所以用程式來點 10 下按鈕
for (let i = 0; i < 10; i++) {
  button.click()
}

你拿去跑跑看就知道（記得要先寫好 HTML 的 <button>），不管重新整理幾次 click 都會在「拿到 response 之後」才執行。為什麼？因為我讓它變成同步，所以這代表在拿到 response 之前完全不能做任何事。

以上就是同步跟非同步的差別。