在Web開發中，展示大量數據是一個常見的需求。然而，由于瀏覽器的限制，一次性加載大量數據可能會導致頁面的響應變慢或者崩潰。幸運的是，使用Ajax可以很輕松地解決這個問題。本文將介紹如何使用Ajax在網頁上展示多條數據，并通過舉例說明其工作原理。
通常情況下，當我們需要展示多條數據時，可以通過Ajax進行數據分頁加載。所謂數據分頁加載，是指將一批數據分成若干頁，每次只加載其中一頁的數據。這樣就可以避免一次性加載大量數據而造成的頁面卡頓或崩潰。通過Ajax，我們可以在用戶滾動頁面到底部的時候，異步加載下一頁的數據，實現平滑的無限滾動效果。
舉個例子來說明，假設我們有一個博客網站，每頁展示10篇文章。初始時，我們只加載第一頁的數據。當用戶滾動到頁面底部時，Ajax會發送一個請求，從服務器獲取下一頁的數據，然后將數據展示在頁面上。代碼如下所示：

html
<p>博客文章列表：</p>
<div id="article-list">
<!-- 第一頁的文章數據將通過后端模板渲染到這里 -->
</div>
<script>
window.addEventListener('scroll', function() {
// 判斷用戶是否滾動到頁面底部
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
loadNextPage(); // 觸發加載下一頁的函數
}
});
function loadNextPage() {
var nextPage = getNextPageNumber(); // 獲取下一頁頁碼
var xhr = new XMLHttpRequest();
xhr.open('GET', '/articles?page=' + nextPage, true);
xhr.onload = function() {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var articles = response.articles;
if (articles.length) {
var articleList = document.getElementById('article-list');
articles.forEach(function(article) {
var articleDiv = document.createElement('div');
articleDiv.innerHTML = '<h2>' + article.title + '</h2>' + '<p>' + article.content + '</p>';
articleList.appendChild(articleDiv);
});
}
}
};
xhr.send();
}
function getNextPageNumber() {
// 根據當前頁面已展示的文章數量，計算下一頁的頁碼
}
</script>

在上面的代碼中，我們通過監聽窗口滾動事件，當用戶滾動到頁面底部時觸發loadNextPage()函數。該函數通過Ajax發送一個GET請求，請求下一頁的文章數據。服務器返回的數據是一個JSON對象，包含了文章的相關信息。在成功接收到數據后，我們使用document.createElement創建