extjs学习08——extjs的ajax初步简介_extjs ajax requestcomplete

extjs学习08——extjs的ajax初步简介
学习自dojo china陈治文老师的extjs视频教程
本篇日志是对视频章节的小结
 
 
/**Ext.Ajax singleton
Ext.data.Connection的一个单例。该类是用来和你的服务端代码进行交互的。它的用法如下:
Ext.Ajax.request({
    url: 'page.php',
    params: {
        id: 1
    },
    success: function(response){
        var text = response.responseText;
        // process server response here
    }
});
通过修改Ext.Ajax类的属性，可以设置所有请求的默认配置: 
Ext.Ajax.timeout = 60000; // 60秒
所有在Ajax请求request方法中设置的选项都会覆盖Ext.Ajax类上对应的默认选项。在以下示例代码中，请求的超时时间将会是60秒。
Ext.Ajax.timeout = 120000; // 120秒
Ext.Ajax.request({
    url: 'page.aspx',
    timeout: 60000
});
一般来说，在你的应用中，所有Ajax请求都会使用该类。单独创建Ext.data.Connection实例的主要原因是，
存在一系列请求，它们共享相同的配置，但是这些配置跟应用中的所有其它请求都不相同。
*/
 
GridPanel
1.插入：由表单向服务器提交，提交完了后将GridPanel重载数据
2.插入：由表单向服务器提交，提交完了后在GridPanel的store插入一条数据
3.处理分页插入：由表单向服务器提交，提交完了在GridPanel的store第一行插入一条数据，将最后一行删除
 
ajax提交方式：1.get 2.post 3.xml 4.json（其实xml和json都是post请求）
一、简单请求
/**index.html*/
<script type="text/javascript">
	Ext.onReady(function(){
		Page.configRootPath();
		Ext.Ajax.on("requestcomplete",function(_conn,_response,_options){
										alert(_response.responseXML.xml);
										//json通讯：_response.responseText
									});
		Ext.Ajax.request({
			url:Page.ROOTPATH+"server/app/test/8/first.asp",
				//json通讯：url:Page.ROOTPATH+"server/app/test/8/json.asp",
							//jsonData:{name:"abc",sex:"男"}
			//method:"GET",get请求的写法
			params:{name:"abc",sex:"男"}
		});
	});
 
</script>
 
/**first.asp*/
<%
	Write.writeXML(HttpMessage.getPostInstance());
	//Write.writeXML(HttpMessage.getGetInstance);get请求的写法
%>
 
 
二、xml文档提交（当请求数据过大时，建议采用xml格式）
/**xml.html*/
<script type="text/javascript">
	Page.configRootPath();
	Ext.Ajax.on("requestcomplete",function(_conn,_response,_options){
									alert(_response.responseXML.xml);
								});
	var _msg = new Message();
	_msg.setVariable("name","abc");
	_msg.setVariable("sex","男");
	Ext.Ajax.request({
		url:Page.ROOTPATH+"server/app/test/8/xml.asp",
		xmlData:_msg.getXML()
	});
</script>
 
/**xml.asp*/
<%
	Write.writeXML(XMLMessage.getAjaxInstance());
%>
 
三、json方式
/**index.html*/
<script type="text/javascript">
	Ext.onReady(function(){
		Page.configRootPath();
		Ext.Ajax.on("requestcomplete",function(_conn,_response,_options){
										alert(_response.responseText);
									});
		Ext.Ajax.request({
			url:Page.ROOTPATH+"server/app/test/8/json.asp",
			jsonData:{name:"abc",sex:"男"}
		});
	});
 
</script>
 
/**json.asp*/
<%
	Write.writeXML(HttpMessage.getPostInstance());
%>