本文将介绍如何使用Ajax技术来更新局部列表数据。在网页开发中，通常会遇到需要及时更新某个部分的数据而不需要刷新整个页面的需求。Ajax是一种在后台与服务器进行数据交互的技术，可以实现异步加载和更新页面的功能。通过使用Ajax，我们可以实现局部数据的实时更新，提升用户体验。

假设我们有一个电商网站，页面中展示了一些商品信息。当用户点击某个分类的时候，我们希望能够使用Ajax加载该分类下的商品列表，而不需要刷新整个页面。这样用户就可以方便地浏览不同分类的商品，无需等待页面重新加载。

// HTML部分
<div id="category">
<ul>
<li onclick="getProducts(1)">电子产品</li>
<li onclick="getProducts(2)">家居用品</li>
<li onclick="getProducts(3)">服装鞋包</li>
</ul>
</div>
<div id="productList">
<ul>
<li>加载中...</li>
</ul>
</div>
// JavaScript部分
function getProducts(category) {
var url = "/api/products?category=" + category;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
renderProducts(products);
}
};
xhr.open("GET", url, true);
xhr.send();
}
function renderProducts(products) {
var productList = document.getElementById("productList");
var html = "";
for (var i = 0; i < products.length; i++) {
html += "<li>" + products[i].name + "</li>";
}
productList.innerHTML = html;
}

在上述代码中，我们首先在HTML中定义了一个id为"category"的