什麼是 AJAX
Asynchronous JavaScript And XML —— 非標準化術語，指瀏覽器端非同步與伺服器交換資料、局部更新頁面的技術組合。核心價值：無整頁重載的豐富使用者體驗 (RIA)。
核心技術棧
| 技術 | 角色 | 關鍵點 |
|---|
| JavaScript (ECMAScript) | 膠水語言 | 事件處理、DOM 操作、非同步回調、JSON 處理 |
| XMLHttpRequest / fetch API | 傳輸通道 | 非同步 HTTP 請求、支援文本/JSON/Blob/ArrayBuffer |
| DOM (Document Object Model) | 頁面操作介面 | 動態增刪改節點、事件綁定、CSSOM 操作 |
| CSS / CSS3 | 表現層 | 樣式隔離、動畫、彈性佈局、響應式設計 |
| JSON | 事實標準資料格式 | 輕量、原生 JS 支援、取代 XML 成主流 |
| XSLT / XPath | XML 轉換 (歷史) | 早期 XML 陣營常用，現較少見 |
運作流程
- 使用者觸發事件 (點擊、輸入、滾動…)。
- JS 建立
XMLHttpRequest 或呼叫 fetch()。
- 設定請求方法、URL、Header、Body。
- 註冊
onreadystatechange / Promise 回調。
send() 發送，瀏覽器不阻塞 UI。- 伺服器處理，回應 JSON/HTML/XML。
- 回調函數解析回應，操作 DOM 更新局部頁面。
架構模式演進
傳統 MVC → 前後端分離
- Server-side MVC：JSP/Thymeleaf 渲染完整 HTML，AJAX 僅作增強 (表單驗證、下拉聯動)。
- API + SPA：後端僅提供 REST/GraphQL API，前端 (React/Vue/Angular/Svelte) 負責路由、狀態、渲染，AJAX 成核心通訊手段。
易用性 (UX) 關鍵模式
- 樂觀更新：先更新 UI 再發請求，失敗再回滾並提示。
- 骨架屏 / Loading 狀態：減少感知延遲。
- 黃色淡入：資料變更處高亮再淡出，引導視覺焦點。
- 離線優先 / Service Worker：PWA 架構下 AJAX 請求可攔截快取。
工具鏈與生態
| 類別 | 代表工具/庫 |
|---|
| 請求庫 | Axios、Fetch API (原生)、Ky、SuperAgent |
| 狀態管理 | Redux、Zustand、Pinia、React Query (TanStack Query)、SWR |
| UI 組件庫 | Ant Design、Material UI、Element Plus、Tailwind UI |
| 建構工具 | Vite、Webpack、esbuild、Rollup |
| 測試 | Vitest、Jest、Cypress、Playwright |
跨瀏覽器兼容性
- 現代瀏覽器 (Chrome/Edge/Firefox/Safari 13+) 完整支援
fetch、Promise、async/await。
- 舊版 IE 需 Polyfill (
whatwg-fetch, core-js) 或繼續用 XMLHttpRequest + jQuery.ajax()。
- CSS 落差仍是主戰場：使用 PostCSS + Autoprefixer 自動補齊前綴。
伺服器端協作
- RESTful API 設計規範 (資源導向、HTTP 語義、狀態碼)。
- GraphQL：客戶端按需查詢，減少過度/不足獲取。
- WebSocket / Server-Sent Events (SSE)：雙向即時推送，補足 AJAX 單向輪詢短板。
- 後端語言無限制：Java (Spring Boot)、Node.js、Go、Python、C#、Rust 皆可。
安全性考量
- CSRF：同源策略下 AJAX 同樣需 Token/雙重 Cookie 驗證。
- XSS：動態插入 HTML 必須轉義，優先用
textContent 或框架自動逃逸。
- CORS：跨域請求需伺服器配置
Access-Control-Allow-* 標頭。
- 內容安全策略 (CSP)：限制腳本來源，降低注入風險。
未來趨勢
- WebAssembly：高效能計算遷移至 WASM，AJAX 僅負責資料傳輸。
- HTTP/3 (QUIC)：降低連線建立延遲，提升非同步請求吞吐。
- Edge Computing / Serverless：API 部署至邊緣節點，AJAX 請求就近響應。
- Signals / Fine-grained Reactivity：SolidJS、Preact Signals、Vue 3.3+ 重新定義資料綁定與更新粒度。
總結
AJAX 從「技術湊合」演變為現代 Web 應用的神經系統。掌握其核心原理 (非同步、事件迴路、DOM 更新)、工程化實踐 (TypeScript、模組化、測試、CI/CD) 與架構演進 (SPA、SSR、SSG、Islands)，才能在 Web 2.0/3.0 時代構建極致體驗的產品。
