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

Question

我想在使用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)
            });

当传递给onSucess函数时，应该隐藏等待动画。

Answer 1

你必须使用这样的onLoading方法：

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

查看documentation。 onLoading映射到XHR生命周期中的Initialize阶段。因此，这里是初始化加载gif或类似的适当位置。