AJAX (Asynchronous JavaScript and XML) 不是新語言，而是**瀏覽器端多項技術的組合**，實現「無刷新局部更新」。本文剖析核心流程、資料格式演進、典型應用場景與現代最佳實踐。
用戶操作 → JS 事件 → 建立 XMLHttpRequest
↓
設定請求 (open) → 發送請求 (send) → 伺服器處理
↓ ↓
註冊回調 (onreadystatechange) ← 返回資料 (JSON/XML/HTML/純文字)
↓
readyState=4 & status=200 → 解析資料 → DOM 更新 (局部刷新)
| 技術 | 角色 | 現代替代/補充 |
|---|---|---|
| XMLHttpRequest / fetch | 非同步網路請求核心 | fetch (Promise)、axios (封裝庫) |
| JavaScript (ES6+) | 邏輯控制、DOM 操作 | TypeScript、Vue/React/Angular |
| DOM API | 頁面局部更新 | Virtual Diff (框架內部) |
| JSON | 主流資料交換格式 | Protobuf、GraphQL (大型應用) |
| CSS/HTML | 呈現層 | SCSS、Tailwind、CSS-in-JS |
innerHTML 插入，簡單但耦合度高<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>AJAX 範例</title></head><body>
<input type="text" id="username" placeholder="輸入用戶名">
<span id="msg"></span>
<script>
document.getElementById('username').addEventListener('blur', function() {
const val = this.value.trim();
if (!val) return;
// 1. 建立請求 (fetch 返回 Promise)
fetch('check_user.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-CSRF-Token': document.querySelector('meta[name="csrf"]').content
},
body: 'username=' + encodeURIComponent(val)
})
.then(res => res.json())
.then(data => {
const el = document.getElementById('msg');
el.textContent = data.exists ? '用戶名已存在' : '用戶名可用';
el.style.color = data.exists ? 'red' : 'green';
})
.catch(err => console.error('請求失敗', err));
});
</script>
</body></html>
<?php
header('Content-Type: application/json; charset=utf-8');
// 簡單示範，實際查資料庫
$exists = in_array($_POST['username'], ['admin', 'test', 'root']);
echo json_encode(['exists' => $exists]);
?>
HttpOnly CookieETag/Cache-Control，避免重複請求AJAX 重新定義了 Web 交互體驗，從「頁面跳轉」進化到「組件級更新」。理解其核心 — **非同步請求 + DOM 更新** — 並配合現代工具鏈 (fetch/axios、框架、TypeScript)，能構建流暢、健壯、可維護的前端應用。記住：好體驗 = 即時反饋 + 容錯降級 + 感知速度優化。
