AJAX（Asynchronous JavaScript And XML）是一種在Web應用程序中實現異步數據交互的技術。通過使用AJAX，我們可以在不刷新整個頁面的情況下更新部分頁面內容，提升用戶體驗。在本文中，我們將探討如何使用AJAX生成表格數據，并提供詳細的代碼示例和說明。

假設我們正在開發一個學生成績管理系統，需要展示學生的成績表格。傳統的方式是在每次用戶選擇不同的查詢條件時，刷新整個頁面以獲取新的數據。這種方式既消耗用戶的等待時間，也占用服務器的資源。現在我們可以使用AJAX來實現，在用戶選擇查詢條件后，僅更新表格部分的數據，而不需要刷新整個頁面。

我們首先需要在頁面中創建一個用于展示表格數據的HTML元素，比如一個DIV容器：

<div id="tableContainer">
<table id="dataTable">
<thead>
<tr>
<th>學生姓名</th>
<th>數學成績</th>
<th>英語成績</th>
<th>物理成績</th>
</tr>
</thead>
<tbody>
<!-- 表格數據將動態生成在這里 -->
</tbody>
</table>
</div>

接下來，我們使用JavaScript編寫一個函數，該函數將通過AJAX獲取表格數據，并將其動態生成為HTML元素。

function generateTableData() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
var tbody = document.getElementById("dataTable").getElementsByTagName("tbody")[0];
tbody.innerHTML = ""; // 清空原有數據
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
nameCell.innerHTML = data[i].name;
var mathCell = document.createElement("td");
mathCell.innerHTML = data[i].math;
var englishCell = document.createElement("td");
englishCell.innerHTML = data[i].english;
var physicsCell = document.createElement("td");
physicsCell.innerHTML = data[i].physics;
row.appendChild(nameCell);
row.appendChild(mathCell);
row.appendChild(englishCell);
row.appendChild(physicsCell);
tbody.appendChild(row);
}
}
};
xhttp.open("GET", "get_table_data.php", true);
xhttp.send();
}

在上述代碼中，我們首先創建了一個XMLHttpRequest對象，并為其onreadystatechange事件指定了一個回調函數。當AJAX請求的狀態發生變化時，該函數將被觸發。在函數中，我們使用responseText屬性獲取從服務器返回的數據，并將其解析為一個JavaScript對象。然后，我們獲取表格元素的tbody，并清空原有數據。接下來，我們使用循環遍歷數據并動態創建表格行和單元格。最后，我們將新生成的行添加到tbody中。

為了使該函數在頁面加載時自動執行一次，我們可以將其綁定到window.onload事件：

window.onload = function() {
generateTableData();
}

現在，當用戶訪問我們的成績管理系統頁面時，表格數據將會通過AJAX自動加載，并以表格的形式動態展示出來。例如，當用戶選擇查詢條件為“數學成績大于90分”的時候，我們只需要向服務器發送該查詢條件，然后更新表格中的數據，而不需要刷新整個頁面。

總結起來，使用AJAX生成表格數據可以顯著提升頁面的性能和用戶體驗。無論是在成績管理系統還是其他類型的Web應用程序中，都可以使用AJAX來優化數據交互的方式。