使用 AJAX 載入資料時顯示進度條

執行從資料庫擷取資料的 AJAX 查詢時，可能需要一些時間以便傳回結果。為了在此載入過程中向使用者提供回饋，可以顯示進度條。

使用 jQuery 建立進度欄

jQuery 函式庫提供了內建方法有助於進度條的建立和操作。若要為 AJAX 呼叫新增進度條，您可以將事件偵聽器附加到 xhr 物件：

$.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 the progress bar here
            }
        }, false);

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

        return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data) {
        // Hide the progress bar and display the results
    }
});

在此程式碼中：

• 上傳屬性的進度事件監聽器追蹤向伺服器傳送資料的進度。
• 進度事件監聽器對於xhr物件追蹤從伺服器接收資料的進度。
• 您可以使用percentComplete變數來確定完成百分比並更新進度條
• 成功檢索和處理資料後，可以隱藏進度條並顯示結果。

透過實作此方法，您可以增強 AJAX帶有使用者友善進度條的回調，在資料載入操作期間提供視覺回饋。