AJAX 是什麼？非同步網頁更新的原理、fetch 寫法、應用與 SEO 注意事項

在搜尋框打字就跳出建議、往下捲就自動載入更多商品、送出表單不會整頁重新整理：這些「不換頁就更新內容」的體驗，背後都是 AJAX。它是 2005 年被命名的一組技術做法，今天的寫法已經從 XMLHttpRequest 換成 fetch、資料格式從 XML 換成 JSON，但概念沒有變。這篇文章說明 AJAX 是什麼、怎麼運作、新舊兩種寫法、常見應用，以及網站主最該注意的一點：用 AJAX 載入的內容，搜尋引擎不一定看得到。JavaScript 本身的語法見〈JavaScript 語法介紹〉。本文屬於《網頁程式語言》系列，總覽見〈網頁程式設計是什麼〉。

一、AJAX 是什麼？

AJAX（Asynchronous JavaScript and XML，非同步 JavaScript 與 XML）是一組讓網頁在不重新載入整頁的情況下，於背景向伺服器送出請求、取回資料並局部更新畫面的技術做法。它不是一種新語言或新程式庫，而是把瀏覽器既有的 JavaScript、HTTP 請求物件與資料格式組合起來的一種模式。

這個名字由 Jesse James Garrett 在 2005 年提出，當時 Google 地圖與 Gmail 展示了不換頁就能拖曳地圖、載入信件的體驗，讓網頁第一次「感覺像桌面程式」。名字裡的 XML 是當年常用的資料格式，今天幾乎全部改用 JSON，但 AJAX 這個稱呼保留了下來。

二、AJAX 怎麼運作？四個步驟

• 事件觸發使用者點按鈕、輸入文字、捲動到頁尾，或計時器到點，JavaScript 決定要向伺服器要資料。
• 背景送出請求JavaScript 用 fetch 或 XMLHttpRequest 向伺服器的某個網址送出 HTTP 請求，頁面不會跳轉、使用者可以繼續操作，這就是「非同步」。
• 伺服器回傳資料後端程式處理後回傳資料，通常是 JSON，而不是整頁 HTML；後端怎麼處理請求見〈應用程式伺服器是什麼〉。
• 局部更新畫面JavaScript 解析資料，只改動頁面上需要變的那一塊 DOM，其餘內容保持原狀。

與傳統表單送出的差別在第二與第四步：傳統做法是瀏覽器整頁重新載入、伺服器回傳完整 HTML；AJAX 只傳必要的資料、只更新必要的區塊。

三、傳統寫法：XMLHttpRequest

XMLHttpRequest（XHR）是最早讓 JavaScript 能發 HTTP 請求的瀏覽器物件，也是 AJAX 這個詞誕生時的核心。今天仍能在大量舊網站與 jQuery 的 $.ajax() 底層看到它。

var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/products?category=chair", true);   // true = 非同步
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        document.getElementById("list").innerHTML =
            data.map(function (p) { return "<li>" + p.name + "</li>"; }).join("");
    }
};
xhr.send();

看得出它的問題：狀態判斷要自己寫、錯誤處理散在各處、多個請求串在一起時會層層嵌套（俗稱回呼地獄）。這些正是 fetch 要解決的。

四、現代寫法：fetch 與 async／await

fetch 是所有現代瀏覽器內建的請求 API，回傳 Promise，搭配 async／await 後非同步程式讀起來像同步程式。同一件事改寫如下：

async function loadProducts(category) {
    try {
        const res = await fetch(`/api/products?category=${encodeURIComponent(category)}`);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        document.getElementById("list").innerHTML =
            data.map(p => `<li>${escapeHtml(p.name)}</li>`).join("");
    } catch (err) {
        console.error("載入失敗", err);
        document.getElementById("list").textContent = "資料暫時無法載入，請稍後再試。";
    }
}

document.getElementById("chair-btn").addEventListener("click", () => loadProducts("chair"));

async function submitInquiry(form) {
    const payload = Object.fromEntries(new FormData(form));
    const res = await fetch("/api/inquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
    });
    const result = await res.json();
    document.getElementById("msg").textContent = result.message;
}

• 錯誤處理集中在 try／catch：網路失敗與 HTTP 錯誤都能在同一處處理。
• 把伺服器資料放進頁面前要轉義：範例的 escapeHtml 代表這一步；直接把外部資料塞進 innerHTML 是跨站腳本的來源。
• Axios 等函式庫：在 fetch 之上再包一層，提供攔截器、自動 JSON 轉換與逾時，大型專案常用，但小型網站用原生 fetch 就足夠。

五、JSON 取代 XML：資料格式的轉變

AJAX 的 X 原本是 XML，今天幾乎全部改用 JSON，原因是 JSON 更輕、更接近 JavaScript 物件、解析只要一行。

XML：
<product>
    <id>101</id>
    <name>人體工學椅</name>
    <price>4980</price>
</product>

JSON：
{ "id": 101, "name": "人體工學椅", "price": 4980 }

後端各語言都能輕鬆輸出 JSON：PHP 用 json_encode()、Python 用 json.dumps()、Java 與 .NET 的框架則預設就以 JSON 回應 API 請求。

六、常見應用情境

• 搜尋自動完成：每輸入幾個字就向伺服器要建議清單。
• 表單即時驗證與送出：檢查帳號是否已被使用、送出詢價後只顯示成功訊息而不換頁。
• 無限捲動與「載入更多」：商品列表、社群動態捲到底自動補資料。
• 即時更新：股價、庫存、通知數字定時刷新；需要伺服器主動推送時改用 WebSocket。
• 購物車與篩選：加入購物車、切換篩選條件只更新局部區塊。

七、優點與限制

• 優點：體驗流暢、只傳必要資料所以省頻寬與伺服器負擔、畫面狀態不會因整頁重載而遺失。
• 限制一，搜尋引擎可見性：靠 AJAX 才載入的內容，爬蟲不一定會執行 JavaScript 去拿，下一節詳述。
• 限制二，網址與上一頁：內容變了但網址沒變，使用者無法分享或收藏特定狀態，按上一頁行為也不直覺；解法是搭配 History API 更新網址。
• 限制三，跨網域限制：瀏覽器預設不允許向其他網域發 AJAX 請求，需要對方伺服器以 CORS 標頭明確允許。
• 限制四，錯誤要自己處理：網路斷線、逾時、伺服器錯誤都不會像整頁載入那樣由瀏覽器顯示錯誤頁，程式沒處理使用者就只看到畫面沒反應。

八、AJAX 與 SEO：搜尋引擎看得到嗎？

Google 能執行 JavaScript 並索引 AJAX 載入的內容，但成本高、有延遲；其他搜尋引擎對 JavaScript 的支援程度不一，而 OpenAI、Anthropic、Perplexity 等主要 AI 爬蟲目前都不執行 JavaScript；因此重要內容不該只靠 AJAX 出現。我們在網站健檢時的原則：

• 主要內容放在初始 HTML：標題、正文、商品資訊、價格要在伺服器回傳的 HTML 裡就存在，AJAX 只用來做互動與補充。用瀏覽器「檢視原始碼」看不到的內容，就要當成搜尋引擎可能看不到。
• 每個狀態要有自己的網址：分頁、篩選結果用 History API 更新網址，並確保直接開那個網址也能拿到內容；不要用網址井號後的片段當狀態。
• 分頁與「載入更多」要有可爬的連結：無限捲動的頁面同時提供傳統分頁連結，爬蟲才走得到後面的商品。
• 用 Search Console 的網址檢查看渲染結果：比對「已檢索的網頁」與您在瀏覽器看到的畫面，缺的那一塊就是 AJAX 沒被索引到的內容。
• AI 搜尋更嚴格：依 Vercel 對 AI 爬蟲流量的分析，除了借用 Googlebot 的 Gemini 與 AppleBot，主要 AI 爬蟲都只讀原始 HTML，靠 AJAX 載入的內容它們讀不到，也就無從引用；哪些爬蟲會來、怎麼看日誌，見〈AI 爬蟲是什麼〉。

本站（newscan.com.tw）的文章與詢價頁面都以伺服器端 PHP 直接輸出完整 HTML，JavaScript 只負責目錄收合、FAQ 展開這類互動，正是基於這個原則。技術 SEO 的其他檢查項目見〈技術 SEO 完整指南〉。

九、AJAX 與現代框架、前後端分離的關係

React、Vue、Angular 這類前端框架把 AJAX 推到極致：整個網站是一個頁面（SPA），所有內容都靠 API 取得，伺服器只提供資料。這帶來最流暢的體驗，也把第八節的 SEO 問題放大，因此框架生態發展出兩種補救：伺服器端渲染（SSR）在伺服器先產出完整 HTML 再交給瀏覽器接手；靜態生成（SSG）在建置時就把頁面產好。Next.js、Nuxt 就是為此而生。

對多數企業官網與內容網站而言，結論很務實：不需要整站 SPA，用傳統伺服器端輸出加上局部 AJAX 互動，體驗夠好、SEO 也單純。哪種架構適合哪種專案，見〈網頁程式設計是什麼〉。

十、結論

AJAX 是「不換頁就向伺服器取資料並局部更新」的做法，今天以 fetch 與 JSON 實現，是所有現代網頁互動的基礎。它讓體驗變好，代價是搜尋引擎與 AI 不一定看得到動態載入的內容，所以重要內容留在初始 HTML、互動交給 AJAX，是兼顧兩者的原則。想動手寫，先把〈JavaScript 語法介紹〉裡的 DOM 操作與事件處理學會，再回來看本文的 fetch 範例。

十一、常見問答 FAQ