Sencha Toucha之Ext.Ajax

Posted 2020-08-05

Ext.Ajax是Ext.data.Connection的hi一个单实例，不需要使用new或者Ext.create方法创建实例后再使用。

类的继承关系为：

Ext.Base

Ext.data.Connection

Ext.Ajax

 

Ext.Ajax.request({
    url: ‘page.php‘,
    params: {
        id: 1
    },
    success: function(response){
        var text = response.responseText;
        // process server response here
    }
});

可以直接通过设置Ext.Ajax类的选项来配置属性：

Ext.Ajax.setTimeout(60000); // 60 seconds

Ext.Ajax.setTimeout(120000); // 120 seconds
Ext.Ajax.request({
    url: ‘page.aspx‘,
    timeout: 60000
});

一般来说这个类会用于你所有的Ajax请求。

一般情况下，在配置对象中定义好了地址和回调函数就可以使用Ext.Ajax了。

Ext.Ajax有三个回调函数，分别是success，failure和callback。

Ext.Ajax默认是以POST方式提交的，如果要修改为GET方法，可以通过method配置项来实现，它的值可以是POST或者GET，注意全部为大写字母。

Ext.Aiax.request({

     url:‘myUrl‘,

     method:‘POST‘,

     params:{

          username:‘king‘,

          password:‘king‘

     },

     callback:function(response){

          console.log(response.responseText);

     }

});

 

请求自动地将param对象打包为form数据，是作为POST请求的一部分发送出去。

 

当发送一个GET请求时，许多web服务器将会缓存一个应答，并总是将这个相同的应答发送给你，虽然加快了web速度，但是并不总是想要的。

 

disableCaching: false,

web根据Header不同，返回不同格式的数据

下面是获得JSON数据

Ext.Aiax.request({

     url:‘myUrl‘,

     method:‘GET‘,

     headers:{"Content-type":"application/json"},

     params:{

          username:‘king‘,

          password:‘king‘

     },

     callback:function(response){

          console.log(response.responseText);

     }

});

 

callback回调

 

当Ajax请求失败时，Ext.Ajax可以帮你指定所有场景下的callback回调函数

Ext.Ajax.request({

     url:‘myUrl‘,

     success:function(response){

          console.log(‘请求成功‘);    

     },

     failure:function(response){

          console.log(‘请求失败‘);

     },

     callback:function(response){

          console.log(‘数据‘);

     }

});

当请求成功时，success函数首先会被调用，然后是callback函数。

当请求失败时，failure函数会被调用，然后是callback函数。

不论请求成功还是失败，callback回调函数总是会执行的。

 

请求超时和中断

当后台服务器响应时间过长而导致请求超时时。failure函数将会被调用，该函数的传递参数request对象中，timeout的属性为true

Ext.Ajax.equest({

     url:‘myUrl‘,

     failure:function(reqponse){

          console.log(reqponse.timeout);

     }

});

缺省情况下，timeout值为30秒，但是你可以通过timeout设置该值，该值单位是毫秒

var myRequest = Ext.Ajax.equest({

     url:‘myUrl‘,

     timeout:5000,  // 5秒超时

     failure:function(reqponse){

          console.log(reqponse.timeout);

     }

});

Ext.Ajax.abort(myRequest);

上面代码中，超时处理函数将被调用，reqponse.aborted属性将设置为true。

Ext.Ajax.request({

     url:‘myUrl‘,

     failure:function(reqponse){

          if(reqponse.timeout){

               alert(‘Timeout‘,‘服务器超时‘);

          }else if(reqponse.aborted){

               alert(‘Aborted‘,‘请求终止‘);

          }else{

               alert(‘Bad‘,‘请求失败‘);

          }

     }

});