AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上異步請求和接收數據的技術。當需要從服務器獲取大量數據時，一次性加載整個數據可能會導致頁面加載速度緩慢，甚至導致瀏覽器崩潰。為了避免這種情況，可以使用分批加載數據的方法，將數據分割成多個部分逐步加載。本文將介紹使用AJAX如何分批加載數據。

假設你正在開發一個新聞網站，每天會有成千上萬條新聞發布。在首頁上一次性加載所有新聞數據可能會導致頁面加載緩慢，并且用戶需要等待很長時間才能看到頁面內容。為了提高用戶體驗，你決定使用AJAX來實現分批加載數據。

首先，你需要在網頁上創建一個用于展示新聞的容器。在容器內部，你可以創建一個“加載更多”按鈕，當用戶點擊該按鈕時會觸發AJAX的請求。

<div id="news-container">
<ul id="news-list"></ul>
<button id="load-more-button">加載更多</button>
</div>
<script>
var loadMoreButton = document.getElementById("load-more-button");
loadMoreButton.addEventListener("click", loadMoreNews);
</script>

接下來，你需要使用JavaScript編寫一個函數來處理AJAX請求。該函數將向服務器發送請求，獲取新批次的新聞數據，并將其動態地添加到新聞容器中。在服務器返回新聞數據之前，你可以顯示一個加載中的提示，以提醒用戶正在獲取新數據。

function loadMoreNews() {
// 顯示加載中提示
document.getElementById("news-list").innerHTML += "<li>加載中...</li>";
// 發送AJAX請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請求成功，處理返回的新聞數據
var newsData = JSON.parse(xhr.responseText);
displayNews(newsData);
}
};
xhr.open("GET", "news-api-url", true);
xhr.send();
}
function displayNews(newsData) {
// 獲取新聞容器
var newsList = document.getElementById("news-list");
// 清空加載中提示
newsList.innerHTML = "";
// 添加新批次的新聞數據到容器中
for (var i = 0; i< newsData.length; i++) {
var newsItem = newsData[i];
newsList.innerHTML += "<li>" + newsItem.title + "</li>";
}
// 如果還有更多新聞數據，顯示“加載更多”按鈕，否則隱藏按鈕
if (newsData.hasMore) {
document.getElementById("load-more-button").style.display = "block";
} else {
document.getElementById("load-more-button").style.display = "none";
}
}

在上面的例子中，當用戶點擊“加載更多”按鈕時，AJAX請求將向服務器發送一個GET請求，服務器將返回新的新聞數據作為響應。一旦新聞數據返回，loadMoreNews函數將調用displayNews函數來處理返回的數據，并將其動態地添加到新聞容器中。

通過分批加載數據的方式，當用戶點擊“加載更多”按鈕時，只有一小部分新聞數據被加載到網頁中。這樣可以大大提高頁面加載速度，同時也給用戶提供了更好的使用體驗。

總之，AJAX是一種非常有用的技術，可以使網頁在后臺請求數據，并在不刷新整個頁面的情況下動態地加載和顯示數據。通過使用AJAX分批加載數據的方法，可以避免數據加載時間過長的問題，提高用戶體驗。