Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式網頁應用程序的技術，它允許網頁在不刷新整個頁面的情況下向服務器發送請求并獲取數據。在進行Ajax請求時，有時候我們需要顯示一個載入進度條，以便用戶能夠清楚地看到請求的進度，本文將介紹如何通過Ajax來顯示一個載入進度條，并且給出相關的代碼示例。

首先，我們需要了解如何通過Ajax向服務器發送請求并獲取數據。以下是一個簡單的例子：

```
// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽請求的進度
xhr.addEventListener("progress", function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
// 更新進度條的顯示
updateProgressBar(percent);
}
});
// 發送GET請求
xhr.open("GET", "http://example.com/data", true);
xhr.send();
```

上述代碼中，我們首先創建了一個XMLHttpRequest對象（xhr），然后使用addEventListener方法監聽了請求的progress事件。在每次progress事件觸發時，我們將加載的數據量和總數據量進行比較，計算出加載的百分比，并調用updateProgressBar函數更新進度條的顯示。

接下來，我們需要在頁面上顯示一個進度條。可以使用HTML和CSS來創建一個簡單的進度條，例如：

```
```

上述代碼中，我們創建了一個帶有id屬性為progress-bar的div元素作為進度條的外框，進度條的寬度為200px，高度為20px，背景色為#EEE，邊框為1px的實線邊框。在其中嵌套了一個帶有id屬性為progress的div元素，表示進度條的實際進度。

接下來，我們可以定義updateProgressBar函數來更新進度條的顯示：

```
function updateProgressBar(percent) {
document.getElementById("progress").style.width = percent + "%";
}
```

上述代碼中，我們使用JavaScript的getElementById方法獲取到id屬性為progress的div元素，并設置其寬度為percent參數的百分比值。

通過上述代碼示例，我們可以實現一個簡單的通過Ajax顯示載入進度條的功能。當我們發送一個GET請求時，progress事件將會觸發多次，每次都會根據已加載的數據量和總數據量的比例來更新進度條的顯示。用戶可以清晰地看到請求的進度，提高了用戶體驗。

當然，上述示例只是一個簡單的示例，實際項目中可能需要更復雜的進度條效果。可以使用其他的CSS樣式表來實現不同的進度條效果，或結合JavaScript動畫庫來實現更豐富的動畫效果。

總之，Ajax顯示載入進度條是一種提高用戶體驗的好方式。通過顯示進度條，用戶可以清楚地知道請求的進度，減少了焦慮和不安的感受。通過本文所述的方法，您可以更高效地使用Ajax并實現進度條的顯示效果。