AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式前端應用程序的技術。它通過異步地發送和接收數據，使得我們能夠在不刷新整個頁面的情況下更新部分頁面內容。而 JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，在處理數據時非常方便。在本文中，我們將探討如何使用 AJAX 和 JSON 來返回 JSON 數據。

假設我們正在開發一個簡單的電商網站，并且需要顯示商品的數量和價格。我們可以通過 AJAX 請求后端服務器獲取這些數據，并使用 JSON 格式將它們傳回瀏覽器。前端代碼如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/products', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var products = response.products;
// 使用產品數據更新頁面內容
document.getElementById('productCount').innerText = products.length;
document.getElementById('productPrice').innerText = response.price;
}
};
xhr.send();

在這段代碼中，我們使用了 XMLHttpRequest 對象來發送 GET 請求，并設置了一個回調函數來處理服務器的響應。當請求狀態為 4（表示請求已完成）且狀態碼為 200（表示請求成功）時，我們將響應數據解析為 JavaScript 對象。然后，我們可以根據需要使用這些數據來更新頁面內容。

后端服務器會根據請求的 URL 返回相應的 JSON 數據。以 PHP 為例，我們可以使用以下代碼來返回包含商品數量和價格的 JSON 數據：

$products = [
['name' => 'iPhone', 'price' => 999],
['name' => 'iPad', 'price' => 799],
['name' => 'MacBook', 'price' => 1299]
];
$response = [
'products' => $products,
'price' => 2897
];
header('Content-Type: application/json');
echo json_encode($response);

在這個例子中，我們定義了一個包含商品信息的數組，并將其包裝在一個 response 對象中。然后，我們使用 header 函數來設置響應的 Content-Type 為 application/json，以告訴瀏覽器返回的數據是 JSON 格式的。最后，我們將 response 對象使用 json_encode 函數轉換為 JSON 字符串并返回給客戶端。

通過使用 AJAX 和 JSON，我們可以實現動態獲取并更新數據的功能，而不需要刷新整個頁面。這極大地提高了用戶體驗，并使我們能夠構建更流暢和交互性的應用程序。