AJAX（Asynchronous JavaScript And XML）是一種用于創建交互式網頁應用程序的技術。它允許網頁通過異步通信獲取服務器上的數據，然后在不刷新整個頁面的情況下動態更新網頁的內容。在本篇文章中，我們將討論如何使用AJAX技術來顯示和格式化數組數據。

在實際的開發中，我們經常需要從服務器獲取數組數據，并在網頁中顯示出來。假設我們有一個包含學生姓名和成績的數組：

var students = [
{ name: "Tom", score: 85 },
{ name: "Alice", score: 92 },
{ name: "Bob", score: 78 }
];

首先，我們需要使用AJAX技術來請求服務器上的數據。這可以通過XMLHttpRequest對象來實現：

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.php", true);
xhr.send();

上面的例子中，我們使用GET方法發送一個請求到"data.php"這個URL，最后一行代碼將請求發送到服務器。一旦服務器返回響應，我們可以使用AJAX的回調函數來處理返回的數據：

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayData(response);
}
}
}

在回調函數中，我們首先檢查readyState屬性的值是否是XMLHttpRequest.DONE。這個值表示請求的狀態，當它等于4時表示請求完成。然后我們再次檢查status屬性的值是否是200，這表示請求成功。

一旦數據被成功返回，我們可以使用JavaScript來格式化和顯示數據。例如，在上面的例子中，我們可以創建一個函數來遍歷數據并將其顯示在網頁上：

function displayData(data) {
var html = "";
for (var i = 0; i < data.length; i++) {
var student = data[i];
html += "<p>Name: " + student.name + ", Score: " + student.score + "</p>";
}
document.getElementById("data-container").innerHTML = html;
}

在displayData函數中，我們使用一個循環來遍歷數據，并將每個學生的姓名和成績拼接成一個HTML字符串，并將其附加到一個ID為"data-container"的HTML元素中。這樣，當displayData函數被調用時，網頁上的"data-container"元素就會顯示格式化后的數組數據。

總之，使用AJAX技術來顯示和格式化數組數據非常簡單。通過發送異步請求到服務器獲取數據，并使用回調函數處理返回的數據，我們可以動態更新網頁上的內容。然后，通過JavaScript編寫適當的代碼來格式化數據并將其顯示在網頁中即可。這使得我們能夠以更直觀的方式展示數據，并提供更好的用戶體驗。