AJAX, 即 Asynchronous JavaScript And XML (異步 JavaScript 和 XML)，是一種用于創建交互式網頁應用的技術。使用 AJAX 可以使網頁在不刷新的情況下向服務器發送請求并獲得數據，然后將數據在頁面上動態更新。對于顯示表格數據類型的應用，AJAX 提供了一種簡單、快速和有效的方法。
假設我們有一個包含學生成績的數據庫，我們希望在網頁上動態地顯示表格數據。使用傳統的方式，當用戶請求查看學生成績時，我們需要刷新整個網頁才能更新數據。使用 AJAX 技術，我們可以只更新表格中的數據，而無需刷新整個頁面。
在下面的示例中，我們將創建一個學生成績表格，在用戶點擊按鈕時通過 AJAX 請求從服務器獲取數據，并將數據以表格形式顯示在網頁上。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table id="gradesTable">
<tr>
<th>學號</th>
<th>姓名</th>
<th>成績</th>
</tr>
</table>
<button onclick="getGrades()">查看成績</button>
<script>
function getGrades() {
$.ajax({
url: "getGrades.php",
method: "GET",
success: function(data) {
var grades = JSON.parse(data);
var tableBody = "";
for (var i = 0; i < grades.length; i++) {
tableBody += "<tr><td>" + grades[i].studentId + "</td><td>" + grades[i].name + "</td><td>" + grades[i].score + "</td></tr>";
}
$("#gradesTable").append(tableBody);
}
});
}
</script>
</body>
</html>在上述代碼中，我們使用了 jQuery 庫來簡化 AJAX 請求的操作。當用戶點擊按鈕時，我們調用了一個 JavaScript 函數 `getGrades()`。在這個函數中，我們使用 `$.ajax()` 方法向服務器發送了一個 GET 請求，并指定了服務器端的 URL（getGrades.php）。
在服務器端，我們可以通過查詢數據庫獲取學生成績數據，并將數據以 JSON 格式返回。在客戶端，我們在 AJAX 請求的成功回調函數中處理服務器返回的數據。首先，我們通過 `JSON.parse()` 方法將 JSON 字符串解析為 JavaScript 對象數組。
然后，我們使用一個循環遍歷所有學生成績，并將每個學生成績的相關信息添加到一個新的表格行中。最后，我們使用 `$("#gradesTable").append(tableBody)` 將新的表格行添加到現有的表格中。
通過這種方式，用戶可以在不刷新整個頁面的情況下即可動態地查看最新的學生成績。這種方式使得網頁顯示更加流暢且用戶體驗更好。
總之，AJAX 技術為動態顯示表格數據類型的應用提供了便捷的解決方案。通過將 AJAX 請求與服務器端的數據處理結合起來，我們可以通過網頁實時更新數據而無需刷新整個頁面。這種技術對于展示實時數據、提高用戶體驗以及減少網絡流量等方面具有重要意義。