在現代的Web開發中，Ajax（Asynchronous JavaScript and XML）是一種強大的技術，它可以實現在不刷新整個頁面的情況下，與服務器進行數據交互。而在實際開發中，我們常常需要通過Ajax獲取數據，并且在獲取數據的過程中，顯示一個進度條給用戶以視覺上的反饋。接下來，我們將通過舉例來詳細介紹如何使用Ajax獲取數據并顯示進度條。 假設我們正在開發一個社交媒體網站，用戶可以通過該網站獲取好友列表。當用戶登錄后，我們需要通過Ajax從服務器獲取好友列表數據，并在獲取數據的過程中，顯示一個進度條給用戶以提示。下面是一個示例的HTML結構：

使用Ajax獲取好友列表數據：

<div id="progress-bar"></div>
<ul id="friend-list"></ul>

在上面的代碼中，我們創建了一個進度條的容器

和一個好友列表的容器

。通過JavaScript，我們將通過Ajax獲取好友列表數據，并將數據動態添加到好友列表容器中。在獲取數據的過程中，我們將通過改變進度條容器的寬度，顯示一個簡單的進度條效果。 下面是示例的JavaScript代碼：

示例JavaScript代碼：

function getFriendList() {
var progressBar = document.getElementById('progress-bar');
var friendList = document.getElementById('friend-list');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/friend-list', true);
xhr.addEventListener('progress', function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
progressBar.style.width = percent + '%';
}
});
xhr.addEventListener('load', function() {
friendList.innerHTML = xhr.responseText;
});
xhr.send();
}
getFriendList();

在上面的代碼中，我們首先通過document.getElementById方法獲取進度條容器和好友列表容器的 DOM 元素。然后，我們創建一個 XMLHttpRequest 對象并使用xhr.open方法指定請求的類型（GET）和請求的URL。接著，我們通過xhr.addEventListener方法添加一個progress事件監聽器，用于在獲取數據過程中更新進度條的寬度。在事件監聽器中，我們可以通過e.loaded和e.total屬性計算出當前加載的百分比，并將其應用到進度條容器上。 接下來，我們添加一個load事件監聽器，用于在數據加載完成后，將數據添加到好友列表容器中。最后，我們調用xhr.send方法發送請求。 通過以上的代碼，我們實現了一個簡單的通過Ajax獲取數據并顯示進度條的功能。當用戶訪問我們的網站并登錄成功后，我們將再次調用getFriendList函數來獲取好友列表數據，并在獲取數據的過程中，動態地顯示一個進度條，給用戶以直觀的反饋。 綜上所述，Ajax獲取數據并顯示進度條是一個在Web開發中常見的需求。通過使用Ajax技術，我們可以在不刷新整個頁面的情況下與服務器進行數據交互，并通過顯示進度條來提升用戶體驗。無論是加載好友列表、上傳文件還是進行其他網絡請求，我們都可以借助Ajax和進度條來實現更加友好的用戶界面效果。