Sencha Touch 數據層篇 Proxy(下)

服務端代理

服務端代理，有傳統的Ajax異步代理，支持跨域請求的JsonP代理(需要服務端支持)。其中Ajax代理和JsonP代理都需要配置url來指明服務器的API接口地址。

Ajax代理(type: 'ajax')

Ajax大家是最熟悉不過了，通過url對服務器的數據進行存取，其數據傳輸格式為xml或json，下面是一個使用Ajax代理的示例。

Ext.define('User', {
	extend: 'Ext.data.Model',
	fields: ['id', 'name', 'email']
});
var store = Ext.create('Ext.data.Store', {
	model: 'User',
	proxy: {
		type: 'ajax',
		url: 'users.json',
        reader: {
            type: 'json',
            root: 'users'
        }
	}
});
store.load({
    callback: function(records, operation, success){
        console.log(records);
    }
});

在瀏覽器的控制台觀察到以下結果，則表明我們的數據已經被正確地加載並解析了。:

JsonP代理(type: 'jsonp')

JsonP是一個非官方的協議，服務器向客戶端回寫一段調用客戶端函數的js代碼，將要返回的數據作為本次函數調用所使用的參數。客戶端函數被調用，因此也獲得了服務端給出的數據。繞了一圈，卻也成功地繞過了瀏覽器的跨域檢測。<

下面是一個Json轉JsonP的例子。

//Json格式
{
    users: [
        {
            id: 1,
            name: "Ed Spencer",
            email: "[e-mail]"
        }
    ]
}

//JsonP格式
someCallback({
    users: [
        {
            id: 1,
            name: "Ed Spencer",
            email: "[e-mail]"
        }
    ]
});

可以看到，JsonP格式只是簡單地對Json格式進行了一些修飾，並無太大區別。Json也好，JsonP也罷，它們本質上都只是一串按特定規則形成的字符串罷了。如果你要開發服務端，把要返回的數據處理成Json、JsonP標准的字符串，寫到頁面中就可以了，如果要更嚴格些，還需要定義頁面MIME類型。

關於JsonP，只需要知道這些對於我們來講就夠用了。因為Sencha Touch已經幫我們隱藏了大部分細節，我們可以像使用Ajax那樣來使用JsonP。接下來我們先用現成的api試試效果吧。

這是一個根據郵編返回地名的JsonP服務：
http://www.geonames.org/postalCodeLookupJSON
在瀏覽器中輸入地址
http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=callback1
我們到以下結果：

callback1({
    postalcodes : [ {
        adminName2 : "Westchester",
        adminCode2 : "119",
        postalcode : "10504",
        adminCode1 : "NY",
        countryCode : "US",
        lng : -73.700942,
        placeName : "Armonk",
        lat : 41.136002,
        adminName1 : "New York"
    } ]
});

根據返回的數據的結構，我們構造出如下模型:

Ext.define('PostalCode', {
    extend : 'Ext.data.Model',
    fields : [ 
        'postalcode',
    	'adminName1',
        'adminName2',
        'adminCode1',
        'adminCode2',
        'countryCode',
        'placeName',
        'lat',
        'lng'
    ]
});

var store = Ext.create('Ext.data.Store', {
    model : 'PostalCode',
    proxy : {
        type : 'jsonp',
        url : 'http://www.geonames.org/postalCodeLookupJSON',
        timeout: 
        reader : {
            type : 'json',
            root : 'postalcodes'
        },
//      callbackKey : 'callback' //默認為'callback'，剛好符合這個Api的要求，因此不用改。
    }
});

store.load({
    params : {
        postalcode : '10504',
        country : 'US'
    },
    callback : function(records, operation, success) {
        console.log(records);
    }
});

在瀏覽器的控制台可以看到輸出如下信息：

有時候數據不能被正確加載，此時就需要分析錯誤代碼了。錯誤信息被包含在operation參數中，我們使用getErro方法獲得它，便可以確定錯誤的類型。錯誤代碼有三個：abort、error以及timeout。

store.load({
    callback: function(records, operation, success){
    	alert(operation.getError());
    }
});

直連代理(type: 'direct')

因為我也不知道direct連接是怎么一回事，所以這個沒法寫啊，有知道的朋友給介紹一下。