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獲取值的原理和應用。