AJAX 是一種在網頁中進行異步數據交換的技術，能夠在不重新加載整個頁面的情況下更新特定部分的內容。在某些情況下，我們可能需要在進行文件下載的同時顯示下載進度。本文將介紹如何使用 AJAX 設置下載進度，以及一些實例的說明。

在使用 AJAX 進行文件下載時，我們可以利用瀏覽器的 File API 中的相應方法來獲取下載文件的大小，并通過 AJAX 請求的進度事件來更新下載進度。下面是一個簡單的示例，以下載圖片為例：

const xhr = new XMLHttpRequest();
const url = 'https://example.com/image.jpg';
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onloadstart = function() {
console.log('下載開始');
};
xhr.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log('下載進度：' + percentComplete + '%');
}
};
xhr.onload = function() {
if (xhr.status === 200) {
const blob = xhr.response;
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
console.log('下載完成');
}
};
xhr.onerror = function() {
console.log('下載出錯');
};
xhr.send();

在上面的代碼中，首先創建一個 XMLHttpRequest 對象，然后打開一個以 GET 方式請求指定 URL 的鏈接。將 responseType 設置為 'blob'，表示希望以二進制形式接收響應數據。接著，分別設置 onloadstart、onprogress、onload 和 onerror 事件的處理函數。在 onprogress 事件的處理函數中，我們可以通過 event.loaded 和 event.total 屬性計算并顯示下載進度。在 onload 事件的處理函數中，我們通過將響應數據轉換為 Blob 對象，并創建一個 img 元素來顯示下載的圖片。最后，將請求發送到服務器。

除了上面的示例之外，我們還可以使用第三方 JavaScript 庫來實現下載進度的顯示。如下所示，我們使用 axios 庫來發送 AJAX 請求并顯示下載進度：

axios({
url: 'https://example.com/image.jpg',
method: 'GET',
responseType: 'blob',
onDownloadProgress: function(progressEvent) {
const percentComplete = (progressEvent.loaded / progressEvent.total) * 100;
console.log('下載進度：' + percentComplete + '%');
}
}).then(function(response) {
const blob = response.data;
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.body.appendChild(img);
console.log('下載完成');
}).catch(function() {
console.log('下載出錯');
});

在上面的代碼中，我們使用 axios 發送 AJAX 請求，并通過設置 onDownloadProgress 選項來監聽下載進度。在 onDownloadProgress 回調函數中，我們可以獲取并計算下載進度，并進行相應的處理。在請求完成后，我們可以將響應數據轉換為 Blob 對象，并創建一個 img 元素來顯示下載的圖片。

總的來說，我們可以通過 AJAX 設置下載進度，以實現在進行文件下載時顯示下載進度。無論是使用原生的 XMLHttpRequest 對象，還是借助第三方庫，都可以輕松地實現這一功能，為網頁增添更好的用戶體驗。