如何以百分比显示 ajax 响应的加载状态?

IT技术 javascript jquery ajax
2021-02-23 13:44:02

我想显示加载进度条的 ajax 响应的用户百分比。有没有办法实现它?现在我只展示一张图片。

这是我的代码示例:

$('#loadingDiv').show();

$.ajax({
        type : 'Get',
        url : myUrl,
        success : function(response) {
            $('#loadingDiv').hide();
            populateData(response);
        },
        error: function(x, e) {
                    $('#loadingDiv').hide();
            if (x.status == 500 || x.status == 404) {
                    alert("no data found");
                }
        }
    });

HTML代码:

<div id="loadingDiv">
     <img src="loading-img.png"/>
</div>
1个回答

有两种方法可以显示实际百分比。简要地...

一个-老同学本地JavaScript或jQuery的AJAX技术,在您需要服务器的支持,以及,一个不同的URL,可以给你更新。并且您每隔一段时间就会点击该网址。

HTML5 浏览器中的两个现代原生原生 JavaScript,支持XMLHTTPRequest2,也称为 AJAX 2,由新的 Web 和 HTML5 标准定义。

如果有两个,欢迎来到新网!!
浏览器中添加了多项增强连接性的功能 - HTML5 功能的一部分。

XMLHTTPRequest2启用 AJAX 中的事件,这些事件有助于从 JavaScript 本身监控进度以及许多其他事情。您可以通过监控实际进度来显示实际百分比

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress, false);
oReq.addEventListener("load", transferComplete, false);
oReq.addEventListener("error", transferFailed, false);
oReq.addEventListener("abort", transferCanceled, false);

oReq.open();

然后您可以定义上面附加的处理程序(在您的情况下为进度):

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = oEvent.loaded / oEvent.total;
    // ...
  } else {
    // Unable to compute progress information since the total size is unknown
  }
}

jQuery 也可用于第二种情况。毕竟,jQuery 是为了帮助您用更少的代码,做更多的事情!

希望您专注于 HTML5 和新的 Web 解决方案,我会向您指出Mozilla DOC -在 AJAX 中监控进度,我从那里获得了这个解决方案。

现在每个浏览器都有一个 Web 文档(就像上面来自 Mozilla 的那个),此外,所有浏览器都与其他有影响力的 Web 和 Internet 巨头一起为一个名为Web Platform的共同事业做出贡献- 共同更新的 Web 文档。这是一项正在进行的工作,所以还没有完成。

此外,旧的 AJAX 中没有用于监控进度的本机功能

以老式的方式,您必须创建一个间隔函数,该函数将继续点击单独的 URL 以获取进度更新。您的服务器还必须更新进度并将其作为来自不同端口的可用 URL 的响应发送。

这对我不起作用,因为我有一个非常小的文件要检索(只有几个字节);但是我的脚本需要很长时间才能执行;我想这是由于服务器延迟......但是我如何区分卡住的脚本和缓慢的服务器?我在开始检索之前打印“请稍候……”消息,但是 10 字节输出的“请稍候”消息不能持续超过 10 秒,而不会引起用户对“某些东西被锁定”的怀疑。参见stackoverflow.com/questions/35482101/...
2021-04-29 13:44:02
“进度”仅在发布数据时给出状态。例如,在 blob 下上传一个大文件,这将非常有帮助。我也在寻找一种解决方案来计算服务器处理和下载时的特殊情况。但似乎不可能
2021-05-05 13:44:02
没想到XMLHTTPRequest2,太神奇了。
2021-05-12 13:44:02
答案很好,我只想添加另一个关于 XMLHttpRequest 的 progress_event 的文档:developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/...它还有一个活生生的例子!
2021-05-13 13:44:02
它适用于 javascript,但我如何在 jQuery 中使用它?
2021-05-19 13:44:02