AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個網頁的情況下，通過后臺與服務器進行異步通訊的技術。在前端開發中，經常需要遍歷處理JSON數組來展示數據或進行其他操作。本文將介紹如何通過AJAX循環遍歷JSON數組，以及一些實際應用的示例。

首先，讓我們先來看一個簡單的例子。假設我們有一個保存學生信息的JSON數組，形式如下：

[
{
"name": "張三",
"age": 18,
"gender": "男",
"score": 90
},
{
"name": "李四",
"age": 20,
"gender": "女",
"score": 85
},
{
"name": "王五",
"age": 19,
"gender": "男",
"score": 95
}
]

我們可以通過AJAX請求獲取該JSON數組，并使用JavaScript循環遍歷每個學生的信息。

$.ajax({
url: "students.json",
dataType: "json",
success: function(data) {
// 循環遍歷JSON數組
for (var i = 0; i < data.length; i++) {
var student = data[i];
console.log("姓名：" + student.name);
console.log("年齡：" + student.age);
console.log("性別：" + student.gender);
console.log("分數：" + student.score);
console.log("------------------");
}
}
});

在上面的例子中，我們使用了jQuery的$.ajax函數進行異步請求，設置dataType為json，表示返回的數據類型為JSON。當請求成功后，我們通過success函數中的data參數獲取到了JSON數組。接著，在for循環中遍歷了數組中的每個學生對象，并將其信息輸出到控制臺中。

上面的例子只是展示了AJAX循環遍歷JSON數組的基本方法。下面，讓我們來看一些更實際的應用場景。

假設我們有一個任務列表的JSON數組，每個任務對象包含任務的標題和描述。我們希望在頁面上展示這些任務，并且能夠根據用戶的操作來切換任務的狀態。以下是該場景的代碼示例：

$.ajax({
url: "tasks.json",
dataType: "json",
success: function(data) {
var taskList = $("#task-list");
// 清空任務列表
taskList.empty();
// 循環遍歷JSON數組
for (var i = 0; i < data.length; i++) {
var task = data[i];
var taskItem = $("<div>").addClass("task-item");
var title = $("<h3>").text(task.title);
var description = $("<p>").text(task.description);
var status = $("<p>").text("狀態：" + task.status);
var checkbox = $("<input>").attr("type", "checkbox");
// 監聽復選框的狀態改變事件
checkbox.on("change", function() {
if ($(this).prop("checked")) {
task.status = "已完成";
status.text("狀態：" + task.status);
} else {
task.status = "未完成";
status.text("狀態：" + task.status);
}
});
taskItem.append(title, description, status, checkbox);
taskList.append(taskItem);
}
}
});

在上面的例子中，我們首先找到一個id為"task-list"的元素，這是我們用來展示任務列表的容器。在成功請求返回JSON數組后，我們先清空任務列表。接著，我們循環遍歷JSON數組，并根據每個任務對象創建相應的HTML元素。我們為每個任務添加了一個復選框，當復選框的狀態改變時，我們通過事件監聽函數來更新任務的狀態，并同時更新頁面上對應的狀態標簽。

通過以上例子，我們了解了如何使用AJAX循環遍歷JSON數組，并在頁面上展示數據或進行其他操作。希望本文能對你的前端開發工作有所幫助。