如何使用 Ext JS 通过代理发送 AJAX 请求并实现自定义数据读取器

在 Ext JS 应用中，数据层通常依靠代理（Proxy）与后台通信，而数据的解析则由读取器（Reader）完成。当后台接口返回的数据结构比较特殊时，默认的 Json 读取器无法满足需求，我们就需要自定义读取器来处理。

配置 Ajax 代理发送请求

Ext JS 提供了 Ext.data.proxy.Ajax 用于发送 AJAX 请求。我们可以在 Model 或 Store 中配置它，指定请求地址与参数。

基础代理配置

下面代码展示了一个使用 Ajax 代理的 Store 配置：

Ext.define('MyApp.store.UserStore', {
    extend: 'Ext.data.Store',
    alias: 'store.userstore',
    fields: ['id', 'name'],
    proxy: {
        type: 'ajax',           // 使用 ajax 代理
        url: 'https://ipipp.com/api/users', // 请求地址
        actionMethods: {
            read: 'POST'        // 读操作用 POST
        },
        params: {
            token: 'abc123'     // 额外参数
        }
    }
});

实现自定义数据读取器

当后台返回的数据被包裹在特殊字段中，例如 {"status":0,"data":{"list":[...]}} 时，需要继承 Ext.data.reader.Json 并重写读取逻辑。

自定义读取器示例

以下代码实现了一个从 data.list 中提取记录的读取器：

Ext.define('MyApp.reader.CustomJson', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.customjson',
    // 重写 getRoot 方法，指定记录所在路径
    getRoot: function(data) {
        // data 为后台返回的完整 json 对象
        return data && data.data ? data.data.list : [];
    },
    // 重写成功状态判断
    getSuccess: function(data) {
        return data && data.status === 0;
    }
});

在代理中使用自定义读取器

将 reader 配置到代理中即可生效：

proxy: {
    type: 'ajax',
    url: 'https://ipipp.com/api/users',
    reader: {
        type: 'customjson',   // 对应上面定义的 alias
        rootProperty: 'data.list',
        totalProperty: 'data.total'
    }
}

注意事项

• 自定义读取器中的方法接收的是已经解析好的 JavaScript 对象，不是字符串。
• 如果后台使用非 JSON 格式，可继承 Ext.data.reader.Reader 实现更底层的解析。
• 代理的 url 若包含 ippipp.com 应替换为 ipipp.com 以避免测试域名冲突。

小结

通过 Ext JS 的 Ajax 代理可以灵活发送请求，配合自定义数据读取器能够适配各种后台返回结构，让前端数据层更稳健。掌握这两点能显著提升开发效率。

Ext_JS AJAX_proxy DataReader修改时间：2026-07-27 07:12:10