ExtJS 4.2 课程-06：服务器代理（proxy）

2014-01-03

ExtJS 4.2 教程-06：服务器代理（proxy）本文同时发布在了起飞网，原文地址：http://www.qeefee.com/extjs-cour

ExtJS 4.2 教程-06：服务器代理（proxy）

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

ExtJS 4.2 教程-01：Hello ExtJSExtJS 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，采用异步的方式从服务器获取数据。我们先看一个简单的示例：

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

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

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

ajax 带参数的请求

我们打开网络跟踪，刷新页面，跟踪我们所有的网络请求：

ExtJS 4.2 课程-06：服务器代理（proxy）

找到getjson的请求，点击查看明细：

ExtJS 4.2 课程-06：服务器代理（proxy）

在这个URL中可以看到，ExtJS 其实已经为我们添加了一些参数，包括 page、start和limit。这些参数是从哪儿来的呢？

在使用ajax进行请求的时候，ajax代理会调用自身的read方法，该方法的第一个参数是Ext.data.Operation 类型，它用来配置我们如何进行请求。我们在load 方法中可以通过配置项传递一些参数，load在调用read方法时将这些参数传递过去，read则会根据这些参数生成Ext.data.Operation 的一个实例。所以，我们可以这样来传递参数：

ExtJS 提供的这种方式大大简化了我们客户端的处理代码，方便我们进行JsonP跨域请求。

JsonP代理的其它操作跟Ajax代理基本一直，不再过多介绍。接下来看一下Rest代理。

Rest

Rest 指的是什么呢？根据我个人的理解，我觉得Rest像是一种开发规范，由于Http请求是无状态的，所以在对网络资源进行请求的时候，我们通常会将状态（要执行的操作：增删改查等，以及要操作的数据）作为参数传递给服务器，而Rest 则规定，HttpMethod 的GET、POST、PUT、DELETE分别对应不同的操作（Get 对应查找、PUT对应更新、POST对应新增、DELETE对应删除）。关于更完整的Rest，请参照《深入浅出REST》。

在ASP.NET MVC 中，我们可以使用Web API 轻松的实现RESTful应用程序。

我们首先在服务器段用C#代码定义一个Model：

由于我们没有指明返回的数据格式，所以默认为我们将对象转换为Xml。我们在ExtJS中使用Rest代理：

红框中的是我们请求的URL和得到的数据的预览。我们程序完成解析后会弹出提示：

ExtJS 4.2 课程-06：服务器代理（proxy）

此时我们可以对store执行一些CRUD操作，跟踪一下网络请求和服务器段代码，查看一下Rest代理是如何工作的。

Direct

Direct 代理使用Ext.Direct 向服务器发送数据。

Ext.Direct 技术的好处是，允许你像调用Javascript 方法一样调用服务器端代码。我们将在后面的章节中详细的介绍 Ext.Direct。当我们定义好Ext.Direct 以后，才能够使用Direct代理来请求数据。

例如我们在API中看到的代码：

Ext.define('User', {    extend: 'Ext.data.Model',    fields: ['firstName', 'lastName'],    proxy: {        type: 'direct',        directFn: MyApp.getUsers,        paramOrder: 'id' // Tells the proxy to pass the id as the first parameter to the remoting method.    }});User.load(1);

本节内容介绍了服务器端代理的使用方法，这些基础性的内容比较枯燥，但却是学习ExtJS 复杂控件的基础，在这些内容的基础上，我们才能够更加轻松的学习Grid、Tree 等复杂控件。

热点排行

JavaScript

ExtJS 4.2 课程-06：服务器代理（proxy）