AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網(wǎng)頁應(yīng)用程序的技術(shù)，它可以使網(wǎng)頁在不刷新的情況下向服務(wù)器發(fā)送請(qǐng)求，并接收服務(wù)器返回的數(shù)據(jù)。其中，獲取 JSON（JavaScript Object Notation）數(shù)據(jù)是 AJAX 中的一種常見需求，因?yàn)?JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式，易于閱讀和解析。在本文中，我們將詳細(xì)討論如何使用 AJAX 獲取 JSON 數(shù)據(jù)，并通過舉例說明其用法。

使用 AJAX 獲取 JSON 數(shù)據(jù)的第一步是創(chuàng)建 XMLHttpRequest 對(duì)象，它是現(xiàn)代瀏覽器提供的原生對(duì)象，用于在后臺(tái)與服務(wù)器進(jìn)行數(shù)據(jù)交換。通過 XMLHttpRequest 對(duì)象，可以發(fā)送請(qǐng)求并處理服務(wù)器返回的響應(yīng)。

var xhr = new XMLHttpRequest();

接下來，通過 open() 方法指定請(qǐng)求的類型（GET/POST）以及服務(wù)器端的地址。例如，我們要獲取一個(gè)存儲(chǔ)在服務(wù)器上的名為 "data.json" 的 JSON 文件，可以使用以下代碼：

xhr.open("GET", "data.json", true);

在上述代碼中，第一個(gè)參數(shù)指定請(qǐng)求的類型為 GET，第二個(gè)參數(shù)是要獲取的文件地址，第三個(gè)參數(shù)表示請(qǐng)求是異步的（true）還是同步的（false）。

然后，使用 setRequestHeader() 方法設(shè)置請(qǐng)求頭。通常情況下，不需要設(shè)置請(qǐng)求頭，因?yàn)闉g覽器會(huì)自動(dòng)設(shè)置適當(dāng)?shù)恼?qǐng)求頭。不過，在某些情況下，你可能需要設(shè)置特定的請(qǐng)求頭，例如指定"Content-Type"為"application/json"。

xhr.setRequestHeader("Content-Type", "application/json");

接下來，通過定義 onreadystatechange 事件處理程序來處理服務(wù)器返回的響應(yīng)。該事件在 readyState 屬性發(fā)生變化時(shí)觸發(fā)，表示請(qǐng)求的當(dāng)前狀態(tài)。例如，當(dāng) readyState 的值為 4 時(shí)，表示請(qǐng)求已完成，可以處理服務(wù)器的響應(yīng)。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
// 這里可以處理服務(wù)器返回的 JSON 數(shù)據(jù)
}
};

在上述代碼中，我們首先使用 readyState 屬性檢查請(qǐng)求的當(dāng)前狀態(tài)。當(dāng) readyState 為 4 時(shí)，表示請(qǐng)求已完成。然后，通過 status 屬性檢查 HTTP 狀態(tài)碼。當(dāng) status 為 200 時(shí)，表示請(qǐng)求成功。在實(shí)際應(yīng)用中，可以根據(jù)不同的狀態(tài)碼執(zhí)行相應(yīng)的操作。

最后一步是通過 send() 方法發(fā)送請(qǐng)求。對(duì)于 GET 請(qǐng)求，不需要傳遞任何參數(shù)，直接調(diào)用 send() 方法即可。對(duì)于 POST 請(qǐng)求，可以將參數(shù)以字符串形式傳遞給 send() 方法，例如："name=abc&age=18"。

xhr.send();

通過上述步驟，我們可以成功發(fā)送請(qǐng)求并獲取服務(wù)器返回的 JSON 數(shù)據(jù)。接下來，我們通過一個(gè)具體的例子來演示 AJAX 獲取 JSON 數(shù)據(jù)的完整過程。

假設(shè)我們有一個(gè)名為 "data.json" 的文件，內(nèi)容如下：

{
"name": "John",
"age": 25,
"city": "New York"
}

現(xiàn)在我們希望使用 AJAX 獲取這個(gè)文件中的數(shù)據(jù)，并在網(wǎng)頁上顯示出來?？梢酝ㄟ^以下代碼實(shí)現(xiàn)：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseData = JSON.parse(xhr.responseText);
document.getElementById("name").innerHTML = responseData.name;
document.getElementById("age").innerHTML = responseData.age;
document.getElementById("city").innerHTML = responseData.city;
}
};
xhr.send();

在上述代碼中，我們首先通過 getElementById() 方法獲取網(wǎng)頁上的元素，并將服務(wù)器返回的 JSON 數(shù)據(jù)分別賦值給這些元素的 innerHTML 屬性。通過這種方式，我們可以將 JSON 數(shù)據(jù)顯示在網(wǎng)頁上。

通過本文的介紹，我們了解了如何使用 AJAX 獲取 JSON 數(shù)據(jù)，并通過舉例說明了其具體用法。通過 AJAX 和 JSON 的結(jié)合，我們可以更輕松地實(shí)現(xiàn)網(wǎng)頁與服務(wù)器的數(shù)據(jù)交換，為用戶提供更好的交互體驗(yàn)。