AJAX 技術入門完整指南

什麼是 AJAX？

AJAX = Asynchronous JavaScript and XML (非同步 JavaScript 與 XML)。它是一種在無需重新載入整個網頁的情況下，更新部分網頁內容的技術。透過在背景與伺服器交換少量資料，實現網頁的非同步更新。

傳統網頁若需更新內容，必須重載整個頁面；AJAX 則只更新必要的區塊，提升使用者體驗與效能。

知名應用案例

• Google Maps — 地圖拖曳、縮放無需重載
• Gmail — 郵件列表、閱讀、搜尋皆非同步
• YouTube — 影片評論、推薦動態載入
• Facebook — 動態牆、通知、即時聊天

AJAX 運作原理

1. 使用者觸發事件 (點擊、輸入、頁面載入等)。
2. JavaScript 建立 XMLHttpRequest (或 fetch) 物件。
3. 發送非同步 HTTP 請求至伺服器 (GET/POST 等)。
4. 伺服器處理請求，回傳資料 (XML、JSON、HTML、純文字)。
5. JavaScript 回呼函數接收回應，解析資料。
6. 操作 DOM 更新頁面局部內容。

核心技術組合

• XMLHttpRequest / fetch API — 與伺服器非同步交換資料
• JavaScript / DOM — 處理邏輯、顯示與操作頁面內容
• CSS — 樣式化資料呈現
• JSON / XML / HTML — 資料傳輸格式 (現代多採 JSON)

AJAX 應用程式與瀏覽器、平台無關！

Google Suggest 經典案例

2005 年 Google 推出搜尋建議 (Google Suggest) 讓 AJAX 廣為人知。使用者在搜尋框輸入時，JavaScript 將字元送至伺服器，伺服器回傳建議清單，即時顯示於下拉選單中。

現代 AJAX 開發建議

• 優先使用 fetch() API — 原生 Promise、支援串流、語法更簡潔，IE 需 Polyfill。
• 資料格式採用 JSON — 輕量、JavaScript 原生解析、跨語言通用。
• 錯誤處理 — 捕獲網路錯誤、HTTP 錯誤狀態碼、解析失敗，給予使用者友善提示。
• 取消舊請求 — 使用 AbortController 避免競態條件 (如即時搜尋快速輸入)。
• 安全性 — CSRF Token、CORS 設定、輸入驗證、輸出編碼防 XSS。
• 效能優化 — 快取、壓縮 (gzip/br)、CDN、減少請求大小、去抖動/節流。

簡易 fetch 範例

<script>
async function loadData() {
    try {
        const resp = await fetch('api/data.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({id: 123})
        });
        if (!resp.ok) throw new Error('HTTP ' + resp.status);
        const data = await resp.json();
        document.getElementById('result').textContent = JSON.stringify(data);
    } catch (e) {
        console.error(e);
        document.getElementById('result').textContent = '載入失敗';
    }
}
</script>

學習路徑建議

1. 掌握 JavaScript 基礎 (ES6+、Promise、async/await、DOM 操作)。
2. 熟悉 fetch() 與 XMLHttpRequest 差異。
3. 學習 JSON 序列化/解析。
4. 實作簡易 CRUD (如待辦清單、留言板)。
5. 進階：WebSocket、Server-Sent Events (SSE)、GraphQL、Service Worker 離線快取。