親愛的讀者們，今天我們要聚焦討論的話題是關于使用AJAX接收JSON數據。AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行數據交換的技術，可以實現異步加載數據，提高網頁的用戶體驗。而JSON（JavaScript Object Notation）是一種輕量級的數據交換格式，常用于前端與后端之間的數據傳輸。結合AJAX和JSON，我們可以實現實時的數據交互和頁面更新。接下來，我們將通過舉例來詳細說明使用AJAX接收JSON數據的過程。

假設我們正在開發一個電商網站，需要實時顯示商品的價格和庫存信息。為了避免每次刷新頁面都要重新加載整個頁面的問題，我們可以使用AJAX來實現動態地獲取最新的商品信息。當用戶選擇了某個商品或者修改了商品的數量時，我們可以通過AJAX請求向服務器發送一個請求，并返回一個包含最新信息的JSON數據。而后，我們可以使用JavaScript解析這個JSON數據，再使用DOM操作來更新頁面中的價格和庫存信息。

$.ajax({
url: "getProductInfo.php",
type: "GET",
dataType: "json",
data: {productId: 12345},
success: function(response) {
// 解析JSON數據，并更新頁面中的價格和庫存信息
var price = response.price;
var stock = response.stock;
document.getElementById("price").innerHTML = price;
document.getElementById("stock").innerHTML = stock;
}
});

在上述例子中，我們使用了jQuery.ajax()方法來發送AJAX請求。其中，url參數指定了請求的地址，type參數指定了請求的類型，dataType參數指定了服務器返回的數據類型，data參數指定了請求的附加數據。當服務器成功返回JSON數據時，success回調函數會被調用。在這個函數中，我們可以得到服務器返回的JSON數據，進而解析其中的價格和庫存信息，并使用DOM操作來更新頁面中相應的元素。

除了使用jQuery的AJAX方法，我們也可以使用原生的XMLHttpRequest對象來發送AJAX請求。下面是一個使用原生AJAX的示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "getProductInfo.php?productId=12345", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var price = response.price;
var stock = response.stock;
document.getElementById("price").innerHTML = price;
document.getElementById("stock").innerHTML = stock;
}
};
xhr.send();

在這個例子中，我們使用XMLHttpRequest對象創建了一個AJAX請求。open()方法設置了請求的類型和地址，onreadystatechange事件監聽請求狀態的變化，并在狀態為完成（readyState為4）且響應狀態碼為200時處理返回的JSON數據。通過JSON.parse()方法解析服務器返回的JSON數據，并更新頁面中的價格和庫存信息。

總而言之，使用AJAX接收JSON數據可以使我們的網頁更加動態和實時。我們可以通過AJAX請求服務器返回最新的數據，并使用JSON.parse()方法解析這些JSON數據。然后，我們可以使用DOM操作來更新頁面中的元素，從而實現數據的實時顯示和交互。希望通過本文的介紹和示例，讀者們對于使用AJAX接收JSON數據有了更加全面和深入的理解。