今天的主題與伺服器溝通相關
這是現在網頁不可或缺的技能，因為它讓網頁能在不重新整理整個頁面的情況下，就能跟伺服器交換資料

1.什麼是 AJAX？

AJAX最早出現在Web 2.0的年代，核心概念是「使用JavaScript在背景與伺服器交換資料」，讓網頁更流暢
重點不在XML，而在 **非同步（Asynchronous）現在 AJAX 主要透過 *Fetch API或舊的 XMLHttpRequest 來實現

2.Fetch API基本語法

GET 請求

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("發生錯誤：", error);
  });

流程解釋

1. fetch(url) → 發送請求
2. .then(response => response.json()) → 解析回傳的 JSON
3. .then(data => { ... }) → 拿到資料後處理
4. .catch(...) → 錯誤處理

POST請求

javascript
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "Hello",
    body: "這是一篇測試文章",
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => {
    console.log("新增成功：", data);
  });

3.async/await

除了.then()，我們也可以用async/await，程式碼更乾淨

javascript
async function getPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("錯誤：", error);
  }
}

getPost();

練習

做一個簡單小工具，透過API取得隨機笑話並顯示在頁面上

<button id="jokeBtn">來點笑話</button>
<p id="joke"></p>

<script>
  const jokeBtn = document.getElementById("jokeBtn");
  const jokeEl = document.getElementById("joke");

  jokeBtn.addEventListener("click", async () => {
    try {
      const res = await fetch("https://official-joke-api.appspot.com/random_joke");
      const data = await res.json();
      jokeEl.textContent = `${data.setup} - ${data.punchline}`;
    } catch (e) {
      jokeEl.textContent = "取得笑話失敗 😢";
    }
  });
</script>

整理一下今天學到的東西：
AJAX讓js在背景與伺服器交換資料，不刷新頁面，Fetch API是現代AJAX工具，GET →取得資料，然後POST →送資料，async/await 讓非同步程式碼更直覺