Ajax（Asynchronous JavaScript and XML）是一種用于在頁面上無需刷新的情況下與服務器進行數據交互的技術。通過Ajax，我們可以在頁面上獲取服務器返回的數據，并將其渲染在頁面上，以提升用戶體驗。本文將詳細介紹如何使用Ajax獲取數據，并將數據渲染在頁面上。
通過Ajax發送HTTP請求獲取數據是一個異步的過程，也就是說在等待服務器響應時，頁面的其他部分可以繼續加載和顯示。當數據返回后，我們可以將其插入到指定的HTML元素中，從而實現數據的渲染。
一種常見的使用Ajax渲染數據的情況是在一個在線商店的網站上。當用戶瀏覽商品列表時，頁面只加載了商品的基本信息，如圖片、名稱和價格等。當用戶點擊某個商品時，通過Ajax發送請求獲取該商品的詳細信息，并將其渲染在頁面上。
舉個例子，假設網站上有一個商品列表，每個商品都有一個“查看詳情”的按鈕。當用戶點擊按鈕時，通過Ajax請求獲取該商品的詳細信息。
HTML代碼如下：

<p>商品列表</p>
<ul>
<li>
<h3>商品 1</h3>
<p>價格：$10</p>
<button onclick="loadProductDetails(1)">查看詳情</button>
</li>
<li>
<h3>商品 2</h3>
<p>價格：$20</p>
<button onclick="loadProductDetails(2)">查看詳情</button>
</li>
<li>
<h3>商品 3</h3>
<p>價格：$30</p>
<button onclick="loadProductDetails(3)">查看詳情</button>
</li>
</ul>
<div id="productDetails"></div>

在以上代碼中，每個商品都有一個唯一的ID，并在按鈕的點擊事件中傳入該ID。當點擊按鈕時，調用名為loadProductDetails的函數，并傳入相應的商品ID。
JavaScript代碼如下：

function loadProductDetails(productId) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var product = JSON.parse(xhr.responseText);
renderProductDetails(product);
}
};
xhr.open("GET", "getProductDetails.php?id=" + productId, true);
xhr.send();
}
function renderProductDetails(product) {
var productDetails = document.getElementById("productDetails");
productDetails.innerHTML = "<h2>" + product.name + "</h2>";
productDetails.innerHTML += "<p>價格：" + product.price + "</p>";
productDetails.innerHTML += "<p>描述：" + product.description + "</p>";
}

以上代碼中，loadProductDetails函數用于發送Ajax請求獲取商品詳細信息，并在請求成功后調用renderProductDetails函數將數據渲染在頁面上。renderProductDetails函數通過innerHTML屬性將數據直接插入到productDetails元素中。
例如，當用戶點擊“查看詳情”按鈕時，將會發送一個GET請求到getProductDetails.php文件，并附帶相應的商品ID。服務器端根據商品ID查詢數據庫，然后返回JSON格式的商品詳細信息。在客戶端接收到響應后，通過JSON.parse將其轉換為JavaScript對象，并調用renderProductDetails函數渲染數據。
以上是使用Ajax獲取數據并將其渲染在頁面上的簡單示例。通過AJax我們可以實現在不刷新整個頁面的情況下與服務器進行數據交互，并將返回的數據動態地渲染在頁面上，提升用戶體驗。在實際項目中，我們可以根據具體需求和數據格式進行適當的調整和處理，從而實現更豐富的數據渲染效果。