今天我們來討論如何使用AJAX技術來獲取數據并將其添加到表格中。AJAX（Asynchronous Javascript and XML）是一種用于創建快速和動態網頁的技術，它通過在后臺與服務器進行數據交換，實現異步加載數據的功能。在我們的例子中，我們想要獲取一個電子商務網站的產品信息，并將這些信息添加到一個表格中。
首先，我們需要編寫一個javascript函數來處理AJAX請求。假設我們的網站有一個API來獲取產品信息，我們可以使用XMLHttpRequest對象來發送GET請求，并將響應數據以JSON格式返回。
function getProductData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
var productData = JSON.parse(this.responseText);
addDataToTable(productData);
}
};
xhr.open("GET", "https://api.example.com/products", true);
xhr.send();
}上述代碼創建了一個XMLHttpRequest對象并指定了一個回調函數，該函數會在請求的readyState值變為4（即已完成）且HTTP狀態碼為200時被調用。然后，我們解析服務器響應的文本數據（假設為JSON格式），并將解析后的數據傳遞給名為addDataToTable的函數。
下一步，我們需要編寫一個函數來將產品數據添加到表格中。假設我們有一個名為productTable的表格，該表格具有列名為“產品名稱”和“價格”的兩列。
function addDataToTable(productData) {
var table = document.getElementById("productTable");
var tbody = table.getElementsByTagName("tbody")[0];
for (var i = 0; i < productData.length; i++) {
var row = tbody.insertRow(i);
var nameCell = row.insertCell(0);
var priceCell = row.insertCell(1);
nameCell.innerHTML = productData[i].name;
priceCell.innerHTML = productData[i].price;
}
}上述代碼首先獲取具有id“productTable”的表格元素，并通過getElementsByTagName方法獲取其第一個tbody元素。然后，我們使用一個循環遍歷產品數據，并為每個產品創建一個新的表格行，在這行中，我們分別創建了兩個單元格，分別用于顯示產品的名稱和價格。最后，我們將產品數據填充到對應的單元格中。
現在，我們將以上這兩個函數添加到一個HTML頁面中，并在頁面上添加一個按鈕來觸發獲取數據操作。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AJAX獲取數據并添加到表格</title> <script src="script.js"></script> </head> <body> <h1>電子商務網站產品信息</h1> <table id="productTable"> <thead> <tr> <th>產品名稱</th> <th>價格</th> </tr> </thead> <tbody></tbody> </table> <button onclick="getProductData()">獲取數據</button> </body> </html>
在以上的HTML代碼中，我們引入了一個script.js腳本文件，該文件包含了我們之前編寫的兩個javascript函數。我們還在頁面上添加了一個按鈕，在點擊按鈕時，將調用getProductData函數來獲取產品數據并將其添加到表格中。
以上就是使用AJAX獲取數據并添加到表格的整個過程。通過異步加載數據，我們可以實現動態刷新表格內容的效果，讓用戶能夠即時獲取最新的產品信息。除了產品信息，我們還可以通過類似的方式獲取其他類型的數據，并將其添加到表格中。在實際應用中，我們可以使用AJAX來實現各種功能，例如通過用戶輸入實時搜索數據、動態加載更多數據等等。