jQuery 如何以百分比显示 ajax 响应的加载状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16690740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show loading status in percentage for ajax response?
提问by Premshankar Tiwari
I want to show the user percentage of the ajax response loaded with a progressbar. Is there a way to achieve it? Right now I am showing just an image.
我想显示加载进度条的 ajax 响应的用户百分比。有没有办法实现它？现在我只展示一张图片。
Here is my code sample :
这是我的代码示例：
$('#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 code:
HTML代码：
<div id="loadingDiv">
<img src="loading-img.png"/>
</div>
回答by Om Shankar
There are two ways to show real percentage. Briefly...
有两种方法可以显示实际百分比。简要地...
One- old school native JavaScript or jQuery ajax, for which you need server support as well, a different URL which can give you updates. And you keep hitting that URL on an interval.
一个-老同学本地JavaScript或jQuery的AJAX技术，在您需要服务器的支持，以及，一个不同的URL，可以给你更新。并且您会每隔一段时间继续点击该网址。
Two- modern native native JavaScript in HTML5 browsers, supporting XMLHTTPRequest2, also known as AJAX 2, defined by new Web and HTML5 Standards.
HTML5 浏览器中的两个现代原生原生 JavaScript，支持XMLHTTPRequest2，也称为 AJAX 2，由新的 Web 和 HTML5 标准定义。
If two, welcome to the new web!!
Multiple features have been added to Browsers that enhance connectivity - part of HTML5 features.
如果有两个，欢迎来到新网！！
浏览器中添加了多项增强连接性的功能 - HTML5 功能的一部分。
XMLHTTPRequest2enables events in AJAX that help monitoring progress, as well as a lot of other things, from JavaScript itself. You can show the real percentageby monitoring the actual progress:
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();
Then you can define the handlers attached above (progressin your case):
然后您可以定义上面附加的处理程序（在您的情况下为进度）：
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 can be used in the second case as well. After all, jQuery is for helping you with less code, more doing!
jQuery 也可用于第二种情况。毕竟，jQuery 是为了帮助您用更少的代码，做更多的事情！
Hoping that you are focusing on HTML5 and the new web solution, I would point you to Mozilla DOC- Monitoring Progress in AJAXfrom where I have taken this solution.
希望您专注于 HTML5 和新的 Web 解决方案，我会向您指出Mozilla DOC-在 AJAX 中监控进度，我从那里获得了这个解决方案。
Every Browser now has a documentation for the web (like the one above from Mozilla) and additionally, all of them are contributing to a common venture called Web Platform, together with other influential Web and Internet giants - for a common updated Web Documentation. It is a work in progress, so not complete.
现在，每个浏览器都有一个 Web 文档（就像上面来自 Mozilla 的文档），此外，所有浏览器都在与其他有影响力的 Web 和 Internet 巨头一起为一个名为Web Platform的共同事业做出贡献- 共同更新的 Web 文档。这是一项正在进行的工作，所以还没有完成。
Also, there is no native functionality in the old AJAX, to monitor progress.
此外，旧的 AJAX 中没有用于监控进度的本机功能。
In the old-school way, you would have to create an interval function that would keep on hitting a separate URL to get the progress update. Your server also has to update the progress and send that as a response from that URL available from a different port.
以老式的方式，您必须创建一个间隔函数，该函数将继续点击单独的 URL 以获取进度更新。您的服务器还必须更新进度并将其作为来自不同端口可用的 URL 的响应发送。
