AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的技術(shù)。它的特點(diǎn)是可以在不刷新整個(gè)頁(yè)面的情況下，與服務(wù)器進(jìn)行異步的數(shù)據(jù)交換。在開(kāi)發(fā)中，我們經(jīng)常需要獲取和解析 JSON（JavaScript Object Notation）格式的數(shù)據(jù)。本文將介紹如何使用 AJAX 獲取并解析 JSON 格式的數(shù)據(jù)。

假設(shè)我們有一個(gè)簡(jiǎn)單的 JSON 數(shù)據(jù)，如下所示：

{
"name": "張三",
"age": 25,
"address": "上海"
}

我們希望通過(guò) AJAX 請(qǐng)求獲取這個(gè) JSON 數(shù)據(jù)，并解析出其中的 name、age 和 address 數(shù)據(jù)。首先，我們需要使用 XMLHttpRequest 對(duì)象創(chuàng)建一個(gè) HTTP GET 請(qǐng)求，指定請(qǐng)求的 URL。然后，我們將設(shè)置一個(gè)回調(diào)函數(shù)，當(dāng)請(qǐng)求完成時(shí)，該函數(shù)將被調(diào)用。

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析 JSON 數(shù)據(jù)
var data = JSON.parse(xhr.responseText);
// 獲取 name、age 和 address 數(shù)據(jù)
var name = data.name;
var age = data.age;
var address = data.address;
// 打印數(shù)據(jù)
console.log("姓名：" + name);
console.log("年齡：" + age);
console.log("地址：" + address);
}
};
xhr.send();

在以上代碼中，我們首先創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象，然后調(diào)用 open 方法來(lái)指定請(qǐng)求的類(lèi)型、URL 和是否異步。接下來(lái)，我們?cè)O(shè)置了 onreadystatechange 回調(diào)函數(shù)，在請(qǐng)求狀態(tài)變化時(shí)執(zhí)行。在回調(diào)函數(shù)中，我們首先判斷請(qǐng)求狀態(tài)是否為 4（已完成），并且狀態(tài)碼是否為 200（成功）。如果滿(mǎn)足條件，我們將使用 JSON.parse 方法解析 返回的 JSON 數(shù)據(jù)，并將其存儲(chǔ)在 data 變量中。然后，我們可以通過(guò) data 對(duì)象的屬性來(lái)獲取所需的數(shù)據(jù)，并進(jìn)行相應(yīng)的操作。

假設(shè)我們的 JSON 數(shù)據(jù)是一個(gè)數(shù)組，如下所示：

[
{
"name": "張三",
"age": 25,
"address": "上海"
},
{
"name": "李四",
"age": 30,
"address": "北京"
}
]

在這種情況下，我們需要對(duì)返回的 JSON 數(shù)據(jù)進(jìn)行遍歷，并解析每個(gè)數(shù)組元素的屬性。以下是一個(gè)修改后的示例代碼：

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析 JSON 數(shù)據(jù)
var data = JSON.parse(xhr.responseText);
for (var i = 0; i < data.length; i++) {
// 獲取 name、age 和 address 數(shù)據(jù)
var name = data[i].name;
var age = data[i].age;
var address = data[i].address;
// 打印數(shù)據(jù)
console.log("姓名：" + name);
console.log("年齡：" + age);
console.log("地址：" + address);
}
}
};
xhr.send();

在以上代碼中，我們將返回的 JSON 數(shù)據(jù)解析為一個(gè)數(shù)組，并使用 for 循環(huán)對(duì)數(shù)組進(jìn)行遍歷。在循環(huán)中，我們可以像之前一樣通過(guò)屬性來(lái)獲取每個(gè)數(shù)組元素的數(shù)據(jù)，并對(duì)其進(jìn)行相應(yīng)的處理。

通過(guò)以上示例，我們可以看到使用 AJAX 獲取并解析 JSON 數(shù)據(jù)是一種非常常見(jiàn)的任務(wù)。通過(guò)這種方式，我們可以向服務(wù)器發(fā)送請(qǐng)求，獲取所需的數(shù)據(jù)，并在客戶(hù)端進(jìn)行處理和展示。