AJAX（Asynchronous JavaScript and XML）是一種在網頁上實現異步數據交互的技術，可以在不刷新整個頁面的情況下更新部分頁面內容。在網頁上實現滾動加載頁面的功能，即在用戶滾動到頁面底部時，自動加載新的內容，是一個常見的應用場景。本文將介紹如何使用AJAX來實現滾動加載頁面，并通過舉例說明其實現過程。

假設我們有一個帖子列表頁面，需要一次加載十條帖子內容，并在用戶滾動到頁面底部時，自動加載出下一頁的十條帖子。為了實現這個功能，首先我們需要通過AJAX發送請求獲取新的帖子列表數據，并將數據插入到帖子列表中。

首先，我們需要在頁面加載完成時綁定一個滾動事件的監聽器，當用戶滾動到頁面底部時，觸發該事件。我們可以使用以下代碼實現這一功能：

window.onload = function() {
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// 用戶滾動到頁面底部了 
}
});
};

在滾動事件監聽器中，我們使用了window.innerHeight和window.scrollY兩個屬性來判斷用戶是否滾動到了頁面底部。其中，window.innerHeight表示窗口的當前高度，而window.scrollY表示窗口滾動的距離。document.body.offsetHeight則代表整個頁面的高度。

接下來，我們需要在滾動到頁面底部時發送AJAX請求來獲取新的帖子列表數據。我們可以使用XMLHttpRequest對象來發送請求并處理響應。以下是一個使用AJAX發送GET請求獲取帖子列表數據的示例：

window.onload = function() {
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts?page=' + nextPage);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var newPosts = JSON.parse(xhr.responseText);
// 處理新的帖子列表數據
}
};
xhr.send();
}
});
};

在這個示例中，我們使用了XMLHttpRequest對象的open方法來指定請求的方法和URL，并通過onreadystatechange事件監聽器來處理響應。當請求的狀態為4（即完成）且狀態碼為200時，表示請求成功，我們可以通過xhr.responseText來獲取服務器返回的帖子列表JSON數據。

最后，我們只需要將新的帖子列表數據插入到帖子列表中即可。我們可以使用JavaScript動態創建DOM節點，并將它們添加到指定的父節點中。以下是一個將新的帖子列表數據插入到頁面中的示例：

window.onload = function() {
var postsContainer = document.getElementById('posts-container');
window.addEventListener('scroll', function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/posts?page=' + nextPage);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var newPosts = JSON.parse(xhr.responseText);
for (var i = 0; i< newPosts.length; i++) {
var post = document.createElement('div');
post.innerText = newPosts[i].title;
postsContainer.appendChild(post);
}
nextPage++;
}
};
xhr.send();
}
});
};

在這個示例中，我們通過document.createElement方法創建一個新的div節點，并使用innerText屬性來設置節點的文本內容。然后，我們將這個新的節點添加到帖子列表的父節點中，即通過getElementById('posts-container')獲取到的節點。

通過以上代碼實現，我們可以實現滾動加載頁面的功能，當用戶滾動到頁面底部時，自動加載新的帖子內容。這樣就能夠提升用戶體驗，避免一次性加載過多的帖子數據，同時也減輕了服務器的負載壓力。