随着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 强大的动态更新能力，我们可以根据实际需求灵活地处理服务器返回的数据，并实时展示在页面上，提供更好的用户体验。