AJAX(Asynchronous JavaScript and XML)是一種使用 Web 技術創建異步請求的方法。通過 AJAX,可以在不刷新整個頁面的情況下,更新頁面的部分內容。JSON(JavaScript Object Notation)是一種常用的數據格式,常用于傳輸和存儲數據。結合使用 AJAX 和 JSON,可以實現一個動態更新的表格顯示。
假設我們需要從服務器獲取一份員工信息列表,并將其以表格的形式展示在網頁上。使用 AJAX 可以通過服務器接口發送異步請求,獲取數據列表,并將其轉化為 JSON 格式進行傳輸。然后,將 JSON 數據轉化為 HTML 表格的形式,再將其添加到網頁中,從而實現表格的動態更新。
首先,在 HTML 頁面中創建一個空的表格,然后在 JavaScript 中使用 AJAX 發送異步請求獲取員工信息的 JSON 數據。
<table id="employeeTable"><thead><tr><th>姓名</th><th>職位</th><th>部門</th></tr></thead><tbody></tbody></table>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/employees', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var employees = JSON.parse(xhr.responseText);
var tbody = document.querySelector('#employeeTable tbody');
employees.forEach(function(employee) {
var row = document.createElement('tr');
row.innerHTML = '<td>' + employee.name + '</td><td>' + employee.position + '</td><td>' + employee.department + '</td>';
tbody.appendChild(row);
});
}
};
xhr.send();
在上面的代碼中,首先使用 AJAX 創建了一個 XMLHttpRequest 對象,并通過 open 方法指定了請求的方法、URL 和是否異步。然后,通過 onreadystatechange 事件監聽器來處理異步請求的狀態變化。當請求成功完成(readyState 等于 4,status 等于 200)時,將服務端返回的員工信息數據解析為 JSON,然后利用 forEach 方法遍歷每個員工對象,創建一個新的 HTML tr 元素,在每個單元格中插入員工信息,并將該行添加到表格的 tbody 元素中。最后,通過 send 方法發送 AJAX 請求。
這樣,當我們在網頁中加載該 JavaScript 文件時,就會自動發送異步請求獲取員工信息,并動態地將其展示在表格上。當服務端的員工信息更新時,只需要重新發送異步請求,然后更新表格的內容即可。
總而言之,AJAX 和 JSON 的結合能夠實現動態更新的表格顯示。通過 AJAX 發送異步請求,獲取數據,并將其轉化為 JSON 格式。然后,將 JSON 數據轉化為 HTML 表格的形式,再將其添加到網頁中,即可實現表格的動態更新。