AJAX (Asynchronous JavaScript and XML) 是一種用于在不重新加載整個網(wǎng)頁的情況下，更新部分網(wǎng)頁內(nèi)容的技術(shù)。它通過與服務器進行異步通信，從服務器獲取數(shù)據(jù)并更新頁面。在現(xiàn)代web應用中，與服務器進行數(shù)據(jù)交互是非常重要的，而接收JSON（JavaScript Object Notation）格式的數(shù)據(jù)是一種常見的方式。本文將探討使用AJAX接收JSON數(shù)據(jù)的方法和應用。

首先，讓我們看一個簡單的例子，假設我們正在構(gòu)建一個電子商務網(wǎng)站，并且我們想要根據(jù)用戶選擇的不同分類，動態(tài)地顯示相應的產(chǎn)品列表。為了實現(xiàn)這個功能，我們可以使用AJAX與服務器進行通信，發(fā)送請求并接收返回的JSON數(shù)據(jù)。

// HTML
<select id="category">
<option value="electronics">電子產(chǎn)品</option>
<option value="clothing">服裝</option>
<option value="books">圖書</option>
</select>
<div id="products"></div>
// JavaScript
const select = document.getElementById("category");
const productsDiv = document.getElementById("products");
select.addEventListener("change", function() {
const category = select.value;
const url = "get_products.php?category=" + category;
fetch(url)
.then(response => response.json())
.then(data => {
// 處理返回的JSON數(shù)據(jù)
productsDiv.innerHTML = "";
data.forEach(product => {
const productDiv = document.createElement("div");
productDiv.textContent = product.name;
productsDiv.appendChild(productDiv);
});
});
});

在上述代碼中，我們首先創(chuàng)建了一個元素，其中包含了不同的產(chǎn)品分類選項。當用戶選擇一個不同的分類時，我們將通過發(fā)送一個AJAX請求來獲取相應分類的產(chǎn)品列表。請求的URL將包含一個查詢參數(shù)（category），以便服務器能夠根據(jù)用戶選擇向我們返回正確的數(shù)據(jù)。

當用戶選擇不同的分類時，我們添加了一個事件監(jiān)聽器（addEventListener），當

元素的值發(fā)生改變時，該事件被觸發(fā)。在事件處理程序內(nèi)部，我們首先獲取到用戶選擇的分類（category），然后創(chuàng)建一個URL，將分類作為查詢參數(shù)附加在URL后面。然后，我們使用fetch函數(shù)發(fā)送GET請求到服務器，并通過.then鏈式調(diào)用處理返回的響應。

fetch(url)
.then(response => response.json())
.then(data => {
// 處理返回的JSON數(shù)據(jù)
productsDiv.innerHTML = "";
data.forEach(product => {
const productDiv = document.createElement("div");
productDiv.textContent = product.name;
productsDiv.appendChild(productDiv);
});
});

在這段代碼中，我們首先使用response.json()方法來解析返回數(shù)據(jù)，并將其轉(zhuǎn)換為JavaScript對象。然后，我們通過第二個.then語句將處理返回的數(shù)據(jù)。在此示例中，我們簡單地將每個產(chǎn)品的名稱顯示為一個