AJAX（Asynchronous JavaScript and XML）是一種用于在不重新加載整個頁面的情況下異步更新網頁內容的技術。它通過在后臺與服務器交換數據來實現，可以在不影響用戶界面的情況下更新頁面的部分內容，提供更加流暢和快速的用戶體驗。其中，添加表格數據是使用 AJAX 技術的常見應用之一。在本文中，將介紹如何使用 AJAX 添加表格數據，并提供一些示例來說明它的用法。

AJAX 添加表格數據的基本原理是通過 JavaScript 向服務器發送請求，并使用返回的數據來動態更新表格內容。在這個過程中，需要定義一個用于接收服務器響應的回調函數。

function updateTable(data) {
// 更新表格內容邏輯
}

例如，假設有一個表格用于展示學生的成績信息。當用戶點擊一個按鈕時，通過 AJAX 請求獲取新的成績數據并更新表格內容。這個過程可以通過以下示例代碼來實現：

function updateTable(data) {
// 清空表格內容
document.getElementById("table-body").innerHTML = "";
// 遍歷數據并添加到表格中
for (var i = 0; i< data.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
var scoreCell = document.createElement("td");
nameCell.textContent = data[i].name;
scoreCell.textContent = data[i].score;
row.appendChild(nameCell);
row.appendChild(scoreCell);
document.getElementById("table-body").appendChild(row);
}
}
function fetchData() {
// 發送 AJAX 請求
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/scores", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
updateTable(data);
}
};
xhr.send();
}

在上述代碼中，fetchData()函數用于發送 AJAX 請求，并在接收到服務器響應時調用updateTable(data)函數更新表格內容。其中，xhr.open()方法指定了請求的類型（GET）、URL 和是否異步處理。當xhr.readyState的值為 4 且xhr.status的值為 200 時，表示請求已成功完成。在這個條件下，通過JSON.parse()方法解析服務器返回的 JSON 數據，并將其作為參數傳遞給updateTable(data)函數。

上述示例代碼實現了基本的 AJAX 添加表格數據功能，但還可以根據具體需求進行進一步的擴展和優化。例如，可以添加用戶輸入數據的表單，并將輸入的數據通過 AJAX 請求發送給服務器進行處理。另外，可以對請求的結果進行錯誤處理和數據驗證，以增加應用的健壯性。

總之，使用 AJAX 添加表格數據可以提供更加快速和流暢的用戶體驗，減少頁面重新加載的次數。通過發送 AJAX 請求獲取新的數據，并使用 JavaScript 動態更新表格內容，可以快速響應用戶操作，并更好地展示數據。以上示例代碼提供了基礎的實現思路，可以根據具體需求進行進一步開發和優化。