AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以通過異步的方式從后臺獲取數據，無需刷新整個頁面。它可以實現網頁的局部刷新，提高用戶體驗。在本文中，我們將詳細介紹使用AJAX從后臺異步獲取數據的方法。

在一個網頁中，我們經常需要從后臺獲取數據，并將其展示給用戶。傳統的方式是使用一個表單提交數據或進行頁面跳轉，然后后臺處理數據并返回結果給用戶。這種方式會導致頁面的整體刷新，用戶體驗較差。而使用AJAX，則可以避免這個問題。

一個常見的例子是在一個社交媒體網站上，我們可以通過AJAX異步獲取用戶的最新消息，而無需刷新整個頁面。當我們滾動頁面到底部時，可以使用AJAX請求后臺獲取更多的消息，并將其添加到頁面的末尾。這樣就實現了無限滾動效果，用戶可以不間斷地瀏覽消息。

function loadMoreMessages(pageNumber) {
// 使用AJAX向后臺發送請求
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// 請求成功，處理返回的數據
var response = JSON.parse(this.responseText);
var messages = response.messages;
// 將新的消息添加到頁面末尾
var messageContainer = document.getElementById("message-container");
for (var i = 0; i < messages.length; i++) {
var message = messages[i];
var messageElement = document.createElement("div");
messageElement.innerText = message.text;
messageContainer.appendChild(messageElement);
}
}
};
// 發送GET請求，獲取指定頁數的消息
xhttp.open("GET", "/api/messages?page=" + pageNumber, true);
xhttp.send();
}

在上述代碼中，我們定義了一個名為loadMoreMessages的函數，該函數傳入一個頁碼參數。函數內部使用AJAX發送GET請求，獲取指定頁碼的消息。請求成功后，我們解析返回的JSON數據，并將每條消息創建為一個

window.addEventListener("load", function() {
// 頁面加載完成后，獲取初始的消息
loadMoreMessages(1);
// 監聽scroll事件，判斷是否需要繼續加載更多的消息
window.addEventListener("scroll", function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var windowHeight = window.innerHeight;
var documentHeight = document.documentElement.scrollHeight;
// 當滾動到距離底部還有100像素時，加載更多的消息
if (scrollTop + windowHeight > documentHeight - 100) {
// 獲取下一頁的消息
var currentPage = parseInt(document.getElementById("current-page").innerText);
loadMoreMessages(currentPage + 1);
}
});
});