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