javascript 调用AJAX时如何显示进度条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22707240/
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 progress bar when calling AJAX?
提问by bCliks
I am developing a mobile app using phonegap(JQ + Html). In my app, consuming RESTwebservice using AJAXcalls.When service invoke, I am showing a progress bar animated GIF image . The problem is, browser freezes when calling AJAX. So the progress bar is not showing.
我正在使用phonegap( JQ + Html)开发移动应用程序。在我的应用程序中，REST使用AJAX调用使用web 服务。当服务调用时，我显示了一个进度条动画 GIF 图像。问题是，浏览器在调用 AJAX 时会死机。所以进度条没有显示。
In ‘beforeSend' i am showing the progress bar image and after ‘complete' i am hiding the progress bar image.
在“ beforeSend”中，我正在显示进度条图像，在“ complete”之后，我正在隐藏进度条图像。
I am also trying async: true. But it execute service as asynchronously. In my app, asynchronous execution is not suit. Because asynchronous execution will not wait for ajax executing. My app should wait until the ajax execution complete. In that process time I want show progress bar.
我也在努力async: true。但它以异步方式执行服务。在我的应用程序中，异步执行不适合。因为异步执行不会等待ajax执行。我的应用程序应该等到 ajax 执行完成。在那个过程中，我想显示进度条。
Here is my code.
这是我的代码。
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
accepts: "application/json",
beforeSend: function() {
StartPBar():
},
data: JSON.stringify(RQ),
async: false,
url: URL,
complete: function() {
stopPBar();
},
success: function(res, status, xhr) {
try {
RS = res;
} catch (e) {
alert(e);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Excpetion " + errorThrown + XMLHttpRequest);
}
});
Any suggestion to show the progress bar stay on screen until the process is fully complete? Any help would be appreciated. Thanks
有什么建议可以让进度条一直显示在屏幕上，直到过程完全完成？任何帮助，将不胜感激。谢谢
采纳答案by Mohammad Nurdin
Make sure you verify your javascript code.
确保您验证了您的 javascript 代码。
Remove this code.
删除此代码。
beforeSend: function() {
StartPBar():
},
Replace your jquery mobile with this one jQuery Mobile 1.4.0-rc.1
用这个替换你的 jquery mobile jQuery Mobile 1.4.0-rc.1
http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js
http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js
Replace your code with this one.
用这个替换你的代码。
$.mobile.loading('show');
$.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
accepts: "application/json",
data: JSON.stringify(RQ),
async: false,
url: URL,
complete: function() {
$.mobile.loading('hide');
},
success: function(res, status, xhr) {
try {
$.mobile.loading('hide');
RS = res;
} catch (e) {
alert(e);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$.mobile.loading('hide');
alert("Excpetion " + errorThrown + XMLHttpRequest);
}
});
回答by Bud Damyanov
Try to set async: true, the async: falsewill freeze the browser until the request is completed. Also move the async: truebefore beforeSendmethod.
尝试设置async: true，async: false将冻结浏览器，直到请求完成。还要移动async: truebefore beforeSend方法。
The async: true, when supported by browser, basically means: browser will send data asynchronous and will not block or wait other actions from executing. This is the only in my opinion way to show the progress bar indicator. Because (from the documentation):
的async: true，当浏览器支持，基本上是指：浏览器将数据发送异步的，不会阻止或等待执行其他操作。这是我认为显示进度条指示器的唯一方式。因为（来自文档）：
Note that synchronous requests may temporarily lock the browser,disabling any actions while the request is active.
请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。
回答by Hüseyin BABAL
If you want to wait until ajax requests done, you can do it also with async:truelike;
如果你想等到ajax请求完成，你也可以用async:truelike来做；
StartPBar():
$.when(runAjax()).done(function(result) {
// result conatins responseText, status, and jqXHR
stopPBar();
});
function runAjax() {
return $.ajax({
type: "POST",
dataType: "json",
contentType: "application/json",
accepts: "application/json",
data: JSON.stringify(RQ),
async: true,
url: URL,
success: function (res, status, xhr) {
try {
RS = res;
}
catch (e) {
alert(e);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Excpetion " + errorThrown + XMLHttpRequest);
}
});
}
In this example, when ajax request completed, progressbar stop function will be called.
在这个例子中，当 ajax 请求完成时，progressbar stop 函数将被调用。
