JSON與AJAX

什麼是AJAX？

AJAX(Asynchronous JavaScript and XML)允許網頁應用程序在不重新加載頁面的情況下與服務器進行數據交換。雖然AJAX的名稱中有XML，但在現代開發中，JSON已經成為主要的數據格式。

AJAX有幾個關鍵特性：
1.異步：用戶可以在數據加載時繼續與頁面進行交互。
2.動態更新頁面：只更新頁面的一部分，而不是整個頁面。
3.無刷新通信：通過異步請求與服務器通信，而無需刷新頁面。

AJAX的工作原理

AJAX主要依賴瀏覽器提供的XMLHttpRequest對象來與服務器通信。

AJAX的基本工作流程：
1.事件觸發：用戶操作（如按鈕點擊）會觸發AJAX請求。
2.發送請求：通過XMLHttpRequest或fetch() 來發送HTTP請求到服務器。
3.服務器處理請求：服務器處理請求並返回數據（通常是JSON或XML格式）。
4.接收數據並更新頁面：JavaScript解析返回的數據，並根據需要動態更新網頁的一部分。

AJAX獲取數據

AJAX允許網頁在不重新加載整個頁面的情況下，從服務器異步請求數據。傳統上，這個操作是透過XMLHttpRequest對象來完成的，但現在大多數開發者會選擇使用fetch API，因為它相較於前者來說更加現代化、簡潔且支持Promise。

傳統上的使用XMLHttpRequest發送AJAX請求

const xhr = new XMLHttpRequest();

// 初始化請求，指定請求類型和 URL
xhr.open("GET", "https://api.example.com/data", true);

// 設置回調函數，當請求完成時執行
xhr.onload = function () {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);  // 解析 JSON 數據
    console.log(data);
  } else {
    console.error("Request failed");
  }
};

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

//xhr.open()：初始化請求，GET是請求方法，true表示請求是異步的。
//xhr.onload()：當請求完成後的回調函數，用於處理響應。
//xhr.send()：發送請求。

使用fetch API

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();  // 解析為 JSON
  })
  .then(data => {
    console.log(data);  // 使用數據
  })
  .catch(error => {
    console.error("There was a problem with the fetch operation:", error);
  });

AJAX 的常見 HTTP 方法

AJAX最常用於與服務器進行通信，他使用以下HTTP方法來發送請求：

1.GET：用於從服務器獲取數據，數據被附加在 URL 後面。
2.POST：用於向服務器發送數據，數據通常被包含在請求體中。
3.PUT：用於更新服務器上的數據。
4.DELETE：用於從服務器刪除數據。

const data = {
  name: "John",
  age: 30
};

fetch("https://api.example.com/user", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"  // 告訴服務器我們發送的是 JSON 數據
  },
  body: JSON.stringify(data)  // 將對象轉換為 JSON 字符串發送
})
  .then(response => response.json())  // 解析 JSON 響應
  .then(data => {
    console.log("Success:", data);
  })
  .catch(error => {
    console.error("Error:", error);
  });