extjs Proxy

咱们先来看看Extjs很是绚丽的Grid，其功能包括显示数据列表，修改、删除，分页，排序等功能。   Grid组件用来显示Store中的数据。Store能够看作是Model实例的集合。Grid仅关心如何显示数据，而Store关心如何经过Proxy来读取和保存数据。

  下面进入正题Proxy   考虑到数据可能保存在服务器端，也可能保存在客户端本地，因此Proxy有两个子类Server和Client。  Server用来和服务器端进行数据读取和保存，相应的Client用来在客户端保存和读取数据。  Server主要是利用Ajax技术进行和服务器端交互。而Client则主要借助客户端变量以及html5的localStorage 和 session storage 来存储数据。

下面细致讲解类的封装： Proxy定义了对外统一的访问接口CRUD（Create、Read、Update、Delete）以及持有Model对象、Reader和Writer对象。 其中Model 用来标识出装载和保存数据的类型。 Reader：用来解析服务器端返回的数据。 Writer：格式化向服务器端发送的数据。 此外Proxy还提供了批量发送请求的方法。
Client做为Proxy的子类，定义了清除客户端数据的接口，要求子类实现。 Client的子类有三个 Ext.data.proxy.Memory：简单的使用变量来存储数据，因此页面刷新后数据会丢失。 Ext.data.proxy.LocalStorage ：使用html5的localStorage API 来存储数据 Ext.data.proxy.SessionStorage ：使用HTML5 session storage 来存储数据 html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。
web storage和cookie的区别 Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。
除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装setCookie，getCookie。
可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

 

Server 做为Proxy的子类，被设计用来向服务器端发送数据。这个类主要定义了分页、分组排序过滤等默认参数，经过代理模式为CRUD这四个方法提供统一的处理方法doRequest，封装请求数据buildRequest，以及解析服务器返回数据processResponse。

 

 

这里咱们重点关注Server的buildRequest和processResponse

Server的buildRequest方法，根据请求参数Ext.data.Operation提供的信息构造出Ext.data.Request 对象，其中Request 形如：

{

    action: undefined,      params: undefined,       method: 'GET',      url: undefined,

}

 

Server的processResponse方法，主要是从response对象中解析出全部的Ext.data.Model实例，而后调用Operation的commitRecords方法将服务器端返回的Model更新到客户端缓存的数据上，即更新Store中缓存的数据。

Server的子类有三个 Ext.data.proxy.Ajax         使用Json方式向服务器端发送数据和接收数据 Ext.data.proxy.Direct      经过Ajax使得客户端能够直接调用服务器端的方法。还提供了轮询方式向服务器端发送请求。 Ext.data.proxy.JsonP     能够跨域向服务器端发送请求
上面这三个类最终都是经过调用Connection类的request 方法向服务器端发送Ajax请求。

 

这里咱们重点关注Connection的request 方法
Connection的request 方法主要用来建立XMLHttpRequest对象发送请求信息到服务器端，接收服务器返回数据并执行回调函数。

首先经过getXhrInstance方法屏蔽掉浏览器之间建立XMLHttpRequest的差别。

当服务器返回数据后调用onComplete方法，将.responseText 和responseXML以及服务器返回的状态信息status等包装到response对象中，做为回调函数的参数。若是状态成功就调用success方法，失败就调用failure方法，最后不管成功仍是失败都调用callback方法。