Ajax（Asynchronous JavaScript and XML）是一種用于在網頁上進行異步通信的技術。通過使用Ajax，可以實現在不刷新整個網頁的情況下，動態改變網頁的內容。在本文中，我們將探討如何使用Ajax直接改變表格數據。

假設我們有一個簡單的表格，其中包含一些學生的成績信息：

<table id="grades-table">
<tr>
<th>姓名</th>
<th>科目</th>
<th>成績</th>
</tr>
<tr>
<td>張三</td>
<td>數學</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>英語</td>
<td>85</td>
</tr>
</table>

現在，我們希望能夠通過Ajax直接在表格中修改學生的成績。為此，我們需要編寫一些JavaScript代碼來監聽用戶的輸入，并將其發送到服務器端進行處理。

// 給每個成績格子添加事件監聽器
var gradesCells = document.querySelectorAll('#grades-table td');
for (var i = 0; i < gradesCells.length; i++) {
gradesCells[i].addEventListener('click', function() {
// 彈出輸入框讓用戶輸入新的成績
var newGrade = prompt('請輸入新的成績：');
// 使用Ajax發送POST請求將新成績發送給服務器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/update-grade');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 成功更新成績后，將表格中的數據更新為新值
this.textContent = newGrade;
} else {
alert('發生錯誤，請重試。');
}
}
};
xhr.send(JSON.stringify({grade: newGrade}));
});
}

如上所示，我們首先獲取到所有的成績格子，并為其添加了一個“click”的事件監聽器。當用戶點擊某個格子時，我們將彈出一個輸入框，讓用戶輸入新的成績。

然后，我們使用Ajax發送一個POST請求將新的成績發送到服務器。在服務器端，我們可以使用任何后端語言（如PHP、Python等）來處理這個請求，并將更新后的成績存儲到數據庫中。

在前端，我們監聽Ajax請求的狀態變化。當請求完成時（readyState為XMLHttpRequest.DONE），我們檢查其狀態碼。如果狀態碼為200，表示請求成功，我們將表格中的數據更新為新的成績值。否則，我們將彈出一個錯誤提示框。

通過這種方式，我們可以直接在表格中修改學生的成績，而不需要刷新整個網頁。這樣不僅提高了用戶體驗，還減少了服務器和網絡的負載。

總結來說，通過使用Ajax，我們可以實現在不刷新整個網頁的情況下，動態改變表格數據。通過監聽用戶的輸入，將數據發送到服務器進行處理，并在請求完成后更新表格中的數據。這為網頁開發者提供了更加靈活和交互性強的操作方式。