AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上異步獲取數據并更新部分頁面內容的技術。在前端開發中，經常需要獲取 JSON 數組對象，并對其進行處理和展示。本文將介紹如何使用 AJAX 來獲取 JSON 數組對象，并通過舉例說明其用法和優勢。

獲取 JSON 數組對象的方法

在 AJAX 中，我們可以通過使用 XMLHttpRequest 對象來獲取 JSON 數組對象。該對象提供了一組用于發送請求和獲取響應的方法和屬性。我們可以使用其中的 open() 方法來指定請求的類型（GET、POST等）和 URL（請求地址），然后使用 send() 方法來發送請求。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json', true);
xhr.send();

上述代碼中，我們通過 GET 請求方式從 'https://example.com/data.json' 地址獲取 JSON 數據。當請求發送完成后，我們可以通過監聽 XMLHttpRequest 對象的 onreadystatechange 事件來處理返回的數據。

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var jsonArr = JSON.parse(xhr.responseText);
console.log(jsonArr);
}
};

上述代碼中，我們通過監聽 onreadystatechange 事件并檢查 readyState 和狀態碼來確保請求已完成且成功返回。然后，我們使用 JSON.parse() 方法將 JSON 字符串解析為 JSON 數組對象，并將其存儲在變量 jsonArr 中。可以根據實際需求對其進行進一步處理和展示。

舉例說明

假設我們正在開發一個電影信息網站，需要從后端獲取電影數據并展示在頁面上。我們可以通過 AJAX 來獲取后端返回的 JSON 數組對象并展示相關信息。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/movies.json', true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var movies = JSON.parse(xhr.responseText);
var moviesList = document.getElementById('movies-list');
movies.forEach(function(movie) {
var listItem = document.createElement('li');
listItem.innerHTML = movie.title + ' - ' + movie.year;
moviesList.appendChild(listItem);
});
}
};

上述代碼中，我們從 'https://example.com/movies.json' 地址獲取電影數據，并在請求成功后，遍歷 JSON 數組對象 movies，并以列表形式展示在 id 為 'movies-list' 的元素中。

AJAX 的優勢

AJAX 通過異步獲取數據，使得頁面可以在后臺獲取數據的同時進行其他操作，提高了用戶體驗。同時，JSON 數組對象作為一種輕量級的數據格式，具有解析快、易讀寫等優點。結合 AJAX，我們可以靈活地獲取 JSON 數組對象，并對其進行處理和展示。

綜上所述，通過 AJAX 獲取 JSON 數組對象是一種常見的前端開發需求。我們可以使用 XMLHttpRequest 對象發送異步請求，然后通過監聽 onreadystatechange 事件來處理返回的 JSON 數據。通過合理地運用 AJAX 和 JSON，我們可以實現豐富多樣的交互和展示效果。