使用Ajax在網頁上添加數據表格是一種常見的Web開發需求。通過Ajax技術，我們可以在不刷新整個頁面的情況下，動態地向數據表格中添加新的數據行或者更新已有的數據行。這種無刷新更新的方式，大大提升了用戶體驗，讓網頁變得更加動態和實時。接下來，我們將介紹如何使用Ajax來實現數據表格的動態添加，以及相關的代碼示例。
首先，我們需要先在HTML頁面中創建一個空的數據表格。例如，我們可以創建一個id為"myTable"的
元素，并添加表頭和一些樣式，如下所示：
html
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
在上面的代碼中，我們創建了一個帶有表頭和空的元素的表格。接下來，我們將使用Ajax技術來動態地向這個表格中添加數據行。
在JavaScript中，我們可以使用XMLHttpRequest對象來發送Ajax請求。我們需要監聽某個事件（比如按鈕的點擊事件），然后在事件處理函數中發送Ajax請求。假設我們有一個按鈕的id為"addButton"，用戶點擊該按鈕時，我們將使用Ajax請求來獲取新的數據行并添加到表格中。我們可以使用如下的代碼來實現這個功能：
javascript
document.getElementById("addButton").addEventListener("click", function() {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 指定請求的URL
var url = "url_to_data_source";
// 指定請求的方法和URL
xhr.open("GET", url, true);
// 監聽請求的狀態變化事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務器返回的數據
var data = JSON.parse(xhr.responseText);
// 在表格中添加新的數據行
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
// 創建新的數據行
var newRow = document.createElement("tr");
// 添加單元格
var idCell = document.createElement("td");
idCell.innerHTML = data.id;
newRow.appendChild(idCell);
var nameCell = document.createElement("td");
nameCell.innerHTML = data.name;
newRow.appendChild(nameCell);
var ageCell = document.createElement("td");
ageCell.innerHTML = data.age;
newRow.appendChild(ageCell);
var cityCell = document.createElement("td");
cityCell.innerHTML = data.city;
newRow.appendChild(cityCell);
// 將新的數據行添加到表格的<tbody>中
tbody.appendChild(newRow);
}
};
// 發送Ajax請求
xhr.send();
});
以上代碼使用了XMLHttpRequest對象來發送Ajax請求，并指定了請求的URL和請求的方法（這里使用了GET方法）。在請求的狀態變化事件中，我們監聽了readyState變為4（即請求已完成）并且status為200（即請求成功）的情況。此時，我們從服務器返回的響應中獲取數據，并使用DOM操作來動態地創建一個新的數據行，然后將其添加到表格的中。
值得注意的是，上述示例代碼中的"url_to_data_source"需要替換為真實的數據源URL。這個URL可以是服務器端的URL，用于返回新的數據行。你可以根據自己的實際需求，來決定如何組織和提供這個URL。
通過以上的示例代碼，我們可以看到，使用Ajax技術來實現數據表格的動態添加非常簡單。我們可以根據實際需求，靈活使用Ajax來獲取新的數據行，并將其添加到表格中。這樣，用戶在操作網頁時，可以實時地看到新的數據被動態地添加到表格中，提升了用戶的交互體驗。
