AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個網(wǎng)頁的情況下，通過在后臺與服務器進行少量數(shù)據(jù)交換的技術。它可以幫助我們實現(xiàn)局部表格數(shù)據(jù)的實時刷新，提升用戶體驗。本文將介紹如何使用AJAX來實現(xiàn)局部表格的數(shù)據(jù)刷新，并通過舉例進行說明。

首先，我們需要明確一個需求：在一個網(wǎng)頁上有一個表格，用于顯示用戶的注冊信息。當用戶提交注冊信息后，我們希望表格能夠自動刷新，顯示最新的注冊信息。這時，我們可以使用AJAX來實現(xiàn)這一功能。

在HTML文件中，我們首先要創(chuàng)建一個表格的結構，用于展示注冊信息。然后，在JavaScript中使用AJAX來獲取最新的注冊信息，并將其顯示在表格中。

<table id="userTable">
<tr>
<th>用戶名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tbody id="userTableBody"> 
<!-- 這里用于展示注冊信息 -->
</tbody>
</table>
<script>
function refreshTable() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getusers', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var users = JSON.parse(xhr.responseText);
var tableBody = document.getElementById('userTableBody');
tableBody.innerHTML = ''; // 清空現(xiàn)有內容
users.forEach(function(user) {
var row = document.createElement('tr');
row.innerHTML = '<td>' + user.name + '</td><td>' + user.gender + '</td><td>' + user.age + '</td>';
tableBody.appendChild(row);
});
}
};
xhr.send();
}
// 頁面加載完成后，調用refreshTable來獲取并顯示初始數(shù)據(jù)
window.onload = refreshTable;
</script>

在上面的代碼中，我們使用了XMLHttpRequest對象來發(fā)送異步請求。首先，我們通過`xhr.open`方法指定請求的類型、URL和是否異步。然后，我們定義了一個`onreadystatechange`事件處理函數(shù)，該函數(shù)會在`readyState`改變時被調用。當`readyState`等于4（表示請求已完成）且`status`等于200（表示請求成功），我們將服務器返回的注冊信息解析為JSON格式，并將其顯示在表格中。

接下來，我們需要在服務器端提供一個接口，用于返回最新的注冊信息。這里我們使用一個簡單的示例來模擬。

const express = require('express');
const app = express();
app.get('/api/getusers', function(req, res) {
const users = [
{ name: 'Alice', gender: 'Female', age: 20 },
{ name: 'Bob', gender: 'Male', age: 25 },
{ name: 'Charlie', gender: 'Male', age: 30 }
];
res.json(users);
});
app.listen(3000, function() {
console.log('Server is running on port 3000...');
});

在這個示例中，我們使用了Node.js的Express框架來創(chuàng)建一個簡單的服務器。當客戶端發(fā)送GET請求到`/api/getusers`時，服務器會返回一個包含注冊信息的JSON對象。

最后，我們需要在前端頁面中引入jQuery庫，以便更方便地使用AJAX。

<!-- 在head中引入jQuery庫 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table id="userTable">
<tr>
<th>用戶名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tbody id="userTableBody"> 
<!-- 這里用于展示注冊信息 -->
</tbody>
</table>
<script>
function refreshTable() {
$.ajax({
url: '/api/getusers',
type: 'GET',
success: function(users) {
var tableBody = $('#userTableBody');
tableBody.empty(); // 清空現(xiàn)有內容
users.forEach(function(user) {
var row = '<tr><td>' + user.name + '</td><td>' + user.gender + '</td><td>' + user.age + '</td></tr>';
tableBody.append(row);
});
}
});
}
// 頁面加載完成后，調用refreshTable來獲取并顯示初始數(shù)據(jù)
$(document).ready(function() {
refreshTable();
});
</script>

使用jQuery的`$.ajax`方法可以更簡潔地發(fā)送AJAX請求，并在請求成功時處理返回的數(shù)據(jù)。在上面的代碼中，我們將獲取到的注冊信息直接通過jQuery的方法操作DOM，在表格中動態(tài)生成行。

AJAX可以輕松實現(xiàn)局部表格的數(shù)據(jù)刷新，通過向服務器發(fā)送異步請求并處理返回的數(shù)據(jù)，我們可以讓表格自動更新，實時顯示最新的數(shù)據(jù)。這為提升用戶體驗帶來了很大的便利。