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方法。