AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個(gè)頁(yè)面的情況下實(shí)現(xiàn)局部刷新的技術(shù)。它通過在后臺(tái)與服務(wù)器進(jìn)行數(shù)據(jù)交換，僅更新頁(yè)面中需要更新的部分，從而提升用戶體驗(yàn)，并減少對(duì)服務(wù)器的請(qǐng)求次數(shù)。本文將介紹如何使用AJAX實(shí)現(xiàn)局部刷新表格，并給出具體的代碼示例。

假設(shè)我們有一個(gè)表格，其中顯示了一些學(xué)生的姓名、年齡和成績(jī)。每當(dāng)用戶想要更新表格中的某一行數(shù)據(jù)時(shí)，傳統(tǒng)的方法是重新加載整個(gè)頁(yè)面，這會(huì)導(dǎo)致頁(yè)面的所有內(nèi)容都被重新渲染。但是使用AJAX，我們可以實(shí)現(xiàn)只刷新表格中的某一行數(shù)據(jù)，而不影響其他部分的功能。比如，用戶可以點(diǎn)擊某一行的編輯按鈕，修改學(xué)生的成績(jī)，然后只刷新該行的成績(jī)數(shù)據(jù)，而其他部分的內(nèi)容保持不變。

// HTML代碼片段
<table id="studentTable"><thead><tr><th>姓名</th><th>年齡</th><th>成績(jī)</th><th>操作</th></tr></thead><tbody><tr><td>小明</td><td>10</td><td id="score1">90</td><td><button onclick="editScore(1)">編輯</button></td></tr><tr><td>小紅</td><td>11</td><td id="score2">95</td><td><button onclick="editScore(2)">編輯</button></td></tr><tr><td>小亮</td><td>12</td><td id="score3">85</td><td><button onclick="editScore(3)">編輯</button></td></tr></tbody></table>

為了實(shí)現(xiàn)AJAX局部刷新表格的功能，我們首先需要編寫一個(gè)處理數(shù)據(jù)更新的服務(wù)器端腳本。在該腳本中，我們可以接收到客戶端傳來的需要更新的數(shù)據(jù)，并將其存儲(chǔ)到數(shù)據(jù)庫(kù)中。然后，服務(wù)器將更新后的數(shù)據(jù)返回給客戶端。

// PHP代碼片段（服務(wù)器端腳本）
<?php
// 獲取客戶端傳來的參數(shù)
$studentId = $_POST['studentId'];
$newScore = $_POST['newScore'];
// 將更新后的數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)中
$sql = "UPDATE students SET score = '$newScore' WHERE id = '$studentId'";
// 執(zhí)行數(shù)據(jù)庫(kù)操作
// 返回更新后的數(shù)據(jù)給客戶端
$data = array('newScore' =>$newScore);
echo json_encode($data);
?>

在客戶端，我們可以使用AJAX來發(fā)送請(qǐng)求，調(diào)用服務(wù)器端腳本，實(shí)現(xiàn)局部刷新表格的功能。當(dāng)用戶點(diǎn)擊某一行數(shù)據(jù)的編輯按鈕時(shí)，可以獲取到該行的學(xué)生ID和新的成績(jī)，然后通過AJAX將數(shù)據(jù)發(fā)送到服務(wù)器端腳本。服務(wù)器接收到數(shù)據(jù)后，更新數(shù)據(jù)庫(kù)中相應(yīng)的記錄，并將更新后的數(shù)據(jù)返回給客戶端。客戶端接收到數(shù)據(jù)后，再使用JavaScript動(dòng)態(tài)更新表格中的相應(yīng)內(nèi)容。

// JavaScript代碼片段（客戶端腳本）
function editScore(studentId) {
// 獲取用戶輸入的新的成績(jī)
var newScore = prompt("請(qǐng)輸入新的學(xué)生成績(jī)：");
// 發(fā)送AJAX請(qǐng)求
var xhr = new XMLHttpRequest();
xhr.open("POST", "update.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 處理服務(wù)器返回的數(shù)據(jù)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取服務(wù)器返回的數(shù)據(jù)
var data = JSON.parse(xhr.responseText);
var newScore = data.newScore;
// 動(dòng)態(tài)更新表格中的數(shù)據(jù)
var scoreCell = document.getElementById("score" + studentId);
scoreCell.innerText = newScore;
}
};
// 發(fā)送請(qǐng)求
xhr.send("studentId=" + studentId + "&newScore=" + newScore);
}

通過上述代碼，我們實(shí)現(xiàn)了使用AJAX局部刷新表格的功能。當(dāng)用戶點(diǎn)擊某一行數(shù)據(jù)的編輯按鈕并輸入新的成績(jī)后，頁(yè)面只會(huì)局部刷新，并動(dòng)態(tài)更新相應(yīng)的表格中的成績(jī)數(shù)據(jù)。這樣，用戶可以更快速地完成某一行數(shù)據(jù)的更新操作，提高了用戶體驗(yàn)，減少了不必要的頁(yè)面加載和渲染操作。