AJAX（Asynchronous JavaScript and XML）是一種在不刷新整個頁面的情況下，通過后臺與服務器進行數據交互的技術。通過AJAX，我們可以實現動態添加表格數據的功能，使得用戶能夠實時更新頁面數據而無需刷新頁面。本文將介紹如何使用AJAX動態添加表格數據，并通過舉例進行說明，幫助讀者更好地理解和應用AJAX技術。

想象一下，你正在開發一個在線商城的管理系統，需要實現商品列表的動態添加。在以前的網頁開發中，添加新商品后，需要刷新整個頁面才能看到新的商品出現在列表中。而通過使用AJAX，你可以實現在不刷新頁面的情況下，將新商品添加到列表中，使得用戶體驗更加優秀。

首先，我們需要在網頁中創建一個表格，用于展示商品列表的數據。在這個例子中，我們將使用HTML和CSS來創建一個簡單的表格。以下是一個基本的HTML結構：

<table id="productTable"><thead><tr><th>商品名稱</th><th>商品價格</th><th>商品數量</th></tr></thead><tbody><tr><td>商品1</td><td>100</td><td>10</td></tr><tr><td>商品2</td><td>200</td><td>5</td></tr></tbody></table>

接下來，我們需要使用AJAX技術將新的商品數據添加到表格中。可以通過JavaScript代碼中的XMLHttpRequest對象來實現與服務器的數據交互。以下是一個使用AJAX動態添加商品數據的例子：

function addProduct() {
var name = document.getElementById('name').value;
var price = document.getElementById('price').value;
var quantity = document.getElementById('quantity').value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var product = JSON.parse(this.responseText);
var table = document.getElementById('productTable');
var row = table.insertRow(-1);
var nameCell = row.insertCell(0);
var priceCell = row.insertCell(1);
var quantityCell = row.insertCell(2);
nameCell.innerHTML = product.name;
priceCell.innerHTML = product.price;
quantityCell.innerHTML = product.quantity;
}
};
xhttp.open("POST", "/addProduct", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name + "&price=" + price + "&quantity=" + quantity);
}

在上述代碼中，我們首先獲取用戶在網頁表單中輸入的商品名稱、價格和數量。然后，我們創建一個XMLHttpRequest對象，通過該對象與服務器進行數據交互。在請求的回調函數中，我們將從服務器返回的商品數據解析為JSON對象，并將該對象的屬性值添加到表格的新行中。最后，通過調用open()和send()方法，我們將用戶輸入的商品數據發送到服務器進行處理。

通過以上的代碼示例，我們可以看到如何使用AJAX技術動態添加表格數據。在實際的網頁開發中，我們可以根據實際需求對代碼進行修改和優化，以滿足具體的業務要求。

總結而言，AJAX技術能夠實現在不刷新整個頁面的情況下，通過后臺與服務器進行數據交互，在網頁中動態添加表格數據。通過以上的示例，我們可以理解和應用AJAX技術，從而提升網頁的用戶體驗和交互性。