本文同时发布在了起飞网，原文地址：http://www.qeefee.com/extjs-course-6-server-proxy

• ExtJS 4.2 教程-01：Hello ExtJS
• ExtJS 4.2 教程-02：bootstrap.js 工作方式
• ExtJS 4.2 教程-03：使用Ext.define自定义类
• ExtJS 4.2 教程-04：数据模型
• ExtJS 4.2 教程-05：客户端代理（proxy）
• ExtJS 4.2 教程-06：服务器代理（proxy）
• ExtJS 4.2 教程-07：Ext.Direct

更多的ExtJS教程，点击进入>>《ExtJS 教程目录》，持续更新中……

在上一节我们介绍了客户端的几种代理，本节的主要内容是介绍如何使用服务器端代理，将重点介绍AjaxProxy，这是我们最常用的代理方式。

Ajax

web应用程序开发过程中，与服务器端交互的技术最常用的就是Ajax了。Ajax 是使用Javascript创建一个HttpRequest，采用异步的方式从服务器获取数据。我们先看一个简单的示例：

Ext.onReady(function () {
    Ext.define('Person', {
        extend: 'Ext.data.Model',
        fields: ['name', 'age']
    });
    var store = Ext.create('Ext.data.Store', {
        model: 'Person',
        proxy: {
            type: 'ajax',
            url: rootUrl + 'sample/getjson',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    });

    store.load();

    var msg = [];
    store.each(function (person) {
        msg.push(person.get('name') + ' ' + person.get('age'));
    });

    Ext.MessageBox.alert('提示', msg.join('<br />'));
});

在这段代码中，首先定义了Model类Person，然后创建了Person类的数据仓库 store，store 使用了ajax代理，通过url向服务器请求数据，ajax代理的reader 配置项是告诉程序以何种方式读取请求到的数据。

我们从服务器返回的JSON字符串如下：

{users:[{name:'www.qeefee.com', age:1}, {name:'Tom', age:26}]}

大家先猜想一下运行结果？按照上一节的逻辑，此处应该弹出一个对话框，上面将内容内容显示出来，但真正运行的时候得到的却是空的内容，截图如下：

难道我们没有请求到数据？当然不是，如果你打开网络跟踪，会发现程序已经将成功得到了这段JSON字符串。那是为什么仍然是空呢？

原因是当我们调用load()方法的时候，我们告诉store去请求数据吧，然后store就使用ajax的方式请求url，注意，ajax 是异步的，所以当我们调用load()方法以后，马上执行输出的时候，store仍然是空的，可能它还在等待服务器响应数据。

所以，在我们使用ajax方式加载数据的时候，就需要为load() 方法添加一个callback 方法，当数据加载完成以后，再callback方法中进行数据输出，