AJAX (Asynchronous JavaScript and XML) 是一种用于在不重新加载整个页面的情况下与服务器进行数据交互的技术。它通过异步方式发送HTTP请求来获取服务器返回的响应数据，并且能够将这些数据实时更新到页面上。其中，获取和展示JSON数据是AJAX中常见的一种应用场景。

假设你正在开发一个电商网站，需要从服务器上获取商品信息并实时展示给用户。为了提高用户体验，你决定使用AJAX来获取并展示这些商品信息。你可以通过使用AJAX请求返回一个JSON格式的数据，然后通过JavaScript循环遍历这个JSON数据并将商品信息显示在页面上。

// AJAX请求示例
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/products', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
for (var i = 0; i < data.length; i++) {
document.getElementById('products').innerHTML += '<p>' + data[i].name + '</p>';
}
}
};
xhr.send();

在上面的代码示例中，我们使用了XMLHttpRequest对象来发送GET请求，并获取服务器返回的JSON数据。其中，我们假设服务器上的商品信息以JSON数组的形式返回。在请求成功后，我们使用JSON.parse()方法将响应数据解析为JavaScript对象，并通过循环遍历这个JavaScript对象来获取商品信息，并将其显示在id为'products'的元素中。

假设服务器返回的商品信息数据为如下JSON数组：

[
{
"id": 1,
"name": "iPhone 12",
"price": 999
},
{
"id": 2,
"name": "Samsung Galaxy S21",
"price": 899
},
{
"id": 3,
"name": "Google Pixel 5",
"price": 699
}
]

经过AJAX请求和循环遍历，我们将获取到的商品信息展示在页面上：

<div id="products">
<!-- 商品信息将会显示在这里 -->
</div>

通过以上的代码示例，我们成功使用了AJAX获取JSON数据并将其循环遍历展示在页面上。这样，我们就实现了实时获取商品信息的功能，提升了用户体验。