新手指南：什麼是 AJAX？

更新日期： 2025 年 3 月 9 日

當你在網頁上點擊按鈕，並看到某部分內容立即更新而不重新加載整個頁面時，這背後的技術就是 AJAX。

這篇文章將幫助新手了解什麼是 AJAX，以及它在現代 Web 開發中的重要性。

什麼是 AJAX？

AJAX 是「Asynchronous JavaScript And XML」的縮寫，但它的功能遠超名稱本身。

AJAX 是一種技術組合，用來在網頁不重新加載的情況下，從伺服器請求數據，並將數據顯示在網頁上。

簡單來說，AJAX 可以讓網頁部分內容動態更新，而不需要整個頁面重新加載。

這使得網頁的互動性和用戶體驗大大提升。

例如，當你在 Google 搜索時，每輸入一個字母即出現搜索建議，這就使用了 AJAX 技術。

AJAX 的組成部分

AJAX 其實不是一門單獨的技術，而是由多種技術組成的一個組合，其中包括：

• HTML 和 CSS：用於網頁結構和樣式。
• JavaScript：用來進行動態交互操作。
• XMLHttpRequest 物件：用於向伺服器發送異步請求並接收數據（現代應用中經常使用 Fetch API 來代替它）。
• 數據格式：通常是 JSON（JavaScript Object Notation），用於交換數據。

AJAX 的工作原理

AJAX 的基本工作原理，是通過 JavaScript 使用 XMLHttpRequest 或 Fetch API 向伺服器發送請求，然後伺服器返回數據給網頁進行更新，而不需要重新加載整個頁面。

以下是 AJAX 工作的流程：

1. 用戶觸發事件：例如，點擊按鈕或在輸入框中輸入內容。
2. 創建請求：JavaScript 通過 XMLHttpRequest 或 Fetch API 創建一個請求並發送給伺服器。
3. 伺服器處理請求：伺服器接收到請求後，處理數據並返回響應。
4. 更新頁面：JavaScript 獲取伺服器返回的數據，並根據數據動態更新頁面的一部分內容。

簡單的 AJAX 範例

下面是一個使用 XMLHttpRequest 的簡單範例，展示如何通過 AJAX 請求數據並更新網頁內容：

<button id="loadDataButton">加載數據</button>
<div id="content"></div>

<script>
  document.getElementById("loadDataButton").addEventListener("click", function() {
    // 創建 XMLHttpRequest 物件
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

    // 當請求完成後執行的操作
    xhr.onload = function() {
      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        document.getElementById("content").innerText = `標題: ${data.title}`;
      }
    };

    // 發送請求
    xhr.send();
  });
</script>

在這個例子中，當你點擊按鈕時，XMLHttpRequest 物件會向伺服器發送請求，並把返回的數據顯示在頁面中，而無需整頁重新加載。

為什麼 AJAX 很重要？

AJAX 的重要性在於它提升了網頁的互動性和用戶體驗。

在沒有 AJAX 之前，網頁的每一次請求（例如提交表單、獲取新數據等）都需要重新加載整個頁面，這不僅浪費時間，還會讓用戶感到不方便。

使用 AJAX 可以讓網頁更加流暢，用戶不需要等待整個頁面加載，就可以看到更新的內容。

例如：

• 表單驗證：當用戶輸入數據時，通過 AJAX 可以即時檢查數據的正確性，而無需提交整個表單。
• 動態加載內容：在社交媒體應用中，用戶滾動到頁面底部時，自動加載更多的內容，而無需刷新頁面。
• 即時搜索：當用戶在搜索框中輸入內容時，即時顯示與之相關的搜索建議。

Fetch API：現代的 AJAX 方法

雖然 XMLHttpRequest 是 AJAX 的核心，但在現代 JavaScript 中，我們經常使用 Fetch API 來替代它，因為 Fetch API 更加簡潔和易於使用。

以下是一個使用 Fetch API 的例子：

<button id="loadDataButton">加載數據</button>
<div id="content"></div>

<script>
  document.getElementById("loadDataButton").addEventListener("click", function() {
    fetch("https://jsonplaceholder.typicode.com/posts/1")
      .then(response => response.json())
      .then(data => {
        document.getElementById("content").innerText = `標題: ${data.title}`;
      })
      .catch(error => console.error("發生錯誤：", error));
  });
</script>

使用 Fetch API，我們可以更方便地發送請求並處理回應。它使用 Promise 來處理異步操作，使代碼更加清晰和易讀。

小結

AJAX 是一種技術組合，通過讓網頁部分內容動態更新而不重新加載整個頁面，極大地提升了用戶的體驗。

無論是使用傳統的 XMLHttpRequest 還是現代的 Fetch API，AJAX 都是 Web 開發者必須掌握的重要工具之一。

了解 AJAX 的運作方式，可以讓你更好地設計互動性強且高效的網頁應用，讓你的網頁對用戶來說更加順暢和友好。

希望這篇文章能幫助你對 AJAX 有一個清晰的認識，並在開發中靈活運用它！