AJAX (Asynchronous JavaScript and XML) 是一種用于在不重新加載整個(gè)頁面的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互的技術(shù)。它通過異步方式發(fā)送HTTP請求來獲取服務(wù)器返回的響應(yīng)數(shù)據(jù)，并且能夠?qū)⑦@些數(shù)據(jù)實(shí)時(shí)更新到頁面上。其中，獲取和展示JSON數(shù)據(jù)是AJAX中常見的一種應(yīng)用場景。

假設(shè)你正在開發(fā)一個(gè)電商網(wǎng)站，需要從服務(wù)器上獲取商品信息并實(shí)時(shí)展示給用戶。為了提高用戶體驗(yàn)，你決定使用AJAX來獲取并展示這些商品信息。你可以通過使用AJAX請求返回一個(gè)JSON格式的數(shù)據(jù)，然后通過JavaScript循環(huán)遍歷這個(gè)JSON數(shù)據(jù)并將商品信息顯示在頁面上。

// 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對象來發(fā)送GET請求，并獲取服務(wù)器返回的JSON數(shù)據(jù)。其中，我們假設(shè)服務(wù)器上的商品信息以JSON數(shù)組的形式返回。在請求成功后，我們使用JSON.parse()方法將響應(yīng)數(shù)據(jù)解析為JavaScript對象，并通過循環(huán)遍歷這個(gè)JavaScript對象來獲取商品信息，并將其顯示在id為'products'的元素中。

假設(shè)服務(wù)器返回的商品信息數(shù)據(jù)為如下JSON數(shù)組：

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

經(jīng)過AJAX請求和循環(huán)遍歷，我們將獲取到的商品信息展示在頁面上：

<div id="products">
<!-- 商品信息將會顯示在這里 -->
</div>

通過以上的代碼示例，我們成功使用了AJAX獲取JSON數(shù)據(jù)并將其循環(huán)遍歷展示在頁面上。這樣，我們就實(shí)現(xiàn)了實(shí)時(shí)獲取商品信息的功能，提升了用戶體驗(yàn)。