從桌面到 Web 的體驗鴻溝
傳統 Web 應用：點擊 → 整頁重載 → 等待 → 回應。桌面應用：豐富介面、即時回饋、離線操作。Google Suggest（2004）與 Google Maps（2005）展示了打破此鴻溝的可能：輸入即時建議、地圖拖曳縮放無刷新。
AJAX 核心定義
Asynchronous JavaScript And XML（非同步 JavaScript 與 XML），實為技術組合：
- XHR (XMLHttpRequest)：瀏覽器與伺服器非同步資料交換核心
- DOM：動態更新頁面局部
- JavaScript：邏輯控制與事件處理
- CSS：視覺呈現
- 資料格式：早期 XML，現今多用 JSON
運作流程
- 使用者觸發事件（輸入、點擊、滾動）
- JavaScript 建立
XMLHttpRequest / fetch()
- 非同步發送請求至伺服器
- 伺服器處理並回傳資料（JSON/XML/HTML 片段）
- 回呼函數解析資料，操作 DOM 更新局部 UI
關鍵優勢
| 維度 | 傳統模式 | AJAX 模式 |
|---|
| 頁面重載 | 整頁 | 局部/無感 |
| 回應延遲 | 高（白畫面等待） | 低（背景處理） |
| 頻寬消耗 | 大（重複 HTML/CSS/JS） | 小（僅資料） |
| 使用者體驗 | 斷裂 | 流暢、桌面級 |
| 伺服器負載 | 高（完整渲染） | 低（API 僅回傳資料） |
經典應用場景
- 自動完成/建議：搜尋框、標籤輸入
- 無限滾動/分頁：社群動態、商品列表
- 即時驗證：帳號唯一性、郵件格式
- 拖曳排序：看板、清單重排
- 即時通知：長輪詢/WebSocket 前身
演進與現代替代
- jQuery
$.ajax()：統一跨瀏覽器 API（2006-2015 主流）
- Fetch API：原生 Promise 基礎，現代標準
- Axios：攔截器、自動轉換、取消請求
- GraphQL：按需查詢，減少過度/不足獲取
- WebSocket / SSE：真雙向/伺服器推送，超越請求-回應模型
- React/Vue/Angular：虛擬 DOM + 狀態管理，AJAX 封裝於資料層
安全與效能注意事項
- CSRF 防護：雙重提交 Cookie、同源檢查、
SameSite Cookie
- XSS 防範：輸出編碼、CSP 標頭、避免
innerHTML 直接注入
- 快取策略：
ETag、Cache-Control、條件請求
- 錯誤處理：統一攔截、使用者友善提示、重試機制
- 無障礙：ARIA 標籤、焦點管理、螢幕閱讀器相容
總結
AJAX 不只是技術組合，更是「無刷新互動」的架構哲學。它催生了 SPA（單頁應用）、PWA（漸進式 Web 應用）等現代形態。理解其本質——非同步資料交換 + DOM 增量更新——有助於在任何框架下做出正確架構決策。
