AJAX技術在現代web開發中起到了非常重要的作用。它能夠實現頁面的部分刷新，無需重新加載整個頁面，從而提升用戶體驗。其中一個常見的應用場景是在發送請求時顯示進度條，以告知用戶請求的進展情況。本文將介紹如何使用AJAX技術實現這一功能，并給出一些具體的代碼示例。

在實際的開發中，我們經常會遇到需要發送大量數據的請求，例如上傳文件或者執行耗時較長的操作。這時候顯示一個進度條可以讓用戶清晰地了解請求的進展情況，避免用戶過長時間的等待。下面以上傳文件為例，演示如何使用AJAX來實現文件上傳進度條。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log(percent + '% uploaded');
// 更新進度條的顯示
}
};
xhr.onload = function() {
// 文件上傳完成后的處理
};
xhr.send(formData);

上述代碼中，我們使用了XMLHttpRequest對象來發送AJAX請求。在上傳過程中，通過監聽xhr.upload對象的progress事件，我們可以獲取到已上傳的文件大小和總文件大小，從而計算出上傳的百分比，并更新進度條的顯示。

另一個常見的應用是在執行耗時較長的操作時顯示進度條。例如，在網頁中發送一個AJAX請求，執行一些復雜的數據處理操作，然后將處理結果展示給用戶。下面的示例代碼演示了如何使用AJAX來執行這樣的操作。

var xhr = new XMLHttpRequest();
xhr.open('POST', '/process', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理結果
}
};
xhr.send(data);
// 顯示進度條
showProgressBar();
function showProgressBar() {
var progressBar = document.createElement('div');
progressBar.style.width = '0%';
progressBar.innerText = '0%';
document.body.appendChild(progressBar);
var intervalId = setInterval(function() {
var width = parseInt(progressBar.style.width) + 1;
progressBar.style.width = width + '%';
progressBar.innerText = width + '%';
if (width >= 100) {
clearInterval(intervalId);
progressBar.parentNode.removeChild(progressBar);
}
}, 100);
}

上述代碼中，我們先創建一個進度條元素，并將其添加到頁面中。然后使用setInterval函數定時更新進度條的顯示，直到進度條達到100%時清除定時器，并將進度條元素從頁面中移除。

總結來說，使用AJAX技術可以輕松地實現在發送請求過程中顯示進度條的功能。通過監聽相關事件，我們可以獲取到請求的進展情況，并及時更新進度條的顯示。這種交互方式讓用戶能夠清晰地了解請求的進程，提升了用戶體驗。以上所述只是AJAX技術在顯示進度條中的一個應用示例，實際使用時還可以根據具體需求進行進一步的擴展和優化。