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

Question

我想显示用进度条加载的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>

Answer 1

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

一个旧的学校原生JavaScript或jQuery ajax,你也需要服务器支持,一个不同的URL,可以给你更新.并且你会在一段时间内继续点击该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和新的网络解决方案,我会指出你采用这个解决方案的Mozilla DOC - 监控AJAX的进展.

每个浏览器现在都有一个Web文档(如上面的Mozilla文档),此外,所有这些文档都为一个名为Web Platform的常见企业以及其他有影响力的Web和Internet巨头做出贡献,以获得常见的更新Web文档.这是一项正在进行的工作,因此并不完整.

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

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