AJAX（Asynchronous JavaScript and XML）是一種用于在無需重新加載整個網頁的情況下，與服務器進行異步交互的技術。它通過在后臺與服務器進行數據交換，使網頁能夠實現動態更新，提高用戶體驗。在Web開發中，常常需要在頁面中動態地添加表格數據，而AJAX正是實現這一功能的理想選擇。本文將介紹如何使用AJAX動態地添加表格數據，并通過舉例說明其應用。

在AJAX中，使用XMLHttpRequest對象可以與服務器建立異步的HTTP(S)通信。要動態添加表格數據，首先需要向服務器發送請求，獲取數據，然后將數據動態地添加到表格中。下面的代碼演示了如何使用AJAX發送GET請求，從服務器獲取數據，并通過DOM操作將數據動態地添加到表格中：

function addTableData() {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽狀態改變事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 數據請求成功，將數據添加到表格中
var response = JSON.parse(xhr.responseText);
var table = document.getElementById("myTable");
var newRow = table.insertRow();
var newCell1 = newRow.insertCell();
var newCell2 = newRow.insertCell();
newCell1.innerHTML = response.name;
newCell2.innerHTML = response.age;
}
};
// 發送GET請求
xhr.open("GET", "/data", true);
xhr.send();
}

以上代碼首先創建了一個XMLHttpRequest對象，并為其設置了一個狀態改變事件的監聽器。在事件監聽器中，通過檢查請求的狀態和狀態碼，判斷是否成功獲取到數據。如果請求成功，將通過JSON.parse()方法解析服務器返回的數據，并使用DOM操作將數據添加到表格中的新一行中。在這個例子中，服務器返回的數據是一個JSON對象，包含了姓名和年齡字段。

為了實現完整的示例，我們還需要一個服務器端的代碼來處理AJAX請求并返回數據。下面是一個簡單的Node.js例子：

// 通過Express框架創建一個簡單的HTTP服務器
const express = require("express");
const app = express();
const port = 3000;
// 處理GET請求，返回 JSON 數據
app.get("/data", (req, res) =>{
// 模擬從數據庫中獲取數據，并返回
var data = {
name: "John",
age: 25
};
res.json(data);
});
// 啟動服務器
app.listen(port, () =>{
console.log(`Server listening on port ${port}`);
});

在這個例子中，我們使用了Express框架來創建一個簡單的HTTP服務器。當收到GET請求時，服務器會返回一個JSON對象作為響應。在實際的應用中，服務器端的代碼會根據具體需求從數據庫或其他數據源中獲取數據。

通過以上的示例代碼，我們可以看到如何使用AJAX動態地添加表格數據。在實際應用中，我們可以根據需要自定義發送請求的方式和數據的處理方法。AJAX技術提供了一種靈活且高效的方式來實現動態更新，使網頁更加交互和用戶友好。