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

How to show loading status in percentage for ajax response?

本文关键字：状态 百分比 ajax 响应 加载 何显示 显示      更新时间：2023-09-26

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

显示实际百分比的方法有两种。短暂的……

一个 -老式的原生JavaScript或jQuery ajax，你需要服务器的支持，一个不同的URL，可以给你更新。每隔一段时间点击那个URL。

Two - 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();
然后你可以定义上面附加的处理程序(在你的例子中是progress): 
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和互联网巨头一起为一个共同的更新web文档贡献了一个共同的企业，称为 web平台。这是一项正在进行的工作，所以还没有完成。

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

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

相关文章：