我想显示加载有进度条的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。
两个 -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发送出去。