ExtJS 4.2 教程-06：服務器代理（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 等復雜控件。