使用Ajax來列表顯示JSON是一種常見的Web開發技術。通過AJAX，我們可以從服務器上獲取JSON數據，并將其動態地顯示在網頁上，而無需重新加載整個頁面。這種技術在現代網站和應用程序中得到了廣泛的應用，因為它能夠提供用戶友好的界面和更快速的用戶體驗。 假設我們正在開發一個電子商務網站，我們希望實時顯示最新的商品列表。我們可以利用Ajax來實現這個功能。通過Ajax，我們可以向服務器發送一個請求，請求獲取最新的商品列表的JSON數據，然后將這些數據動態地顯示在網頁上。 為了實現這個功能，我們需要編寫一些JavaScript代碼和服務器端代碼。首先，我們可以使用JavaScript的XMLHttpRequest對象來發送一個請求，并將響應的JSON數據存儲在一個JavaScript對象中。然后，我們可以使用該對象中的數據來更新網頁上的列表。 下面是一個示例，說明了如何使用Ajax來列表顯示JSON數據：

```javascript
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 指定要發送請求的HTTP方法、URL和異步標志
xhr.open('GET', 'http://example.com/api/products', true);
// 指定服務器響應的數據類型
xhr.setRequestHeader('Accept', 'application/json');
// 注冊事件處理程序，處理服務器響應
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 從服務器獲取到的JSON數據
var jsonData = JSON.parse(xhr.responseText);
// 在網頁上創建一個列表
var ul = document.createElement('ul');
// 遍歷JSON數據，并將每個商品添加到列表中
for (var i = 0; i< jsonData.length; i++) {
var li = document.createElement('li');
li.textContent = jsonData[i].name;
ul.appendChild(li);
}
// 將列表添加到網頁中的某個元素中
document.getElementById('product-list').appendChild(ul);
}
};
// 發送請求到服務器
xhr.send();
```

在上面的示例中，我們使用XMLHttpRequest對象來發送一個GET請求。我們指定了請求的URL為'http://example.com/api/products'。我們還指定了響應的數據類型為'application/json'，以便告訴服務器我們希望獲取的是JSON數據。 在注冊的onreadystatechange事件處理程序中，我們檢查了xhr對象的readyState和status屬性，以確保服務器響應完成并且響應狀態碼為200（表示成功）。如果這兩個條件都滿足，我們解析服務器響應的JSON數據，并使用它來創建一個包含商品名稱的列表。 最后，我們將這個列表添加到網頁中的某個元素中，例如id為'product-list'的元素。 通過使用上述技術，我們可以實現一個動態顯示最新商品列表的電子商務網站。每當有新商品添加到服務器的數據庫中時，我們只需使用Ajax來獲取最新的商品列表，并將它們動態地顯示在網頁上。這樣，用戶就可以實時了解最新的商品，并且無需重新加載整個頁面。