Ajax（Asynchronous JavaScript and XML）是一种用于在不重新加载整个页面的情况下更新页面部分内容的技术。它能够通过在后台与服务器进行异步通信来获得数据，并用获取到的数据动态刷新页面。本文将介绍如何使用Ajax根据ID获取值的方法，并提供一些示例说明。

利用Ajax根据ID获取值的一种常见的应用场景是在一个电商网站上查看产品信息。假设我们的网站上有一个商品列表，每个商品都有一个唯一的ID，当用户点击某个商品时，我们希望通过Ajax来获取该商品的详细信息并展示在页面上。

// HTML代码
<div id="product-container">
<div class="product" data-id="1">商品A</div>
<div class="product" data-id="2">商品B</div>
<div class="product" data-id="3">商品C</div>
</div>
<div id="product-details">
<h2 id="product-name">商品名称</h2>
<p id="product-description">商品描述</p>
<p id="product-price">商品价格</p>
</div>

在这个例子中，商品列表以一系列的div元素展示，每个div元素都有一个data-id属性，代表商品的ID。当用户点击某个商品时，我们需要根据这个ID去后台获取对应商品的详细信息，并将其展示在id为“product-details”的div中。

// JavaScript代码
var productElements = document.getElementsByClassName("product");
for (var i = 0; i< productElements.length; i++) {
var productElement = productElements[i];
productElement.addEventListener("click", function() {
var productId = this.getAttribute("data-id");
getProductDetails(productId);
});
}
function getProductDetails(productId) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/product/" + productId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var product = JSON.parse(xhr.responseText);
document.getElementById("product-name").textContent = product.name;
document.getElementById("product-description").textContent = product.description;
document.getElementById("product-price").textContent = product.price;
}
};
xhr.send();
}

上述JavaScript代码使用了addEventListener方法来为每个商品元素添加点击事件监听器。当用户点击某个商品时，通过this.getAttribute("data-id")获取到该商品的ID，并调用getProductDetails函数来获取商品的详细信息。在getProductDetails函数中，我们使用XMLHttpRequest对象来发送异步请求，请求后台接口“/api/product/”+productId，并在readyState为4（请求完成）且status为200（请求成功）时，将获取到的商品信息更新到页面上。

这个例子中实现了根据ID获取值的功能，当用户点击商品A时，页面将展示商品A的详细信息；当用户点击商品B时，页面将展示商品B的详细信息，以此类推。通过使用Ajax获取数据，我们能够在不刷新整个页面的情况下实现页面部分内容的动态更新，提升了用户体验。

Ajax根据ID获取值是Web开发中常用的一种技术手段。它可以应用于各种需求，如根据用户ID获取用户信息、根据文章ID获取文章内容等等。希望通过本文的介绍，你能够更好地理解Ajax根据ID获取值的原理和应用。