AJAX 實戰指南：從 XMLHttpRequest 到現代 Fetch API

AJAX 核心概念

AJAX (Asynchronous JavaScript and XML) 非技術新發明，而是既有技術的組合：

• 異步請求：XMLHttpRequest (XHR) 或 fetch()，不阻塞頁面。
• 資料格式：XML、JSON、HTML、純文字皆可，現代多用 JSON。
• DOM 操作：局部更新頁面，無需整頁重載。

XMLHttpRequest 完整流程 (傳統寫法)

1. 建立請求物件 (跨瀏覽器相容)

let xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // 標準瀏覽器
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("MSXML2.XMLHTTP"); // IE5/6
}

2. 註冊狀態變更處理器

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { // 完成
        if (xhr.status === 200) {
            handleSuccess(xhr.responseText, xhr.responseXML);
        } else if (xhr.status === 404) {
            showError("資源不存在");
        } else {
            showError("伺服器錯誤: " + xhr.status);
        }
    } else {
        // 可選：顯示載入中狀態 (readyState 1-3)
        showLoading(xhr.readyState);
    }
};

3. 開啟連線並發送

xhr.open("GET", "data.xml", true); // true = 異步
xhr.setRequestHeader("Accept", "application/xml"); // 可選
xhr.send(null); // GET 無請求主體

4. 解析 XML 回應

function handleSuccess(text, xmlDoc) {
    if (!xmlDoc) return;
    const root = xmlDoc.documentElement;
    const header = root.getElementsByTagName('header')[0].firstChild.data;
    document.getElementById('copy').innerHTML = header;
}

關鍵屬性與方法速查

現代替代方案：Fetch API

fetch('data.json')
    .then(response => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
    })
    .then(data => {
        document.getElementById('copy').textContent = data.header;
    })
    .catch(err => console.error('請求失敗:', err));

優點：Promise 鏈式調用、語法簡潔、支援 Stream、Service Worker 整合。
缺點：IE 不支援 (需 Polyfill)、無法直接取消請求 (需 AbortController)、預設不攜帶 Cookie (需 credentials: 'include')。

工程評估：何時使用 AJAX？

適用場景

• 表單即時驗證 (輸入即查詢)。
• 無限捲動 / 分頁載入。
• 拖拉排序即時儲存。
• 局部資料刷新 (股價、通知數)。
• 單頁應用 (SPA) 路由切換。

經典陷阱：Back 按鈕失效

AJAX 變更頁面狀態不會產生歷史記錄。解決方案：

• History API：pushState()/replaceState() + popstate 事件。
• Hash Routing：location.hash 變更 + hashchange 事件 (舊瀏覽器相容)。
• 框架內建：React Router、Vue Router、Angular Router 均已封裝。

其他考量

• SEO：純客戶端渲染不利搜尋引擎，需 SSR (Next.js/Nuxt.js) 或預渲染。
• 安全性：CSRF Token、CORS 設定、XSS 防護 (輸出編碼)。
• 效能：請求合併、快取策略 (ETag/Last-Modified)、壓縮 (gzip/br)。

結語

AJAX 核心價值在於提升使用者體驗的流暢度。技術選型應以「能否解決具體 UX 問題」為準，而非追逐新潮。現代開發建議直接使用 Fetch + Promise/async-await，搭配成熟前端框架處理路由與狀態管理。