AJAX（Asynchronous JavaScript and XML）是一種在網頁上與服務器進行異步數據交互的技術，它可以在不刷新整個頁面的情況下更新部分網頁內容。在實際開發中，我們經常需要獲取請求的進度，以便提供更好的用戶體驗。本文將介紹如何使用AJAX獲取請求進度，并通過舉例詳細說明其工作原理和使用方法。

要獲取AJAX請求的進度，我們需要使用XMLHttpRequest對象。該對象提供了一套可以監測AJAX請求進度的方法和屬性。其中，onprogress事件可以實時獲取XHR對象的進度信息。通過獲取已下載的字節數和總字節數之間的比例，我們可以計算出當前的請求進度。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/data', true);
xhr.onprogress = function(event) {
var totalBytes = event.total;
var downloadedBytes = event.loaded;
var progress = downloadedBytes / totalBytes * 100;
console.log('請求進度：' + progress + '%');
};
xhr.send();

在上面的例子中，我們發送了一個GET請求到example.com/data，并在onprogress事件中通過event.total和event.loaded屬性計算出請求的進度。這個進度是一個百分比值，可以用來更新頁面上的進度條或顯示加載狀態。

需要注意的是，onprogress事件可能不會在所有瀏覽器中都支持。為了兼容性考慮，我們可以使用load事件和progress事件的組合，來實現類似的功能。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/data', true);
xhr.onload = function() {
console.log('請求完成！');
};
xhr.onprogress = function(event) {
if (event.lengthComputable) {
var totalBytes = event.total;
var downloadedBytes = event.loaded;
var progress = downloadedBytes / totalBytes * 100;
console.log('請求進度：' + progress + '%');
}
};
xhr.send();

在這個例子中，我們通過xhr.onload事件來判斷請求是否完成。同時，在xhr.onprogress事件中，我們使用了event.lengthComputable屬性來檢查是否能夠獲取到正確的total和loaded值。如果不能，就無法獲得請求進度。

總結來說，通過使用XMLHttpRequest對象的onprogress事件，我們可以實時獲取AJAX請求的進度。這使得我們可以在頁面上顯示加載狀態或進度條，提供更好的用戶體驗。使用load事件和progress事件的組合可以增加兼容性，保證在不同瀏覽器中都能正常工作。