Extjs4 Proxy解读之三

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

  我们先来看看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方法。

           

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow