AJAX（Asynchronous JavaScript and XML）是一種用于在不重新加載整個頁面的情況下，異步地從服務器獲取數據的技術。它可以通過與服務器交換數據并更新頁面的部分內容，提供更好的用戶體驗和性能。在本文中，我們將討論如何使用AJAX接收JSON數據并將其展示在網頁上。

假設我們正在開發一個電商網站，我們希望在頁面上展示商品的相關信息，比如商品名稱、價格和庫存數量。我們可以通過AJAX從服務器請求一個包含這些信息的JSON數據。下面的示例代碼演示了如何使用AJAX異步請求JSON數據并將其展示在網頁上：

<script>
function loadProduct() {
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義響應完成后的回調函數
xhr.onload = function() {
if (xhr.status === 200) {
// 將返回的JSON數據解析為JavaScript對象
var product = JSON.parse(xhr.responseText);
// 將商品信息顯示在頁面上
document.getElementById("product-name").innerHTML = product.name;
document.getElementById("product-price").innerHTML = product.price;
document.getElementById("product-stock").innerHTML = product.stock;
}
};
// 發送AJAX請求
xhr.open("GET", "product.json", true);
xhr.send();
}
// 在頁面加載完成后調用loadProduct函數
window.onload = loadProduct;
</script>

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象，它負責發送AJAX請求。然后，我們定義了xhr.onload回調函數，它會在請求完成后被調用。在這個回調函數中，我們首先檢查服務器返回的HTTP狀態碼是否為200，這表示請求成功。然后，我們使用JSON.parse()將返回的JSON字符串解析為JavaScript對象。最后，我們將解析后的商品信息展示在頁面的相應位置上。

為了演示以上代碼的工作原理，我們可以創建一個名為product.json的文件，并在其中包含如下內容：

{
"name": "iPhone 12",
"price": "$999",
"stock": 50
}

當我們打開包含以上代碼的網頁時，它會通過AJAX請求加載product.json文件，并將文件中的商品信息展示在網頁上。在這個例子中，我們將商品名稱顯示在id為“product-name”的html元素中，將商品價格顯示在id為“product-price”的元素中，將庫存數量顯示在id為“product-stock”的元素中。

AJAX接收JSON數據展示在網頁上的例子不僅僅局限于展示商品信息。它可以用于展示各種類型的數據，比如用戶信息、新聞頭條、天氣預報等。

總之，通過使用AJAX接收JSON數據并將其展示在網頁上，我們可以提供更好的用戶體驗和性能。通過異步請求數據，我們可以在不重新加載整個頁面的情況下，實時地獲取并更新頁面的內容。這使得網頁更加靈活、交互性更強，同時減少了對服務器的請求和頁面加載時間，提高了網站的性能。