隨著Web應用的不斷發展，越來越多的網站需要實現實時獲取數據并展示在頁面上的功能。傳統的頁面刷新方式會給用戶帶來糟糕的體驗，而 AJAX 技術的引入，則在很大程度上解決了這一問題。通過 AJAX 可以實現在不刷新整個頁面的情況下與服務器進行通信，并在獲取到服務器返回的數據后，使用 JavaScript 動態更新頁面。本文將重點討論如何使用 AJAX 來獲取列表數據并展示在頁面上。

假設我們正在開發一個電商網站，我們需要在商品列表頁面上展示多個商品的信息。傳統的做法是通過服務器渲染，在每次請求頁面時將所有商品的信息一并返回，這樣不僅浪費了服務器資源，也會增加頁面加載的時間。而使用 AJAX 技術，則可以實現在需要的時候再去請求服務器，并只返回當前需要的商品列表數據，提高了頁面加載速度和用戶體驗。

下面我們以一個示例來說明如何使用 AJAX 來獲取列表數據。假設我們的商品列表頁面上有一個分類導航欄，用戶點擊不同的分類時，頁面需要實時更新對應分類下的商品列表。我們可以通過注冊導航欄的點擊事件，當用戶點擊某個分類時，通過 AJAX 請求服務器獲取該分類下的商品數據，并使用 JavaScript 更新頁面。

$(document).ready(function() {
$('.category').click(function() {
var categoryId = $(this).data('id');
$.ajax({
url: '/api/products',
method: 'GET',
data: { category: categoryId },
success: function(response) {
// 在這里更新商品列表
},
error: function(error) {
console.log(error);
}
});
});
});

在上面的代碼中，我們注冊了一個點擊事件，當用戶點擊具體的分類時，我們通過 AJAX 請求服務器的 '/api/products' 接口，并傳遞了當前分類的 id。服務器在接收到該請求后會根據分類 id 查詢數據庫，返回該分類下的商品列表數據。

在成功獲取到服務器返回的商品列表數據后，我們可以在 success 回調函數中編寫更新頁面的代碼。例如，我們可以使用 jQuery 的 each() 方法來遍歷商品列表，并根據需要將每個商品的信息展示在頁面上。

success: function(response) {
var productList = response.productList;
$('.product-list').empty(); // 清空原來的列表內容
$.each(productList, function(index, product) {
var productHTML = '<div class="product"><img src="' + product.image + '"><h2>' + product.name + '</h2><p>' + product.price + '</p></div>';
$('.product-list').append(productHTML);
});
}

在上述代碼中，我們首先通過 response 對象獲取到商品列表數據，并清空原來的商品列表內容。然后，使用 each() 方法遍歷商品列表，針對每個商品，我們使用其屬性（如圖片鏈接、商品名、價格）構建出一段 HTML 代碼，并使用 append() 方法將其添加到頁面的商品列表容器中。

通過上述的代碼示例，我們可以看到，使用 AJAX 來獲取列表數據并展示在頁面上相對簡單而且靈活。借助 JavaScript 強大的動態更新能力，我們可以根據實際需求靈活地處理服務器返回的數據，并實時展示在頁面上，提供更好的用戶體驗。