如何在Ajax 資料載入期間顯示進度條

處理使用者觸發的事件（例如從下拉方塊中選擇值）時，通常會使用非同步擷取資料阿賈克斯。在獲取數據時，向用戶提供正在發生某事的視覺指示是有益的。本文探討了一種在 Ajax 請求期間顯示進度條的方法。

使用 Ajax 實作進度條

要建立一個準確追蹤 Ajax 呼叫進度的進度條，請依照下列步驟操作：

1。監聽表單變更：

利用addEventListener('change')監聽下拉框的變更。

2.發起 Ajax 請求：

發送 Ajax 請求以檢索所需資料。

3.使用 XMLHttpRequest 處理進度事件：

在 Ajax 選項中，配置 xhr 函數，該函數提供對 XMLHttpRequest 物件的存取。該物件允許您監視各種事件，包括進度。

4。監控上傳和下載進度：

在xhr函數中，新增事件監聽器以追蹤上傳和下載進度。這些事件包括 onloadstart、onprogress 和 onloadend。

5。更新進度條：

使用progress事件根據事件物件的loaded和total屬性計算進度百分比，並相應更新進度條。

以下是示範這些步驟的範例程式碼片段：

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar...
            }
        }, false);

        // Download progress
        xhr.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                // Update progress bar...
            }
        }, false);

        return xhr;
    },
    type: "POST",
    url: "/yourfile.php",
    data: "...",
    success: function(data) {
        // Handle successful data retrieval...
    }
});

透過結合這些技術，您可以在 Ajax 資料載入過程中有效地顯示進度條，確保流暢且資訊豐富的使用者體驗。