ExtJS cross domain AJAX

1.我们以AJAX的方式进行访问本地文件

Ext.Ajax.request({  
    url : "data/ext-jsb2.txt",  
    success : function(xhr) {  
        console.log(xhr.responseText);  
    },  
    failure : function(xhr) {  
        console.log("Error: " + xhr.statusText);  
    }  
});  

2.我们构造一个'inline data'进行json的访问。

var bookStore = Ext.create("Ext.data.Store", {  
fields : [ "title", "author", "price" ],  
data : {  
    library : [ {  
        title : "Zend Framework",  
        author : "Zend",  
        price : 49.99  
    }, {  
        title : "Beginning F#",  
        author : "Robert Pickering",  
        price : 44.99  
    }, {  
        title : "Pro Hadoop",  
        author : "Jason Venner",  
        price : 39.99  
    } ]  
},  
proxy : {  
    type : "memory",  
    reader : {  
        type : "json",  
        root : "library"  
    }  
}  
});  

bookStore.each(function(record){  
    console.log(record.get("title") + ", " + record.get("author") + ", " + record.get("price"));  
});  

3.我们从一个存有json数据的文件中读出来转换为我们自己定义的model。
json文件：countries.txt

{  
    "countriesInEurope" : [  
        {"name":"Spain","capital":"Madrid"},  
        {"name":"France","capital":"Paris"},  
        {"name":"UK","capital":"London"},  
        {"name":"Denmark","capital":"Copenhagen"}  
    ]  
}  

请求代码

Ext.onReady(function() {  

/********* AJAX PROXY *********/  

Ext.define("Country", {  
    extend: "Ext.data.Model",  
    fields: ["name", "capital"]  
});  

var ajaxProxy = Ext.create("Ext.data.proxy.Ajax", {  
    url: "data/countries.txt",  
    model: "Country",  
    reader: {  
        type: "json",  
        root: "countriesInEurope"  
    }  
});  

/* read */  
var readOperation = Ext.create("Ext.data.Operation", {  
    action: "read"//read create destrory update  
});  
ajaxProxy.read(readOperation, function(src) {  
    var recordsArray = src.getRecords();  
    for(var i=0; i<recordsArray.length; i++) {  
        var record = recordsArray[i];  
        console.log(record.get("name") + ", " + record.get("capital"));  
    }  
});  
});  

4.本地AJAX，封装为model，存于store
本地servlet返回的json数据

{  
"results": [  
    {  
        "name": "kute",  
        "latest": "beijing"  
    },  
    {  
        "name": "why",  
        "latest": "nanyang"  
    }  
]  
}  

JsonServlet.java：用于返回上述json数据

protected void doPost(HttpServletRequest request,  
        HttpServletResponse response) throws ServletException, IOException {  
    PrintWriter writer = response.getWriter();  
    response.setContentType("application/json; charset=utf-8");  
    String json = "{\"results\":[{\"name\": \"kute\", \"latest\": \"beijing\"}, 
    {\"name\": \"why\", \"latest\": \"nanyang\"}]}";  
    System.out.println(json);  
    writer.write(json);  
}  

请求代码

/** 
 * 本地AJAX 
 * 请求到的json封装为model,并存于store 
 */  
Ext.onReady(function() {  

Ext.define("Book", {  
    extend : "Ext.data.Model",  
    fields: ["name", "latest"]  
});  

var ajaxStore = Ext.create("Ext.data.Store", {  
    model: "Book",  
    proxy : {  
        type : "ajax",  
        url : "JsonServlet",  
        reader : {  
            type : "json",  
            root : "results",  
        }  
    }  
});  

/** 
 * records: 返回的数据 
 * options: 
 * success: 获取是否成功 
 */  
ajaxStore.load({  
    callback : function(records, options, success) {  
        if (success) {  
            for (var i = 0; i < records.length; i++) {  
                console.log(records[i].get("name") + ", " + records[i].get("latest"));  
            }  
        }  
    }  
});  

});  

在firebug中查看请求url:

http://localhost:8080/orderwhy/JsonServlet?_dc=1397900046494&page=1&start=0&limit=25  

5.本地以jsonp的形式进行AJAX访问，封装为model，存于store
本地servlet返回的数据：

Ext.data.JsonP.callback1({  
    "results": [  
        {  
        "name": "kute",  
        "latest": "beijing"  
        },  
        {  
        "name": "why",  
        "latest": "nanyang"  
        }  
    ]  
  }  
)  

本地servlet代码，用于返回上述数据

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    PrintWriter writer = response.getWriter();  
    String callback = request.getParameter("callback");  
    if(null != callback && !"".equals(callback)) {  
        response.setContentType("application/json; charset=utf-8");  
        String json = "{\"results\":[{\"name\": \"kute\", \"latest\": \"beijing\"}, {\"name\": \"why\", \"latest\": \"nanyang\"}]}";  
        String re = callback + "(" + json + ")";  
        System.out.println(re);  
        writer.write(re);  
    }  
}  

请求代码

/** 
 * 跨域AJAX 
 * 请求到的json封装为model,并存于store 
 */  
Ext.onReady(function() {  

Ext.define("Book", {  
    extend : "Ext.data.Model",  
    fields: ["name", "latest"]  
});  

var ajaxStore = Ext.create("Ext.data.Store", {  
    model: "Book",  
    proxy : {  
        type : "jsonp",  
        url : "JsonServlet",  
        reader : {  
            type : "json",  
            root : "results",  
        },  
    }  
});  

/** 
 * records: 返回的数据 
 * options: 
 * success: 获取是否成功 
 */  
ajaxStore.load({  
    callback : function(records, options, success) {  
        if (success) {  
            for (var i = 0; i < records.length; i++) {  
                console.log(records[i].get("name") + ", " + records[i].get("latest"));  
            }  
        }  
    }  
});  

});  

在firebug中查看请求的url:

http://localhost:8080/orderwhy/JsonServlet?_dc=1397899157107&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1  

其中，_dc为缓存key，可以自行设置（下例），Ext.data.JsonP.callback1是要回调的函数

6.跨域访问:
测试数据：

http://api.cdnjs.com/libraries

/** 
 * 跨域AJAX 
 * 请求到的json封装为model,并存于store 
 */  
Ext.onReady(function() {  

Ext.define("Book", {  
    extend : "Ext.data.Model",  
    fields : [ {  
        name : "nameJ",  
        mappping : "name"  
    }, {  
        name : "latestJ",  
        mapping : "latest"  
    } ]  
});  

var ajaxStore = Ext.create("Ext.data.Store", {  
    model: "Book",  
    proxy : {  
        type : "jsonp",  
        url : "http://api.cdnjs.com/libraries",  
        reader : {  
            type : "json",  
            root : "results",  
        },  
        cacheString: "myCacheKey",  
        extraParams: {  
            param1: "value1",  
            param2: "value2"  
        },  
        noCache: true  
    }  
});  

/** 
 * records: 返回的数据 
 * options: 
 * success: 获取是否成功 
 */  
ajaxStore.load({  
    callback : function(records, options, success) {  
        if (success) {  
            for (var i = 0; i < records.length; i++) {  
                console.log(records[i].get("nameJ") + ", " + records[i].get("latestJ"));  
            }  
        }  
    }  
});  

});  

在firebug中查看请求的url:

http://api.cdnjs.com/libraries?myCacheKey=1397899614316¶m1=value1¶m2=value2&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1  

最后给推荐一本英文电子书：Practical Ext JS 4,非常好，Practical Ext JS 4
还有这本书上的一个关于MVC的一个例子：MVCwithExtJS4