18

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

1 回答 1

44

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

一种- 旧式原生 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 和新的 Web 解决方案，我会向您指出Mozilla DOC - Monitoring Progress in AJAX从我采用此解决方案的地方。

现在，每个浏览器都有一个 Web 文档（就像上面来自 Mozilla 的那个），此外，它们都与其他有影响力的 Web 和 Internet 巨头一起为一个名为Web Platform的共同企业做出贡献 - 为一个共同的更新 Web 文档。这是一个正在进行的工作，所以不完整。

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

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

于 2013-05-23T14:13:41.593 回答