在web開發中，經常需要在頁面中使用表格來展示數據。而如果數據量較大，那么這個表格可能會很長，用戶需要不斷地滾動才能瀏覽完整。為了提升用戶體驗，我們可以使用 AJAX 技術來實現使用表格的分頁加載，即每次只加載表格的一部分數據。這樣做不僅能加快頁面加載速度，還能使用戶更方便地瀏覽數據。本文就介紹了如何使用 AJAX 加載每一頁表格的數據，并通過舉例詳述其實現過程。

假設我們有一個包含了很多用戶信息的表格，每一行代表一個用戶，包括姓名、年齡、性別等字段。為了減少初始加載時的數據量，我們只加載第一頁的數據，而當用戶滾動到表格底部時，再通過 AJAX 技術加載下一頁的數據。具體實現的方式如下：

<table id="userTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody id="userList"></tbody>
</table>

上述代碼定義了一個表格，其中 thead 部分包含表頭信息，tbody 部分用于存放用戶數據。接下來，我們需要編寫 JavaScript 代碼來實現 AJAX 加載數據的功能。

function loadNextPageData(page) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user?page=' + page);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
updateTable(data);
}
};
xhr.send();
}
function updateTable(data) {
var table = document.getElementById('userTable');
var tbody = document.getElementById('userList');
for (var i = 0; i< data.length; i++) {
var row = document.createElement('tr');
var nameCell = document.createElement('td');
nameCell.textContent = data[i].name;
row.appendChild(nameCell);
var ageCell = document.createElement('td');
ageCell.textContent = data[i].age;
row.appendChild(ageCell);
var genderCell = document.createElement('td');
genderCell.textContent = data[i].gender;
row.appendChild(genderCell);
tbody.appendChild(row);
}
}
var currentPage = 1;
loadNextPageData(currentPage);

上述代碼中，我們定義了兩個函數：loadNextPageData 和 updateTable。其中，loadNextPageData 函數負責發送 AJAX 請求獲取下一頁的數據，而 updateTable 函數用于更新表格的內容。在文檔加載完成后，我們首先調用 loadNextPageData 來加載第一頁的數據。當用戶滾動到表格底部時，我們通過監聽 scroll 事件來觸發加載下一頁的數據。

在 updateTable 函數中，我們首先獲取表格和 tbody 元素的引用，然后遍歷獲取到的數據來創建表格的每一行和單元格。最后，將創建的行添加到 tbody 中，從而實現動態加載數據的效果。

通過以上代碼的實現，我們實現了通過 AJAX 技術分頁加載表格數據的功能。當用戶訪問頁面時，只加載第一頁的數據，用戶滾動到表格底部時，再加載下一頁的數據。這種方式大大減小了初始加載時的數據量，提升了頁面的加載速度，同時也提供了更好的用戶體驗。