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

我想显示用进度条加载的ajax响应的用户百分比。有没有办法实现它？现在我只显示一张图片。如何以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>

来源

2013-05-22 Premshankar Tiwari

有点[研究]（http://stackoverflow.com/questions/10559264/possible-to-calculate-how-much-data-been-loaded-with-ajax） –

有展现真正的百分比两种方式。简而言之...

一个 - 旧学校原生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。

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

另外，在旧的AJAX中没有本地功能，监视进度。

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

来源

2013-05-23 14:13:41

不知道'XMLHTTPRequest2' ，惊人。 –

这对我不起作用，因为我有一个非常小的文件来检索（只有几个BYTES）;但我的脚本需要相当长的时间来执行;我想这是由于服务器延迟...但我怎么能区分一个缓慢的服务器卡住的脚本？在开始检索之前，我会打印一个“请稍候...”的消息，但对于10个字节的输出，“请稍候”消息的持续时间不会超过10秒，而不会引起用户对“锁定的东西”的怀疑。查看http://stackoverflow.com/questions/35482101/how-to-use-jquery-to-use-online-translation-apis/35485375#35485375 – jumpjack

这对javascript来说很好，但我怎样才能在jQuery中使用它？ –

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

回答

相关问题