AJAX是一種用于在不刷新整個頁面的情況下更新部分頁面內容的技術。它通過在后臺與服務器進行數據交換來實現這一目的，使用戶能夠在不中斷當前頁面的情況下執行一些操作。其中一個常見的應用場景就是通過AJAX進行文件下載。通過AJAX無刷新下載文件，用戶可以在下載文件的同時繼續瀏覽原網頁，提升了用戶體驗。
假設我們有一個網站，用戶可以在該網站上下載一些文檔來瀏覽。傳統的下載方式會導致整個頁面刷新，用戶體驗較差。為了改善這個問題，我們可以使用AJAX技術來實現無刷新下載文件的功能。
首先，我們需要在頁面中創建一個下載按鈕，用戶點擊該按鈕后觸發下載操作：
然后，編寫JavaScript函數downloadFile()來處理下載文件的請求：
function downloadFile() {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'download.php', true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
let filename = xhr.getResponseHeader('Content-Disposition');
let contentType = xhr.getResponseHeader('Content-Type');
let blob = new Blob([xhr.response], { type: contentType });
let downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = filename;
downloadLink.click();
}
};
xhr.send();
}在這段代碼中，我們創建了一個XMLHttpRequest對象xhr，并使用open()方法來配置請求的URL和方法。我們將請求的響應類型設置為blob，以便我們能夠處理文件的二進制數據。接下來，我們定義了onload事件處理函數，該函數在請求成功完成后被調用。在該事件處理函數中，我們首先檢查響應的狀態碼是否為200，表示請求成功。然后，我們從響應的頭部中獲取文件名和內容類型，并將響應的二進制數據打包成Blob對象。最后，我們創建一個鏈接元素<a>并設置其href屬性為打包后的文件鏈接，download屬性為文件名，然后模擬用戶點擊該鏈接來觸發文件的下載。
為了讓服務器能夠處理下載文件的請求，我們需要創建一個名為download.php的服務器端腳本。在該腳本中，我們可以指定要下載的文件，并將其發送給客戶端：
在這個簡單的PHP腳本中，我們指定了要下載的文件路徑并將文件發送給客戶端。我們還通過設置響應的頭部來指定文件在客戶端的下載方式。在本例中，我們將文件名和內容類型設置為path/to/file.pdf和application/pdf。
通過以上的代碼及教程，我們實現了通過AJAX無刷新下載文件的功能。當用戶點擊下載按鈕時，文件將被發送給客戶端進行下載，而用戶可以繼續瀏覽當前頁面，無需等待整個頁面的刷新。這種技術不僅提高了用戶體驗，還能優化服務器和網絡資源的利用率。