Javascript 调用AJAX时如何显示进度条？

我正在使用

phonegap

（

JQ+Html

）开发一个移动应用程序。在我的应用程序中，使用

AJAX

调用使用

REST

webservice。当服务调用时，我显示一个进度条动画GIF图像。问题是，调用AJAX时浏览器会冻结。所以进度条没有显示

在“

beforeSend

”中，我显示进度条图像，在“

complete

”之后，我隐藏进度条图像

我也在尝试

async:true

。但它以异步方式执行服务。在我的应用程序中，异步执行并不合适。因为异步执行不会等待ajax执行。我的应用程序应该等到ajax执行完成。在那个过程中我要显示时间进度条

这是我的密码

$.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);
    }
});

---

有没有建议在流程完全完成之前将进度条显示在屏幕上？任何帮助都将不胜感激。谢谢

尝试设置

async:true

，

async:false

将冻结浏览器，直到请求完成。同时将

async:true

移动到

beforeSend

方法之前

当浏览器支持时，

async:true

基本上意味着：浏览器将异步发送数据，不会阻止或等待其他操作的执行。我认为这是显示进度条指示器的唯一方法。因为(来自):

请注意，同步请求可能会暂时锁定浏览器， 在请求处于活动状态时禁用任何操作

---

如果要等到ajax请求完成，还可以使用

async:true

like

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);
        }

    });
}

---

在本例中，当ajax请求完成时，将调用progressbar停止函数

确保验证javascript代码

删除此代码

beforeSend: function() {
        StartPBar():
    },

将您的jquery mobile替换为此

jquery mobile 1.4.0-rc.1

用这个替换你的代码

$.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);
    }
});

---

你试过使用搜索吗？此处可能存在重复，以显示需要进行

async:true

的进度。你所说的平行是什么意思execution@iJay你好我指的是异步执行。问题更新..@Pavlo您阅读了我的完整问题。。不要只读标题。Thanks@bala尝试设置

async:true

用户说，async true不适合他的应用程序

浏览器将异步发送数据，不会阻止或等待其他操作的执行。

我的应用程序应该等到执行完成。但是，在

var ajaxResult=runAjax（）之后
stopperbar
会工作吗？是。。实际上，调用了
startPBar（）
和
stopPBAr（）
函数，但没有显示。。因为在ajax调用期间，整个浏览器都会被冻结。@bala如果您想等到ajax请求完成，也可以使用异步调用来完成。查看我的最新答案