AJAX是一種可以在不刷新整個頁面的情況下，從服務器異步加載數據的技術。在AJAX中，通常使用的是XMLHttpRequest對象來實現異步通信。然而，由于在處理大量數據時會導致延遲，所以在開發中通常需要一個進度條來顯示異步請求的進度。
在實現進度條功能時，可以使用AJAX的onprogress事件來監控請求的進度。onprogress事件會在請求接收到新數據時觸發，從而可以實時更新進度條的狀態。下面是一個簡單的示例，演示了如何使用onprogress事件來創建一個進度條。
<!DOCTYPE html><html><head><title>AJAX進度條演示</title><style>#progress-bar {
width: 300px;
height: 20px;
background-color: #f2f2f2;
margin-top: 10px;
}
#progress-bar-inner {
height: 100%;
background-color: #428bca;
width: 0%;
}
</style></head><body><h1>AJAX進度條演示</h1><div id="progress-bar"><div id="progress-bar-inner"></div></div><script>let progressBar = document.getElementById("progress-bar-inner");
function updateProgressBar(progress) {
progressBar.style.width = progress + "%";
}
let xhr = new XMLHttpRequest();
xhr.open("GET", "example.com/data", true);
xhr.onprogress = function(e) {
if (e.lengthComputable) {
let progress = Math.round((e.loaded / e.total) * 100);
updateProgressBar(progress);
}
};
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 處理響應數據
}
};
xhr.send();
</script></body></html>在上面的代碼中，我們首先創建了一個表示進度條的
元素，并設置其初始寬度為0%。然后，使用XMLHttpRequest對象發送一個GET請求到服務器，請求數據的URL為"example.com/data"。通過設置XMLHttpRequest對象的onprogress事件處理程序，我們可以在每次接收到新的數據時更新進度條的狀態。
在onprogress事件處理程序中，我們首先檢查e.lengthComputable屬性是否為true。如果為true，則表示可以獲得請求的總字節數。然后，我們計算并四舍五入百分比的進度，并將其傳遞給updateProgressBar函數，以更新進度條的寬度。
最后，我們在XMLHttpRequest對象的onreadystatechange事件處理程序中，檢查請求的readyState屬性是否等于4，并且狀態碼是否為200。這表示我們已經成功接收到服務器響應，并可以開始處理返回的數據。
通過使用onprogress事件，我們可以實時更新進度條的狀態，使用戶能夠看到異步請求的進度。這對于處理大量數據或需要較長時間的請求是非常有用的。正因為如此，AJAX的onprogress事件在Web開發中被廣泛應用。