AJAX（Asynchronous JavaScript and XML）是一種在Web頁面中實現異步數據交互的技術。它能夠在不刷新頁面的情況下向服務器發送請求，并接收服務器返回的數據進行處理。在網頁上傳圖片的場景中，使用AJAX循環發送上傳圖片請求可以大大提升用戶體驗。本文將以一個上傳相冊照片的例子來詳細介紹如何使用AJAX循環發送上傳圖片請求，并通過實例演示其優勢。通過本文的學習，您將對AJAX發送上傳圖片請求有更深入的理解。

假設我們有一個相冊網站，用戶可以在網站上創建相冊，并為每個相冊添加多個照片。為了方便用戶的操作，我們添加了批量上傳照片的功能。用戶可以通過選擇多個照片文件，點擊上傳按鈕，將這些照片一次性上傳到服務器，并自動添加到相冊中。傳統的做法是用戶選擇完所有文件后一次性將它們上傳到服務器。這樣做的問題是，如果用戶選擇的照片文件較多，文件較大，上傳時間會很長，用戶在等待的過程中無法進行其他操作。

為了解決上述問題，我們可以使用AJAX循環發送上傳圖片請求的方式。具體實現步驟如下：

function uploadPhotos(photos) {
for (var i = 0; i < photos.length; i++) {
var formData = new FormData();
formData.append('file', photos[i]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log('Photo uploaded successfully');
} else {
console.log('Photo upload failed');
}
};
xhr.send(formData);
}
}

上述代碼中，我們定義了一個名為uploadPhotos的函數，它接收一個參數photos，代表用戶選擇的照片文件。在函數內部，我們使用for循環遍歷這些照片文件，對每個照片文件都發送一次AJAX請求。

對于每個照片文件，我們首先創建一個FormData對象，并將照片文件添加到該對象中。然后，我們創建一個XMLHttpRequest對象，并通過open方法指定請求方法、請求地址和是否異步。接著，我們定義了一個onload事件處理函數，用來處理AJAX請求完成后的邏輯。在該函數內部，我們通過xhr.status判斷請求是否成功，并在控制臺輸出相應信息。

使用AJAX循環發送上傳圖片請求的優勢在于，用戶可以在上傳過程中進行其他操作，避免了等待大量照片上傳完成的情況。同時，因為每次只上傳一個照片文件，可以控制每次請求的大小，減少服務器壓力。此外，在某個照片上傳失敗時，用戶可以及時得到反饋，提高了用戶體驗。

通過本文的介紹和實例演示，我們了解了如何使用AJAX循環發送上傳圖片請求，并了解了其優勢。在實際開發中，可以根據具體場景對代碼進行適當的改進和優化。希望本文對您有所幫助，能夠更好地運用AJAX技術提升網站的交互體驗。