在使用Ajax之前，我們首先需要在頁面中準(zhǔn)備好一個表格，其中包含我們希望插入數(shù)據(jù)的位置。比如，我們可以創(chuàng)建一個id為"orderTable"的表格，其中包含表頭和一個空的tbody元素，如下所示：
<table id="orderTable"> <thead> <tr> <th>訂單編號</th> <th>商品名稱</th> <th>價格</th> </tr> </thead> <tbody></tbody> </table>
接下來，我們可以使用JavaScript代碼來實(shí)現(xiàn)通過Ajax獲取數(shù)據(jù)，并將其插入到表格中。首先，我們需要創(chuàng)建一個XMLHttpRequest對象：
var xhr = new XMLHttpRequest();
然后，我們需要定義一個回調(diào)函數(shù)，當(dāng)從服務(wù)器獲取到數(shù)據(jù)后，將被自動調(diào)用。在這個回調(diào)函數(shù)中，我們可以解析服務(wù)器返回的數(shù)據(jù)，并將其插入到表格中。比如，我們可以使用innerHTML屬性將每一行數(shù)據(jù)插入到tbody元素中：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var tbody = document.getElementById("orderTable").getElementsByTagName("tbody")[0];
for (var i = 0; i < data.length; i++) {
var row = "<tr>" +
"<td>" + data[i].orderNumber + "</td>" +
"<td>" + data[i].productName + "</td>" +
"<td>" + data[i].price + "</td>" +
"</tr>";
tbody.innerHTML += row; // 將每一行數(shù)據(jù)插入到tbody中
}
}
};最后，我們需要發(fā)送Ajax請求到服務(wù)器，并設(shè)置相應(yīng)的URL和請求方式。比如，我們可以使用GET請求獲取訂單數(shù)據(jù)：
xhr.open("GET", "/api/orders", true);
xhr.send();這樣，當(dāng)頁面加載完成時，Ajax請求將被發(fā)送到服務(wù)器，服務(wù)器返回的數(shù)據(jù)將被解析并插入到表格中。用戶可以在不刷新整個頁面的情況下，動態(tài)地查看訂單數(shù)據(jù)。
除了在頁面加載完成時自動發(fā)送Ajax請求之外，我們還可以在用戶執(zhí)行特定操作時觸發(fā)Ajax請求。比如，當(dāng)用戶點(diǎn)擊一個按鈕時，我們可以使用addEventListener方法綁定一個點(diǎn)擊事件，并在事件處理函數(shù)中發(fā)送Ajax請求：
document.getElementById("refreshButton").addEventListener("click", function() {
xhr.open("GET", "/api/orders", true);
xhr.send();
});在這個例子中，當(dāng)用戶點(diǎn)擊id為"refreshButton"的按鈕時，Ajax請求將被發(fā)送到服務(wù)器，然后將返回的訂單數(shù)據(jù)插入到表格中。
通過以上的例子，我們可以看到，使用Ajax將數(shù)據(jù)動態(tài)插入表格是一種非常靈活和高效的做法。無論是在頁面加載完成時自動發(fā)送請求，還是在用戶觸發(fā)特定事件時發(fā)送請求，都能夠?qū)崿F(xiàn)數(shù)據(jù)的動態(tài)更新。這種方法不僅提高了用戶體驗，還減輕了服務(wù)器的負(fù)擔(dān)，是現(xiàn)代網(wǎng)頁開發(fā)中常見的技術(shù)之一。