AJAX（Asynchronous JavaScript and XML）是一種用于創建快速、交互性網頁應用的技術。通過AJAX，我們可以在不刷新整個頁面的情況下，向服務器發送請求獲取數據，并將數據展示在頁面上。而通過返回JSON（JavaScript Object Notation）格式的數據，我們可以輕松地在頁面上解析和使用這些數據。

假設我們正在構建一個電子商務網站，并想要實現一個商品搜索功能。當用戶在輸入框中輸入關鍵字時，網站會自動通過AJAX發送請求，向服務器獲取與關鍵字匹配的商品數據，并將這些數據展示在頁面上。返回的數據是以JSON格式進行傳輸的，包含了諸如商品名稱、價格、庫存等信息。

在頁面上，我們可以使用JavaScript來進行AJAX請求，并將返回的JSON數據解析為JavaScript對象。一旦我們得到了這些數據，我們就可以在頁面上自由地操作它們。例如，我們可以根據價格高低對商品進行排序，或者根據庫存情況設置“加入購物車”按鈕的顯示狀態。

現在，讓我們通過一個實際的例子來看一下如何使用AJAX交互返回JSON數據。

// JavaScript代碼
function searchProducts(keyword) {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置AJAX請求的方法、URL和異步標志
xhr.open("GET", "/search?keyword=" + keyword, true);
// 設置AJAX請求完成后的回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 在頁面上展示商品數據
displayProducts(response.products);
}
};
// 發送AJAX請求
xhr.send();
}
function displayProducts(products) {
// 在頁面上展示商品數據
var productContainer = document.getElementById("product-container");
for (var i = 0; i< products.length; i++) {
var product = products[i];
var productDiv = document.createElement("div");
// 創建商品名稱元素
var nameElement = document.createElement("h3");
nameElement.innerHTML = product.name;
productDiv.appendChild(nameElement);
// 創建價格元素
var priceElement = document.createElement("p");
priceElement.innerHTML = "價格：" + product.price;
productDiv.appendChild(priceElement);
// 創建庫存元素
var stockElement = document.createElement("p");
stockElement.innerHTML = "庫存：" + product.stock;
productDiv.appendChild(stockElement);
productContainer.appendChild(productDiv);
}
}

在以上代碼中，我們首先創建了一個名為searchProducts的函數，用于發送商品搜索的AJAX請求。在請求完成后，我們執行了一個回調函數，將返回的JSON數據解析為JavaScript對象，并將其傳遞給displayProducts函數，用于在頁面上展示商品數據。

在displayProducts函數中，我們使用了document.createElement方法來創建了一系列的HTML元素，用于展示商品的名稱、價格和庫存。然后，我們將這些元素追加到productContainer元素中。

通過以上代碼，我們可以看到，AJAX交互返回的JSON數據可以方便地在頁面上進行使用和展示。無論是展示商品數據、操作數據，還是與用戶交互，JSON數據都起到了至關重要的作用。