AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術。在AJAX中，JSON（JavaScript Object Notation）被廣泛用來傳輸和交換數據。本文將介紹如何使用AJAX遍歷JSON數組和對象數組，并通過舉例來說明。

首先，讓我們看一個簡單的例子。假設我們有一個JSON數組，其中包含了幾本圖書的信息：

[
{
"title": "JavaScript: The Good Parts",
"author": "Douglas Crockford",
"price": 19.99
},
{
"title": "Eloquent JavaScript",
"author": "Marijn Haverbeke",
"price": 22.50
},
{
"title": "JavaScript: The Definitive Guide",
"author": "David Flanagan",
"price": 39.99
}
]

現在我們想要使用AJAX遍歷這個數組，并將每本書的標題顯示在網頁上。我們可以使用JavaScript的XMLHttpRequest對象來實現AJAX請求：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var books = JSON.parse(this.responseText);
var output = '';
for (var i = 0; i< books.length; i++) {
output += '<p>' + books[i].title + '</p>';
}
document.getElementById("book-list").innerHTML = output;
}
};
xhttp.open("GET", "books.json", true);
xhttp.send();

上面的代碼中，我們首先創建了一個XMLHttpRequest對象（在舊版瀏覽器中可能需要使用ActiveXObject）并設置onreadystatechange事件處理程序。當請求的狀態改變時，我們檢查readyState和status的值，當它們都為4和200時，表示請求已經完成成功。

接下來，我們使用JSON.parse方法將返回的字符串解析為JavaScript對象數組。然后，我們創建一個空的字符串變量output來存儲每本書的標題。

通過for循環，我們遍歷books數組，并將每本書的標題添加到output中，并用

標簽包裹起來。最后，我們使用getElementById方法獲取HTML元素，并將output賦值給該元素的innerHTML屬性，以在網頁上顯示書籍列表。

以上代碼假設我們的JSON數據保存在名為"books.json"的文件中。如果JSON數據是通過API返回的，我們需要將URL替換為API的地址。

接下來，讓我們看一個更復雜一些的例子。假設我們有一個JSON對象數組，其中的每個對象都表示一個學生的信息：

[
{
"name": "Alice",
"age": 18,
"grades": [85, 92, 78]
},
{
"name": "Bob",
"age": 20,
"grades": [76, 88, 91]
},
{
"name": "Carol",
"age": 19,
"grades": [90, 87, 95]
}
]

我們想要計算每個學生的平均分，并將姓名、年齡和平均分顯示在網頁上：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var students = JSON.parse(this.responseText);
var output = '';
for (var i = 0; i< students.length; i++) {
var total = 0;
for (var j = 0; j< students[i].grades.length; j++) {
total += students[i].grades[j];
}
var average = total / students[i].grades.length;
output += '<p>Name: ' + students[i].name + ', Age: ' + students[i].age + ', Average Grade: ' + average + '</p>';
}
document.getElementById("student-list").innerHTML = output;
}
};
xhttp.open("GET", "students.json", true);
xhttp.send();

在這個例子中，我們除了使用一個嵌套的for循環來計算每個學生的平均分，其他部分的操作與前面的例子相似。

通過以上兩個例子，我們可以看到如何使用AJAX遍歷JSON數組和對象數組，并將數據顯示在網頁上。這為我們實現了更加動態和交互的網頁應用程序提供了基礎。