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我们可以实现在不刷新整个页面的情况下与服务器进行数据交互，并将返回的数据动态地渲染在页面上，提升用户体验。在实际项目中，我们可以根据具体需求和数据格式进行适当的调整和处理，从而实现更丰富的数据渲染效果。