ExtJS 数据处理-Ext.Ajax

更新记录
2023年3月3日 优化结构,对实例进行优化和添加。
2022年12月20日 新增disableCaching。
2022年7月23日 发布。
2022年7月16日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

Ext.Ajax

说明

Ext.Ajax是一个单例实例对象，用于处理ajax方式的web请求，是Ext.data.Connection类型的单例实例。要使用Ext.Ajax加载数据很简单，使用request方法就行了，该方法需要一个配置对象作为参数。默认情况下，Ext.Ajax的请求是异步(asynchronous)的。

一般情况下，在配置对象中定义好地址和回调函数就可使用Ext.Ajax。Ext.Ajax有三个回调函数，分别是success、failure和 callback。在这三个回调函数中，无论请求是成功还是失败,callback都会触发。而success则在请求的状态码为200-299或304时才会触发。不符合success条件的请求都会触发failure。

实例

配置请求的url

Ext.Ajax.request({
    url:"/test.json"
});

配置请求为同步执行

Ext.Ajax.async = false

配置请求的HTTP方法

默认情况下，Ext.Ajax.request发起的请求使用POST方法。

Ext.Ajax.request({
    url:"/test.xml",    //请求的URL
    method: 'GET',      //请求的方法
});

配置请求的超时时间

Ext.Ajax.request({
    url:"/test.xml",    //请求的URL
    timeout: 60000,     //请求的超时时间,默认30秒
});

配置额外的数据

Ext.Ajax.request({
    url:"/test.xml",    //请求的URL
    params:             //额外的数据
    {
        id: 1,
        name: 'panda666'
    }
});

禁用缓存

Ext.Ajax.request({
    disableCaching:true,
});

配置HTTP头

Ext.Ajax.request({
    url:"/test.xml",    //请求的URL
    headers:            //设置请求头参数
    {
        'Content-Type': 'application/json'
    }
});

配置请求成功回调函数

The success function will be executed only when the server responds with a 200-299 status, which means that the request has been made successfully.

Ext.Ajax.request({
    url:"/test.json",
    success: function(response, options){
        //response 表示响应
        //options 表示ajax请求的参数
        if(request.status === 200)
        {
            //输出获得的数据
            console.log(request.responseText);
        }
    }
});

配置请求错误回调函数

If the response status is 403, 404, 500, 503, and any other error status, the failure callback will be execute.

Ext.Ajax.request({
    url:"/test.json",
    success: function(response, options){
        //response 表示响应
        //options 表示ajax请求的参数
        if(response.status === 200)
        {
            //输出获得的数据
            console.log(response.responseText);
        }
    },
    failure: function(response, options){
        console.log(response.status); //状态码
        console.log(response.statusText); //状态文本描述
        console.log(response.responseText); //返回的数据
        console.log(options);
    }
});

配置不论成功\错误都会执行的回调函数

callback参数说明：
options：parameter to the request call
success：Boolean value according to if the request was successful or not
response：XMLhttpRequest object that contains the information of the response

Ext.Ajax.request({
    url:"/test.json",
    success: function(response, options){
        //response 表示响应
        //options 表示ajax请求的参数
        if(response.status === 200)
        {
            //输出获得的数据
            console.log(response.responseText);
        }
    },
    failure: function(response, options){
        console.log(response.status); //状态码
        console.log(response.statusText); //状态文本描述
        console.log(response.responseText); //返回的数据
        console.log(options);
    },
    callback: function( options, success, response ){
        console.log('任何时候都会执行');
    }
});

处理接收的JSON数据

Ext.Ajax.request({
    url:"/test.json",
    success: function(request, options){
        //request 表示请求
        //options 表示ajax请求的参数
        if(request.status === 200)
        {
            //数据转为JSON格式（decode JSON string）
            var data = Ext.decode(request.responseText);
            console.log(data);
        }
    },
    failure: function(request, options){
        console.log(request.status); //状态码
        console.log(request.statusText); //状态文本描述
        console.log(request.responseText); //返回的数据
        console.log(options);
    }
});

处理接收的XML数据

Ext.Ajax.request({
    url:"/test.xml",
    success: function(request, options){
        //request 表示请求
        //options 表示ajax请求的参数
        if(request.status === 200)
        {
            //处理XML数据
            var data = (request.responseXML);
            var node = data.getElementsByTagName('msg')[0];
        }
    },
    failure: function(request, options){
        console.log(request.status); //状态码
        console.log(request.statusText); //状态文本描述
        console.log(request.responseText); //返回的数据
        console.log(options);
    }
});

发起JsonP请求

Ext.data.JsonP.request({
    url: 'http://www.panda666.com/test/test',
    params: {
        apiKey: '1234'
    },
    callbackKey: 'myCallbackFn',
    success: function(){
        //task on successful request
    },
    failure: function(){
        //task on failed request
    },
    scope: this
});