Javascript 在AJAX请求期间显示等待动画

我想在使用AJAX请求从服务器获取数据时显示一个简单的等待动画。 这是请求的代码：

new Ajax.Request(prefix + 'modelling/', {
                method: 'get',
                asynchronous: false,
                requestHeaders: {
                    "Accept":"application/json"
                },
                parameters: {
                    id: 'getcaplist',

                },
                encoding: 'UTF-8',
                onSuccess: function(response){
                    console.log('response : ', response);


                    var resJSON = response.responseText.evalJSON();
                    console.log('resJSON: ', resJSON);

                    for(var I = 0; I < resJSON.length; ++i){
                      //do something with obj[i]
                        for(var ind in resJSON[i]) {
                        console.log(ind);
                            for(var vals in resJSON[i][ind]){
                            console.log(vals, resJSON[i][ind][vals]);
                            capabilities.push(resJSON[i][ind][vals]);

                            }
                        }
                    }
                    console.log('capabilities', capabilities);

                }.bind(this),

                onException: function(){
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, 'Exception while getting capabilities list').setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }.bind(this),
                onFailure: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this),
                on401: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();
                                        }).bind(this),
                on403: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this)
            });

new Ajax.Request（前缀+“modeling/”{
方法：“get”，
异步：false，
请求头：{
“接受”：“应用程序/json”
},
参数：{
id:'getcaplist'，
},
编码：“UTF-8”，
onSuccess:函数（响应）{
log（'response:'，response）；
var resJSON=response.responseText.evalJSON（）；
log（'resJSON:'，resJSON）；
for（var I=0；I

---

当传递到onsuces函数时，等待的动画应该隐藏。

您必须使用如下的加载方法：

new Ajax.Request(prefix + 'modelling/', {
                method: 'get',
                asynchronous: false,
                requestHeaders: {
                    "Accept":"application/json"
                },
                parameters: {
                    id: 'getcaplist',

                },
                encoding: 'UTF-8',
                onLoading: function(){
                    // DO SOMETHING HERE
                },
                onSuccess: function(response){
                    console.log('response : ', response);


                    var resJSON = response.responseText.evalJSON();
                    console.log('resJSON: ',resJSON);

                    for(var i = 0; i < resJSON.length; ++i){
                      //do something with obj[i]
                        for(var ind in resJSON[i]) {
                        console.log(ind);
                            for(var vals in resJSON[i][ind]){
                            console.log(vals, resJSON[i][ind][vals]);
                            capabilities.push(resJSON[i][ind][vals]);

                            }
                        }
                    }
                    console.log('capabilities', capabilities);

                }.bind(this),

                onException: function(){
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, 'Exception while getting capabilities list').setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }.bind(this),
                onFailure: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this),
                on401: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();
                                        }).bind(this),
                on403: (function(transport) {
                    Ext.Msg.alert(ORYX.I18N.Oryx.title, ORYX.I18N.Hbpmn.getFailure).setIcon(Ext.Msg.WARNING).getDialog().setWidth(260).center().syncSize();

                }).bind(this)
            });

new Ajax.Request（前缀+“modeling/”{
方法：“get”，
异步：false，
请求头：{
“接受”：“应用程序/json”
},
参数：{
id:'getcaplist'，
},
编码：“UTF-8”，
onload:function（）{
//在这里做点什么
},
onSuccess:函数（响应）{
log（'response:'，response）；
var resJSON=response.responseText.evalJSON（）；
log（'resJSON:'，resJSON）；
for（var i=0；i

---

看一看这张照片。onload映射到XHR生命周期中的初始化阶段。因此，这里是初始化加载gif或类似文件的合适位置。

在ajax请求之前，只需更改

异步：false

调用控制盘或进度库。show（）；然后在onSuccess块中执行do.hide（）。就这么简单，请举个例子好吗？我不明白你的意思，

asynchronous:false，

将使在ajax请求期间无法进行任何动画制作。@KevinB-haah！我只是注意到了。请换成真正的霍洛德。它破坏了“A”JAXO的全部功能。您能添加Signavio标记吗？恐怕在发送同步ajax请求之前，您无法在任何ajax事件中进行任何渲染。谢谢！这是一个快速复制粘贴从网站。这是正确的。唯一可能的方法是在setTimeout中包装整个ajax请求，但这可能会破坏依赖于同步发送请求的其他代码。加载映射到XHR生命周期中的初始化阶段。因此，它应该相当于jQuery中的beforeSend，据我所知，这是显示加载gif的最佳位置否？是的，但问题是调用堆栈不会显示c