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 code：

<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 - Monitoring Progress in AJAX，我已经采取了这个解决方案。

每个浏览器现在都有一个Web文档（如上面的Mozilla文档），此外，所有这些文档都为一个名为Web Platform的共同企业以及其他有影响力的Web和Internet巨头做出了贡献。常见的更新Web文档。这是一项正在进行的工作，所以还不完整。

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

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

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

1 个答案: