隨著互聯網的快速發展，越來越多的網站和應用程序開始使用Ajax技術來提供更加流暢和用戶友好的交互體驗。其中，使用Ajax下載文件已經成為常見的功能之一。然而，當下載大文件或者網絡環境較差時，用戶通常希望能夠看到文件下載的進度條或者實時的下載百分比。本文將介紹如何使用Ajax下載文件并顯示下載進度的方法，以及一些常見的示例。

1. XMLHttpRequest對象的使用

要實現Ajax文件下載并顯示進度，我們首先需要使用XMLHttpRequest對象。這個對象是現代瀏覽器提供的一種API，可以在后臺與服務器進行數據交換。它支持異步通信，可以在不刷新頁面的情況下更新頁面的內容。以下是一個使用XMLHttpRequest對象下載文件的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/download/file.pdf', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = new Blob([this.response], {type: 'application/pdf'});
var downloadUrl = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = downloadUrl;
a.download = 'file.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
};
xhr.send();

在這個示例中，我們創建了一個XMLHttpRequest對象，并使用open方法指定了下載文件的URL。我們還設置了responseType屬性為'blob'，這樣下載的文件將以Blob對象的形式返回給我們。在請求完成后，我們通過創建一個a標簽，并設置其href屬性為Blob對象的URL，來實現文件的下載。

2. 監聽下載進度

為了顯示文件的下載進度，我們需要對XMLHttpRequest對象的progress事件進行監聽。每當數據從服務器傳輸到客戶端時，這個事件將被觸發。以下是一個監聽下載進度并顯示百分比的示例：

xhr.onprogress = function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded / e.total) * 100);
console.log(percentage + '% completed');
}
};

在這個示例中，我們通過計算已下載數據和總數據的比例，來得到下載的百分比。然后，我們將百分比輸出到控制臺。你可以根據自己的需求，將百分比顯示在頁面的某個元素或者進度條上。

3. 利用第三方庫的幫助

如果你覺得使用純JavaScript來實現文件下載和顯示進度過于繁瑣，你還可以借助一些強大的第三方庫來簡化你的工作。其中，Axios是一個很受歡迎的HTTP客戶端庫，它提供了更加簡潔和易用的API。以下是一個使用Axios庫下載文件并顯示進度的示例：

axios({
method: 'get',
url: 'http://example.com/download/file.pdf',
responseType: 'blob',
onDownloadProgress: function(progressEvent) {
if (progressEvent.lengthComputable) {
var percentage = Math.round((progressEvent.loaded / progressEvent.total) * 100);
console.log(percentage + '% completed');
}
}
})
.then(function(response) {
var downloadUrl = URL.createObjectURL(new Blob([response.data]));
var a = document.createElement('a');
a.href = downloadUrl;
a.download = 'file.pdf';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});

在這個示例中，我們使用Axios庫來發送HTTP請求，并使用onDownloadProgress選項設置下載進度的回調函數。在請求完成后，我們將文件下載到本地，并實現文件下載。

結論

通過使用Ajax技術，我們可以實現文件下載并顯示下載進度。在本文中，我們介紹了使用XMLHttpRequest對象和Axios庫來下載文件的方法，并展示了如何監聽下載進度。無論是使用純JavaScript還是借助第三方庫，你都可以根據自己的需求，選擇最適合的方法來實現文件下載和顯示進度。