使用 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带有用户友好进度条的回调，在数据加载操作期间提供视觉反馈。