在網頁剛開始發展的時代，每當使用者執行一個操作（ex:送出表單、查詢資料），整個頁面都必須重新載入，這樣的流程不僅效率低，反覆地等待讀取時間也會讓使用者體驗感到非常差
為了解決這個問題，開發者開始尋找不重整頁面也能更新資料的方式，這正是AJAX誕生的原因

1.什麼是 AJAX？

AJAX不是一種新的語言，而是一種技術概念的組合，它讓瀏覽器可以在背景與伺服器交換資料，就不需要整頁重新載入了
主要包含以下幾項技術：

• JavaScript：執行非同步請求的主要語言
• XMLHttpRequest（XHR）：核心物件，用於發送HTTP請求
• JSON / XML / Text：伺服器回傳的資料格式

雖然名稱中有XML，但現今實務中AJAX幾乎都使用JSON作為資料格式

2.基本AJAX範例

const xhr = new XMLHttpRequest();

//設定要請求的資源(這裡使用一個公開API)
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

//當請求完成後執行
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log("取得的資料：", data);
    document.getElementById("result").textContent = data.title;
  } else {
    console.error("發生錯誤，狀態碼：", xhr.status);
  }
};

//發送請求
xhr.send();

對應的HTML非常簡單：

<p id="result">載入中...</p>
<script src="script.js"></script>

這樣這段程式會在頁面載入後自動向伺服器請求資料，並將取得的文章標題顯示在<p>標籤中

3.XHR運作機制

XMLHttpRequest物件是AJAX的核心，它的基本流程分成以下幾步：

1. 建立一個新的XMLHttpRequest物件
2. 使用open()方法設定請求類型（GET/POST）與目標URL
3. 監聽請求狀態改變的事件，例如onload或onreadystatechange
4. 使用send()方法發送請求

整個過程都是非同步的，也就是說程式不會因等待伺服器回應而中斷

4.現代替代方案：Fetch API與jQuery

在現代開發中，XMLHttpRequest雖然仍可使用，但語法略顯冗長
因此，後來出現了兩個更方便的選擇：

1.jQuery的AJAX寫法

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1",
  method: "GET",
  success: function(data) {
    console.log("成功取得：", data);
  },
  error: function() {
    console.error("請求失敗！");
  }
});

2.Fetch API 寫法

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("成功取得：", data))
  .catch(error => console.error("錯誤：", error));

可以看出，Fetch API 語法更直覺，也更容易與async/await搭配使用，因此成為現代主流

小練習：以AJAX顯示API內容

目標：從公開API取得一則貼文，並在頁面上顯示內容

步驟：

1. 建立一個 HTML 頁面
2. 新增一個按鈕與一個空的<div>區塊
3. 使用原生 AJAX 或 Fetch 實作「按下按鈕後載入資料」功能

<button id="load">載入資料</button>
<div id="post"></div>

document.getElementById("load").addEventListener("click", function() {
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
      document.getElementById("post").innerHTML = `
        <h3>${data.title}</h3>
        <p>${data.body}</p>
      `;
    })
    .catch(() => {
      document.getElementById("post").textContent = "載入失敗！";
    });
});

現在Fetch API雖然逐漸取代了AJAX，但理解AJAX的基本概念依然是理解前端非同步運作的基礎，也是學習串接API、處理資料流的重要根基喔