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

假設(shè)我們正在構(gòu)建一個電子商務(wù)網(wǎng)站，并想要實現(xiàn)一個商品搜索功能。當(dāng)用戶在輸入框中輸入關(guān)鍵字時，網(wǎng)站會自動通過AJAX發(fā)送請求，向服務(wù)器獲取與關(guān)鍵字匹配的商品數(shù)據(jù)，并將這些數(shù)據(jù)展示在頁面上。返回的數(shù)據(jù)是以JSON格式進(jìn)行傳輸?shù)模酥T如商品名稱、價格、庫存等信息。

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

現(xiàn)在，讓我們通過一個實際的例子來看一下如何使用AJAX交互返回JSON數(shù)據(jù)。

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

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

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

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