AJAX（Asynchronous JavaScript and XML）是一種前端技術(shù)，可以實現(xiàn)頁面局部刷新，而不需要重新加載整個頁面。在網(wǎng)站開發(fā)中，常用來實現(xiàn)數(shù)據(jù)的異步加載和分頁查詢。通過AJAX，可以讓用戶在不刷新整個頁面的情況下，通過按鈕或鏈接獲取更多的數(shù)據(jù)。

假設(shè)我們有一個產(chǎn)品列表頁面，需要在頁面末尾添加一個按鈕，當(dāng)用戶點擊按鈕時，通過AJAX請求服務(wù)器獲取下一頁的產(chǎn)品數(shù)據(jù)。在頁面加載時，我們需要先加載第一頁的數(shù)據(jù)，并渲染到頁面上。下面是代碼示例：

<!-- HTML結(jié)構(gòu) -->
<div id="product-list"></div>
<button id="load-more">加載更多</button>
<!-- JavaScript代碼 -->
<script>
var page = 1;  // 當(dāng)前頁數(shù)
var pageSize = 10;  // 每頁顯示的記錄數(shù)
// 加載第一頁的數(shù)據(jù)
loadProducts(page, pageSize);
// 點擊按鈕加載更多數(shù)據(jù)
document.getElementById("load-more").addEventListener("click", function() {
page++;  // 更新當(dāng)前頁數(shù)
loadProducts(page, pageSize);  // 加載下一頁的數(shù)據(jù)
});
// 加載產(chǎn)品數(shù)據(jù)的函數(shù)
function loadProducts(page, pageSize) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/products?page=" + page + "&pageSize=" + pageSize, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var products = response.products;
renderProducts(products);  // 渲染產(chǎn)品數(shù)據(jù)
if (products.length< pageSize) {
// 如果返回的數(shù)據(jù)不滿一頁，則說明沒有更多數(shù)據(jù)了，隱藏按鈕
document.getElementById("load-more").style.display = "none";
}
}
};
xhr.send();
}
// 渲染產(chǎn)品數(shù)據(jù)的函數(shù)
function renderProducts(products) {
var productListElement = document.getElementById("product-list");
for (var i = 0; i< products.length; i++) {
var productElement = document.createElement("div");
productElement.innerText = products[i].name;
productListElement.appendChild(productElement);
}
}
</script>

以上代碼中，我們首先定義了兩個全局變量：page和pageSize，分別表示當(dāng)前頁數(shù)和每頁顯示的記錄數(shù)。然后，在頁面加載時，調(diào)用loadProducts函數(shù)加載第一頁的數(shù)據(jù)并渲染到頁面上。當(dāng)用戶點擊"加載更多"按鈕時，使用AJAX發(fā)送GET請求到服務(wù)器指定的API接口，傳遞當(dāng)前頁數(shù)和每頁顯示的記錄數(shù)作為參數(shù)。服務(wù)器接收到請求后，根據(jù)參數(shù)返回對應(yīng)頁數(shù)的產(chǎn)品數(shù)據(jù)。

在服務(wù)器端，我們可以使用任何編程語言來處理AJAX請求，例如PHP、Java、Python等。下面是一個示例API接口的實現(xiàn)，使用PHP語言：

// PHP代碼
<?php
$page = $_GET["page"];  // 獲取GET請求中的page參數(shù)
$pageSize = $_GET["pageSize"];  // 獲取GET請求中的pageSize參數(shù)
// 查詢數(shù)據(jù)庫，獲取對應(yīng)頁數(shù)的產(chǎn)品數(shù)據(jù)
$start = ($page - 1) * $pageSize;
$products = query("SELECT * FROM products LIMIT $start, $pageSize");
$response = [
"products" =>$products
];
echo json_encode($response);  // 將產(chǎn)品數(shù)據(jù)以JSON格式返回
?>

在上述代碼中，我們首先從GET請求中獲取page和pageSize參數(shù)，然后使用這兩個參數(shù)來計算查詢數(shù)據(jù)庫的起始位置。接著，執(zhí)行查詢語句，獲取對應(yīng)頁數(shù)的產(chǎn)品數(shù)據(jù)。最后，將產(chǎn)品數(shù)據(jù)以JSON格式返回給前端。

使用AJAX進(jìn)行分頁查詢數(shù)據(jù)可以大幅提升用戶體驗，減少頁面加載時間。當(dāng)用戶點擊"加載更多"按鈕時，頁面只會局部刷新，不需要重新加載整個頁面，從而保持用戶的當(dāng)前狀態(tài)。此外，對于擁有大量數(shù)據(jù)的網(wǎng)站或應(yīng)用程序，分頁查詢數(shù)據(jù)還可以減輕服務(wù)器的壓力，提高系統(tǒng)的整體性能。