Chapter 10 / AJAX

AJAX 是什麼？它如何讓網頁不用整頁重載也能更新資料？

AJAX 是 Asynchronous JavaScript and XML 的縮寫。雖然名稱裡有 XML，但今天更常見的回應格式其實是 JSON。它的核心觀念不是一個全新的通訊協定，而是：讓瀏覽器中的 JavaScript 主動發送 HTTP 請求，等伺服器回應後，再只更新需要改變的那一部分 DOM。

What：AJAX 到底是什麼？

字詞	原本意思	今天應該怎麼理解
Asynchronous	非同步	送出請求後，頁面不必卡住或整頁刷新；等回應回來時，再執行後續更新。
JavaScript	瀏覽器端腳本	由頁面中的 JavaScript 主動發送請求、處理回應、更新 DOM。
XML	早期常見資料格式	今天多半改用 JSON，但 AJAX 這個名稱仍沿用下來。

一句話理解： AJAX = HTTP + JavaScript + DOM 更新 的組合式互動模型，而不是另一套獨立於 HTTP 之外的新網路協定。

Why：AJAX 有什麼功能？為什麼重要？

局部更新畫面

只更新通知數、留言區、查詢結果、購物車數量，不必整頁重新整理。

前端可直接呼叫 API

瀏覽器能請求 JSON 資料，再由 JavaScript 決定怎麼呈現到畫面上。

互動更流暢

即時搜尋、表單驗證、儀表板刷新、聊天室訊息載入等，都仰賴這種非同步請求模式。

How：AJAX 的運作方式

sequenceDiagram participant U as 使用者 participant B as Browser UI participant J as JavaScript participant S as Server / API U->>B: 點按按鈕 / 輸入查詢 B->>J: 觸發 click / input / submit 事件 J->>S: fetch / $.ajax() 發送 HTTP request S-->>J: 回傳 JSON / XML / HTML 片段 J->>B: 更新 DOM 的局部區塊

步驟 1：事件觸發

使用者點按按鈕、送出表單或輸入文字後，瀏覽器觸發 JavaScript 事件處理函式。

步驟 2：發送請求

JavaScript 用 fetch()、Axios、XMLHttpRequest 或 $.ajax() 把 HTTP request 送到 API。

步驟 3：收到資料

伺服器回傳 JSON、文字、HTML 片段或其他格式，JavaScript 再把資料解析出來。

步驟 4：局部更新 DOM

JavaScript 只改需要更新的節點，因此畫面變化較快，也保留使用者目前的操作上下文。

Principle：AJAX 的底層原理其實靠哪些東西？

底層要素	它負責什麼	你在畫面上看到的效果
HTTP	提供 request / response 規則、方法、狀態碼與標頭	前端能送出 `GET`、`POST` 等請求，伺服器能回傳 JSON / HTML
JavaScript	負責發送請求、等待回應、解析資料	可寫 `fetch()`、Promise、`async/await` 等非同步程式
DOM	作為頁面可被操作的結構	可只更新某個列表、數字、表格、訊息區塊，而非整頁刷新
API / Server	接收請求、處理邏輯、回傳資料	頁面能取得最新資料並同步畫面狀態

重要： 所謂「非同步」不代表請求會憑空完成，而是代表 JavaScript 不必用「整頁停住等結果」的方式工作；回應回來後，再執行 callback、Promise 或 async/await 後面的程式。

Example 1：用 `fetch()` 讀取狀態並更新畫面

最常見的 AJAX 讀取流程

這個例子同時示範了：事件 → HTTP 請求 → JSON 回應 → DOM 更新。

<button id="load-status">讀取狀態</button>
<p id="status">尚未讀取</p>

<script>
async function loadStatus() {
  const response = await fetch("/api/status");
  const data = await response.json();
  document.querySelector("#status").textContent = data.message;
}

document
  .querySelector("#load-status")
  .addEventListener("click", loadStatus);
</script>

服務狀態：ok，資料已載入。

fetch() 送出的是 HTTP request，不是特殊的 AJAX 專用協定。
await response.json() 代表把回傳的 JSON body 解析成 JavaScript 物件。
最後再用 DOM API 把資料放回畫面，這就是「局部更新」的核心。

Example 2：送出表單後，只更新留言列表

AJAX 最典型的使用情境之一

如果不用 AJAX，傳統作法常常是整頁重新整理；用 AJAX 則可以只補上新資料。

const form = document.querySelector("#message-form");
const list = document.querySelector("#message-list");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const message = document.querySelector("#message-input").value;
  const response = await fetch("/api/messages", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ message })
  });

  const data = await response.json();
  list.insertAdjacentHTML("beforeend", `<li>${data.message}</li>`);
});

畫面結果

原本留言 1
原本留言 2
新留言已加入列表

event.preventDefault() 讓表單先不要用傳統方式整頁送出。
JavaScript 自己接手送出 POST 請求，拿到伺服器回應後再更新列表。
這種模式常見於留言板、購物車、後台表單與即時驗證。

AJAX、jQuery、fetch、Axios 之間的關係

工具 / 名詞	它是什麼	和 AJAX 的關係
AJAX	互動模式 / 概念	描述「用 JavaScript 非同步發送 HTTP 請求並更新畫面」這件事
`XMLHttpRequest`	早期瀏覽器 API	最早常用來實作 AJAX 的原生方法
`$.ajax()`	jQuery 提供的方法	把早期 AJAX 寫法包裝得更短、更一致
`fetch()`	現代原生 API	今天最常見的 AJAX 實作方式之一
Axios	HTTP library	用更一致的介面處理 AJAX / API 請求，常見於正式專案

教學上可這樣理解： AJAX 是「要做的事」，fetch() / Axios / $.ajax() 則是「完成這件事的工具」。

AJAX vs fetch vs WebSocket：比較圖

flowchart LR A[AJAX 互動概念] --> B[fetch / Axios / $.ajax() 常見實作工具] B --> C[HTTP request / response 一次一個往返] C --> D[收到回應後更新 DOM] E[WebSocket 持續連線協定] --> F[建立 persistent connection] F --> G[Client / Server 可雙向傳資料] G --> H[聊天室 / 即時通知 / 協作編輯]

名詞	本質	通訊方式	典型用途
AJAX	互動模式 / 概念	通常建立在 HTTP request / response 上	局部更新畫面、表單送出、查詢 API
`fetch()`	瀏覽器原生 API	用 HTTP 發送單次請求，再等待單次回應	今天最常見的 AJAX 寫法之一
WebSocket	持續連線協定	建立一次連線後，雙方都能主動推送訊息	聊天室、即時通知、多人同步、遊戲狀態

關鍵判斷： fetch() 不是 AJAX 的對手，而是 AJAX 的常用做法；WebSocket 則不是「比較快的 AJAX」，而是適用於持續雙向通訊的另一種模型。

常見誤解與補充

誤解 1：AJAX = XML

不是。名字保留了歷史，但今天多數 API 都回 JSON。

誤解 2：AJAX = jQuery

不是。jQuery 只是曾經很流行的 AJAX 實作工具之一。

誤解 3：AJAX = WebSocket

也不是。AJAX 仍是 request / response；WebSocket 則是持續連線、雙向通訊。

Summary：本章結論

AJAX 不是新協定，而是把 HTTP request / response 交給 JavaScript 主動運用的一種互動模式。
它的核心價值是：不用整頁重新整理，也能向伺服器取資料並局部更新 DOM。
fetch()、Axios、$.ajax() 都可以用來實作 AJAX；差別在 API 風格與時代背景。
要真正看懂 AJAX，必須同時理解 HTTP、JavaScript 非同步流程、API 回應格式與 DOM 更新之間的分工。

閱讀建議： 如果你要把這章和前面內容串起來，可回看第 03 章 HTTP、第 05 章 DOM 與互動、第 09 章 jQuery 的 $.ajax() 範例，以及第 11 章實務技術堆疊。

AJAX 是什麼？它如何讓網頁不用整頁重載也能更新資料？

What：AJAX 到底是什麼？

Why：AJAX 有什麼功能？為什麼重要？

局部更新畫面

前端可直接呼叫 API

互動更流暢

How：AJAX 的運作方式

步驟 1：事件觸發

步驟 2：發送請求

步驟 3：收到資料

步驟 4：局部更新 DOM

Principle：AJAX 的底層原理其實靠哪些東西？

Example 1：用 fetch() 讀取狀態並更新畫面

最常見的 AJAX 讀取流程

Example 2：送出表單後，只更新留言列表

AJAX 最典型的使用情境之一

AJAX、jQuery、fetch、Axios 之間的關係

AJAX vs fetch vs WebSocket：比較圖

常見誤解與補充

誤解 1：AJAX = XML

誤解 2：AJAX = jQuery

誤解 3：AJAX = WebSocket

Summary：本章結論

Example 1：用 `fetch()` 讀取狀態並更新畫面