服務器代理（proxy）

在上一節咱們介紹了客戶端的幾種代理，本節的主要內容是介紹如何使用服務器端代理，將重點介紹AjaxProxy，這是咱們最經常使用的代理方式。

Ajax

web應用程序開發過程當中，與服務器端交互的技術最經常使用的就是Ajax了。Ajax 是使用Javascript建立一個HttpRequest，採用異步的方式從服務器獲取數據。咱們先看一個簡單的示例：

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，而後建立了Person類的數據倉庫 store，store 使用了ajax代理，經過url向服務器請求數據，ajax代理的reader 配置項是告訴程序以何種方式讀取請求到的數據。

咱們從服務器返回的JSON字符串以下：

{users:[{name:'www.qeefee.com', age:1}, {name:'Tom', age:26}]}

你們先猜測一下運行結果？按照上一節的邏輯，此處應該彈出一個對話框，上面將內容內容顯示出來，但真正運行的時候獲得的倒是空的內容，截圖以下：

 

難道咱們沒有請求到數據？固然不是，若是你打開網絡跟蹤，會發現程序已經將成功獲得了這段JSON字符串。那是爲何仍然是空呢？

緣由是當咱們調用load()方法的時候，咱們告訴store去請求數據吧，而後store就使用ajax的方式請求url，注意，ajax 是異步的，因此當咱們調用load()方法之後，立刻執行輸出的時候，store仍然是空的，可能它還在等待服務器響應數據。

因此，在咱們使用ajax方式加載數據的時候，就須要爲load() 方法添加一個callback 方法，當數據加載完成之後，再callback方法中進行數據輸出，修改load方法的調用：

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 />'));
        }
    }
});

刷新頁面，此次纔是咱們想要的結果：

 

ajax 帶參數的請求

咱們打開網絡跟蹤，刷新頁面，跟蹤咱們全部的網絡請求：

 

找到getjson的請求，點擊查看明細：

 

在這個URL中能夠看到，ExtJS 其實已經爲咱們添加了一些參數，包括 page、start和limit。這些參數是從哪兒來的呢？

在使用ajax進行請求的時候，ajax代理會調用自身的read方法，該方法的第一個參數是Ext.data.Operation 類型，它用來配置咱們如何進行請求。咱們在load 方法中能夠經過配置項傳遞一些參數，load在調用read方法時將這些參數傳遞過去，read則會根據這些參數生成Ext.data.Operation 的一個實例。因此，咱們能夠這樣來傳遞參數：

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 />'));
        }
    }
});

咱們再次跟蹤請求，傳遞的地址變成了 /SampleExtJS/sample/getjson?_dc=1374141754304&name=QF&page=2&start=25&limit=10

經過傳遞這些參數，咱們能夠完成分頁、查詢等操做。

JsonP

在Javascript 中，因爲跨域操做存在很嚴重的安全隱患，因此瀏覽器不容許咱們直接使用ajax 進行跨域請求。當用到跨域請求的時候，咱們可使用請求javascript 資源的形式，將要請求的Json數據做爲Javascript 代碼加載到瀏覽器中（瀏覽器不會阻止跨域的資源請求，資源包括Javascript、css、圖片等）。具體作法：使用 Javascript 動態添加一個script 標籤，將要請求的資源URL 做爲src的屬性傳遞過去（請求url中一般包含一個callback方法名的參數），服務器端對請求的數據進行包裝，而後返回給客戶端。

在ExtJS 中咱們能夠輕鬆的使用JsonP代理進行跨域的數據請求：

//建立Store
var store = Ext.create('Ext.data.Store', {
    model: 'Person',
    proxy: {
        type: 'jsonp',
        url: 'http://www.abc.com/sampleextjs/sample/getjsonp',
        reader: {
            type: 'json',
            root:'users'
        }
    }
});

在測試中，咱們的本機名是localhost，因此對域名abc.com進行數據請求是跨域的操做（咱們在第二節 bootstrap.js的工做方式 中已經對本機的hosts文件進行了修改，將abc.com也指向本地）。

而後添加服務器段代碼，在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}]})";
}

這段代碼中，咱們首先獲得請求中的callback參數，若是沒有則默認爲「callback」字符串。而後將拼接好的JSON字符串做爲參數傳遞給callback方法，咱們在這裏返回的字符串要遵循Javascript 語法。

編譯項目，而後刷新頁面，打開開發人員工具，跟蹤網絡請求，你會發如今進行網絡請求的時候，ExtJS 會自動爲請求地址添加回調方法，url中包含參數：callback=Ext.data.JsonP.callback1，根據傳入的callback參數，咱們服務器返回的字符串爲：

Ext.data.JsonP.callback1({ users: [{ name: 'www.qeefee.com', age: 1 }, { name: 'QF', age: 26 }] })

這段代碼能夠被當作Javascript代碼在加載完成後執行。咱們的運行結果如圖：

 

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：

public class User
{
    public string name { get; set; }
    public int age { get; set; }
}

而後建立針對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針對不一樣的HttpMethod 選擇不一樣的操做，因此當咱們直接使用瀏覽器請求API的時候，咱們將獲得第一個Get方法的返回結果：

 

因爲咱們沒有指明返回的數據格式，因此默認爲咱們將對象轉換爲Xml。咱們在ExtJS中使用Rest代理：

//建立Store
var store = Ext.create('Ext.data.Store', {
    model: 'Person',
    proxy: {
        type: 'rest',
        url: rootUrl + 'api/user/',
        reader: {
            type: 'json'
        }
    }
});

而後使用load方法加載數據：

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 />'));
    }
});

此時跟蹤Network請求：

 

紅框中的是咱們請求的URL和獲得的數據的預覽。咱們程序完成解析後會彈出提示：

 

此時咱們能夠對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 等複雜控件。