我想显示加载进度条的 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 和新的 Web 解决方案,我建议您引用 Mozilla DOC - Monitoring Progress in AJAX我从那里得到了这个解决方案。
现在每个浏览器都有一个网络文档(就像上面来自 Mozilla 的文档),此外,所有浏览器都为一个名为 Web Platform 的共同事业做出了贡献。 ,与其他有影响力的 Web 和 Internet 巨头一起 - 共同更新 Web 文档。这是一项正在进行的工作,因此尚未完成。
此外,旧的 AJAX 中没有用于监视进度的 native 功能。
按照传统的方式,您必须创建一个间隔函数,该函数将不断点击单独的 URL 来获取进度更新。您的服务器还必须更新进度并将其作为来自其他端口可用的 URL 的响应发送。
关于javascript - 如何以百分比形式显示ajax响应的加载状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16690740/