如何以百分比形式显示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和Internet巨头共同致力于一个名为
Web Platform
的普通企业，以获取通用的更新Web文档。这是一项正在进行的工作，因此尚未完成。

而且， 旧的AJAX中没有本地功能来监视进度 。

在老式的方法中，您将必须创建一个间隔函数，该函数将不断命中单独的URL以获取进度更新。您的服务器还必须更新进度，并将其作为响应从其他端口提供的URL发送出去。