AJAX（Asynchronous JavaScript and XML）是一種無需刷新整個(gè)頁面即可與服務(wù)器進(jìn)行數(shù)據(jù)交互的技術(shù)。它能夠?qū)崿F(xiàn)異步加載數(shù)據(jù)，提高用戶的體驗(yàn)和頁面的效率。本文將介紹如何使用AJAX接收數(shù)組JSON數(shù)據(jù)，并通過舉例說明其應(yīng)用場(chǎng)景和使用方式。

在前端開發(fā)中，經(jīng)常會(huì)遇到需要從服務(wù)器獲取數(shù)組類型的JSON數(shù)據(jù)的情況。假設(shè)我們正在開發(fā)一個(gè)電商網(wǎng)站，在商品詳情頁中需要展示當(dāng)前商品的評(píng)價(jià)信息，包括評(píng)價(jià)內(nèi)容和評(píng)分。服務(wù)器返回的數(shù)據(jù)格式如下：

[
{
"content": "這個(gè)商品真棒！買了好幾次了。",
"rating": 5
},
{
"content": "質(zhì)量不錯(cuò)，物超所值。",
"rating": 4
},
{
"content": "不太滿意，退貨了。",
"rating": 2
}
]

要使用AJAX接收數(shù)組JSON數(shù)據(jù)，我們首先需要?jiǎng)?chuàng)建一個(gè)XMLHttpRequest對(duì)象，用于與服務(wù)器進(jìn)行通信。然后，通過調(diào)用XMLHttpRequest.open()方法設(shè)置HTTP請(qǐng)求方式和服務(wù)器地址。接下來，通過調(diào)用XMLHttpRequest.send()方法發(fā)送請(qǐng)求。當(dāng)服務(wù)器返回響應(yīng)時(shí)，我們可以通過調(diào)用XMLHttpRequest.responseText屬性獲取響應(yīng)的內(nèi)容。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/reviews', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};

上述代碼示例中，我們使用GET請(qǐng)求方式向服務(wù)器發(fā)送了一個(gè)請(qǐng)求，地址為/api/reviews。當(dāng)服務(wù)器返回響應(yīng)時(shí)，我們通過JSON.parse()方法將響應(yīng)的內(nèi)容解析為JavaScript對(duì)象，然后可以對(duì)其進(jìn)行處理。在這個(gè)例子中，我們將響應(yīng)打印到控制臺(tái)上。

在實(shí)際開發(fā)中，我們可以根據(jù)接收到的數(shù)組JSON數(shù)據(jù)，動(dòng)態(tài)渲染頁面內(nèi)容。繼續(xù)以商品評(píng)價(jià)信息為例，我們可以通過遍歷數(shù)組JSON數(shù)據(jù)，將每個(gè)評(píng)價(jià)顯示在頁面上：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/reviews', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
var response = JSON.parse(xhr.responseText);
var reviewsContainer = document.getElementById('reviews');
for (var i = 0; i < response.length; i++) {
var review = response[i];
var reviewElement = document.createElement('div');
reviewElement.innerHTML = '<p>評(píng)價(jià)內(nèi)容：' + review.content + '</p><p>評(píng)分：' + review.rating + '</p>';
reviewsContainer.appendChild(reviewElement);
}
}
};

在上述代碼示例中，我們通過遍歷數(shù)組JSON數(shù)據(jù)，創(chuàng)建一個(gè)包含評(píng)價(jià)內(nèi)容和評(píng)分的div元素，然后將其添加到頁面上的reviews容器中。這樣，每個(gè)評(píng)價(jià)信息都會(huì)以指定的格式顯示在頁面上。

通過上述示例，我們可以看到AJAX接收數(shù)組JSON數(shù)據(jù)的過程：創(chuàng)建XMLHttpRequest對(duì)象，發(fā)送請(qǐng)求，解析響應(yīng)數(shù)據(jù)，并對(duì)其進(jìn)行處理。這種方式使得我們能夠異步加載數(shù)據(jù)，提高了網(wǎng)頁的性能和用戶體驗(yàn)，尤其在需要實(shí)時(shí)更新數(shù)據(jù)的場(chǎng)景下，AJAX能夠發(fā)揮重要作用。