轉(zhuǎn)載自起飛網(wǎng)，原文地址：http://www.qeefee.com/extjs-course-6-server-proxy
在上一節(jié)我們介紹了客戶端的幾種代理，本節(jié)的主要內(nèi)容是介紹如何使用服務(wù)器端代理，將重點(diǎn)介紹AjaxProxy，這是我們最常用的代理方式。
web應(yīng)用程序開(kāi)發(fā)過(guò)程中，與服務(wù)器端交互的技術(shù)最常用的就是Ajax了。Ajax 是使用Javascript創(chuàng)建一個(gè)HttpRequest，采用異步的方式從服務(wù)器獲取數(shù)據(jù)。我們先看一個(gè)簡(jiǎn)單的示例：
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，然后創(chuàng)建了Person類的數(shù)據(jù)倉(cāng)庫(kù) store，store 使用了ajax代理，通過(guò)url向服務(wù)器請(qǐng)求數(shù)據(jù)，ajax代理的reader 配置項(xiàng)是告訴程序以何種方式讀取請(qǐng)求到的數(shù)據(jù)。
我們從服務(wù)器返回的JSON字符串如下：
{users:[{name:'www.qeefee.com', age:1}, {name:'Tom', age:26}]}大家先猜想一下運(yùn)行結(jié)果？按照上一節(jié)的邏輯，此處應(yīng)該彈出一個(gè)對(duì)話框，上面將內(nèi)容內(nèi)容顯示出來(lái)，但真正運(yùn)行的時(shí)候得到的卻是空的內(nèi)容，截圖如下：
難道我們沒(méi)有請(qǐng)求到數(shù)據(jù)？當(dāng)然不是，如果你打開(kāi)網(wǎng)絡(luò)跟蹤，會(huì)發(fā)現(xiàn)程序已經(jīng)將成功得到了這段JSON字符串。那是為什么仍然是空呢？
原因是當(dāng)我們調(diào)用load()方法的時(shí)候，我們告訴store去請(qǐng)求數(shù)據(jù)吧，然后store就使用ajax的方式請(qǐng)求url，注意，ajax 是異步的，所以當(dāng)我們調(diào)用load()方法以后，馬上執(zhí)行輸出的時(shí)候，store仍然是空的，可能它還在等待服務(wù)器響應(yīng)數(shù)據(jù)。
所以，在我們使用ajax方式加載數(shù)據(jù)的時(shí)候，就需要為load() 方法添加一個(gè)callback 方法，當(dāng)數(shù)據(jù)加載完成以后，再callback方法中進(jìn)行數(shù)據(jù)輸出，修改load方法的調(diào)用：
store.load({ callback: function (records, operation, success) { if (success) { var msg = []; store.each(function (person) { msg.push(person.get('name') + ' ' + person.get('age')); }); Ext.MessageBox.alert('提示', msg.join('<br />')); } }});刷新頁(yè)面，這次才是我們想要的結(jié)果：
我們打開(kāi)網(wǎng)絡(luò)跟蹤，刷新頁(yè)面，跟蹤我們所有的網(wǎng)絡(luò)請(qǐng)求：
找到getjson的請(qǐng)求，點(diǎn)擊查看明細(xì)：
在這個(gè)URL中可以看到，ExtJS 其實(shí)已經(jīng)為我們添加了一些參數(shù)，包括 page、start和limit。這些參數(shù)是從哪兒來(lái)的呢？
在使用ajax進(jìn)行請(qǐng)求的時(shí)候，ajax代理會(huì)調(diào)用自身的read方法，該方法的第一個(gè)參數(shù)是Ext.data.Operation 類型，它用來(lái)配置我們?nèi)绾芜M(jìn)行請(qǐng)求。我們?cè)趌oad 方法中可以通過(guò)配置項(xiàng)傳遞一些參數(shù)，load在調(diào)用read方法時(shí)將這些參數(shù)傳遞過(guò)去，read則會(huì)根據(jù)這些參數(shù)生成Ext.data.Operation 的一個(gè)實(shí)例。所以，我們可以這樣來(lái)傳遞參數(shù)：
store.load({ page: 2, limit: 10, params: { name:'QF' }, callback: function (records, operation, success) { if (success) { var msg = []; store.each(function (person) { msg.push(person.get('name') + ' ' + person.get('age')); }); Ext.MessageBox.alert('提示', msg.join('<br />')); } }});我們?cè)俅胃櫿?qǐng)求，傳遞的地址變成了 /SampleExtJS/sample/getjson?_dc=1374141754304&name=QF&page=2&start=25&limit=10
通過(guò)傳遞這些參數(shù)，我們可以完成分頁(yè)、查詢等操作。
在Javascript 中，由于跨域操作存在很嚴(yán)重的安全隱患，所以瀏覽器不允許我們直接使用ajax 進(jìn)行跨域請(qǐng)求。當(dāng)用到跨域請(qǐng)求的時(shí)候，我們可以使用請(qǐng)求javascript 資源的形式，將要請(qǐng)求的Json數(shù)據(jù)作為Javascript 代碼加載到瀏覽器中（瀏覽器不會(huì)阻止跨域的資源請(qǐng)求，資源包括Javascript、css、圖片等）。具體做法：使用 Javascript 動(dòng)態(tài)添加一個(gè)script 標(biāo)簽，將要請(qǐng)求的資源URL 作為src的屬性傳遞過(guò)去（請(qǐng)求url中通常包含一個(gè)callback方法名的參數(shù)），服務(wù)器端對(duì)請(qǐng)求的數(shù)據(jù)進(jìn)行包裝，然后返回給客戶端。
在ExtJS 中我們可以輕松的使用JsonP代理進(jìn)行跨域的數(shù)據(jù)請(qǐng)求：
//創(chuàng)建Storevar store = Ext.create('Ext.data.Store', { model: 'Person', proxy: { type: 'jsonp', url: 'http://www.abc.com/sampleextjs/sample/getjsonp', reader: { type: 'json', root:'users' } }});
在測(cè)試中，我們的本機(jī)名是localhost，所以對(duì)域名abc.com進(jìn)行數(shù)據(jù)請(qǐng)求是跨域的操作（我們?cè)诘诙?jié) bootstrap.js的工作方式 中已經(jīng)對(duì)本機(jī)的hosts文件進(jìn)行了修改，將abc.com也指向本地）。
然后添加服務(wù)器段代碼，在SampleController 中添加getJsonP方法：
public string GetJsonP(){ string callback = Request["callback"]; if (string.IsNullOrEmpty(callback)) callback = "callback"; Response.ContentType = "text/javascript"; return callback + "({users:[{name:'www.qeefee.com', age:1}, {name:'QF', age:26}]})";}
這段代碼中，我們首先得到請(qǐng)求中的callback參數(shù)，如果沒(méi)有則默認(rèn)為“callback”字符串。然后將拼接好的JSON字符串作為參數(shù)傳遞給callback方法，我們?cè)谶@里返回的字符串要遵循Javascript 語(yǔ)法。
編譯項(xiàng)目，然后刷新頁(yè)面，打開(kāi)開(kāi)發(fā)人員工具，跟蹤網(wǎng)絡(luò)請(qǐng)求，你會(huì)發(fā)現(xiàn)在進(jìn)行網(wǎng)絡(luò)請(qǐng)求的時(shí)候，ExtJS 會(huì)自動(dòng)為請(qǐng)求地址添加回調(diào)方法，url中包含參數(shù)：callback=Ext.data.JsonP.callback1，根據(jù)傳入的callback參數(shù)，我們服務(wù)器返回的字符串為：
Ext.data.JsonP.callback1({ users: [{ name: 'www.qeefee.com', age: 1 }, { name: 'QF', age: 26 }] })這段代碼可以被當(dāng)做Javascript代碼在加載完成后執(zhí)行。我們的運(yùn)行結(jié)果如圖：
ExtJS 提供的這種方式大大簡(jiǎn)化了我們客戶端的處理代碼，方便我們進(jìn)行JsonP跨域請(qǐng)求。
JsonP代理的其它操作跟Ajax代理基本一直，不再過(guò)多介紹。接下來(lái)看一下Rest代理。
Rest 指的是什么呢？根據(jù)我個(gè)人的理解，我覺(jué)得Rest像是一種開(kāi)發(fā)規(guī)范，由于Http請(qǐng)求是無(wú)狀態(tài)的，所以在對(duì)網(wǎng)絡(luò)資源進(jìn)行請(qǐng)求的時(shí)候，我們通常會(huì)將狀態(tài)（要執(zhí)行的操作：增刪改查等，以及要操作的數(shù)據(jù)）作為參數(shù)傳遞給服務(wù)器，而Rest 則規(guī)定，HttpMethod 的GET、POST、PUT、DELETE分別對(duì)應(yīng)不同的操作（Get 對(duì)應(yīng)查找、PUT對(duì)應(yīng)更新、POST對(duì)應(yīng)新增、DELETE對(duì)應(yīng)刪除）。關(guān)于更完整的Rest，請(qǐng)參照《深入淺出REST》。
在ASP.NET MVC 中，我們可以使用Web API 輕松的實(shí)現(xiàn)RESTful應(yīng)用程序。
我們首先在服務(wù)器段用C#代碼定義一個(gè)Model：
public class User{ public string name { get; set; } public int age { get; set; }}
然后創(chuàng)建針對(duì)User類操作的UserController，它需要繼承自ApiController，代碼如下：
public class UserController : ApiController{ public static List<User> UserList = null; static UserController() { if (UserList == null) { UserList = new List<User>(); UserList.Add(new User() { name = "www.qeefee.com", age = 1 }); UserList.Add(new User() { name = "QF", age = 26 }); } } // GET api/<controller> public List<User> Get() { return UserList; } // GET api/<controller>/5 public List<User> Get(string name) { List<User> result = new List<User>(); foreach (User item in UserList) { if (item.name == name) result.Add(item); } return result; } // POST api/<controller> public void Post([FromBody]User user) { UserList.Add(user); } // PUT api/<controller>/5 public void Put([FromBody]User user) { UserList.Add(user); } // DELETE api/<controller>/5 public void Delete(string name) { for (int i = UserList.Count - 1; i >= 0; i--) { User user = UserList[i]; if (user.name == name) { UserList.RemoveAt(i); } } }}
由于API針對(duì)不同的HttpMethod 選擇不同的操作，所以當(dāng)我們直接使用瀏覽器請(qǐng)求API的時(shí)候，我們將得到第一個(gè)Get方法的返回結(jié)果：
由于我們沒(méi)有指明返回的數(shù)據(jù)格式，所以默認(rèn)為我們將對(duì)象轉(zhuǎn)換為Xml。我們?cè)贓xtJS中使用Rest代理：
//創(chuàng)建Storevar store = Ext.create('Ext.data.Store', { model: 'Person', proxy: { type: 'rest', url: rootUrl + 'api/user/', reader: { type: 'json' } }});
然后使用load方法加載數(shù)據(jù)：
store.load({ callback: function (records, operation, success) { var msg = []; store.each(function (item) { msg.push(item.get('name') + ' ' + item.get('age')); }); Ext.MessageBox.alert('提示', msg.join('<br />')); }});此時(shí)跟蹤Network請(qǐng)求：
紅框中的是我們請(qǐng)求的URL和得到的數(shù)據(jù)的預(yù)覽。我們程序完成解析后會(huì)彈出提示：
此時(shí)我們可以對(duì)store執(zhí)行一些CRUD操作，跟蹤一下網(wǎng)絡(luò)請(qǐng)求和服務(wù)器段代碼，查看一下Rest代理是如何工作的。
Direct 代理使用Ext.Direct 向服務(wù)器發(fā)送數(shù)據(jù)。
Ext.Direct 技術(shù)的好處是，允許你像調(diào)用Javascript 方法一樣調(diào)用服務(wù)器端代碼。我們將在后面的章節(jié)中詳細(xì)的介紹 Ext.Direct。當(dāng)我們定義好Ext.Direct 以后，才能夠使用Direct代理來(lái)請(qǐng)求數(shù)據(jù)。
例如我們?cè)贏PI中看到的代碼：
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);
本節(jié)內(nèi)容介紹了服務(wù)器端代理的使用方法，這些基礎(chǔ)性的內(nèi)容比較枯燥，但卻是學(xué)習(xí)ExtJS 復(fù)雜控件的基礎(chǔ)，在這些內(nèi)容的基礎(chǔ)上，我們才能夠更加輕松的學(xué)習(xí)Grid、Tree 等復(fù)雜控件。
聯(lián)系客服
