AJAX（Asynchronous JavaScript and XML）是一種用于創建無刷新頁面的技術，它允許我們使用JavaScript和XML來在后臺異步加載數據并更新頁面內容，而無需重新加載整個頁面。點擊無刷新分頁是一種常見的應用場景，通過使用AJAX，我們可以實現點擊分頁按鈕時只刷新頁面的一部分，而不是整個頁面。
假設我們現在有一個新聞網站，頁面上顯示了最新的新聞標題，并且每頁顯示10條新聞。當用戶點擊下一頁按鈕時，我們希望只刷新新聞標題這一部分，而不是重新加載整個頁面。通過使用AJAX，我們可以實現這個功能。
function loadNextPage() {
var currentPage = getCurrentPage();
var nextPage = currentPage + 1;
// 使用AJAX發送請求獲取下一頁的新聞標題
var url = "/news?page=" + nextPage;
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 更新新聞標題
var newsTitles = xhr.responseXML.getElementsByTagName("title");
var newsList = document.getElementById("newsList");
for (var i = 0; i< newsTitles.length; i++) {
var title = newsTitles[i].textContent;
var li = document.createElement("li");
li.textContent = title;
newsList.appendChild(li);
}
}
};
xhr.send();
}在這段代碼中，我們定義了一個名為loadNextPage的函數，用于加載下一頁的新聞標題。首先，我們獲取當前頁數，然后計算出下一頁的頁數。接下來，我們使用XMLHttpRequest對象創建了一個AJAX請求。我們指定了請求的URL，其中包含了下一頁的頁數。然后，我們定義了一個回調函數，用于處理AJAX請求的響應。當readyState為4（請求已完成）且狀態碼為200（成功）時，我們從響應中獲取新聞標題，并將它們逐個添加到頁面的新聞列表中。
在頁面上，我們可以通過使用onclick事件來觸發loadNextPage函數，并將其綁定到下一頁按鈕上：
當用戶點擊下一頁按鈕時，loadNextPage函數將會被調用，AJAX請求將會發送，并且頁面的新聞標題將會被更新。這樣，我們就實現了點擊無刷新分頁的功能。
總結起來，使用AJAX實現點擊無刷新分頁可以提升用戶體驗，減少頁面加載時間，而不需要重新加載整個頁面。提供更好的用戶體驗是AJAX的一大優勢之一，它能夠幫助我們實現各種動態的、無刷新的交互效果。