07extjs的ajax简单介绍

Ext.Ajax 是Ext.data.Connection的一个子类，提供了用简单的方式进行Ajax的功能实现
1.主要方法
	abort : 终止一个没有完成Ajax请求
	isLoading :判断指定的Ajax请求是不是正在运行
	paresStatus :返回请求响应的代码
	request :发送服务器请求(重点)
2.Ext.ElementLoader
	方便我们重新构建页面
	load方法
	startAutoRefresh方法

1.简单的ajax实例
request.js
(function(){
	Ext.onReady(function(){
		Ext.Ajax.request({
			url:'person.jsp',
			params:{id:'01'},
			method:'post',
			timeout:3000,
			success:function(response,options){
				alert(eval(response.responseText)[0].name);
				//eval()函数可计算某个字符串，并执行其中的JavaScript代码
				//不能直接识别对象但可以识别数组
			},
			failure:function(response,options){
				alert(response.responseText+""+options);
			}
		});
	});
})();

person.jsp
<%
	String id = request.getParameter("id");
	if("01".equals(id)){
		response.getWriter().write("[{id:'01',name:'uspcat.com',age:26,email:'yfc@126.com'}]");
	}
%>


2.ajax的form配置
特点：显示层与控制层完全分离，页面不用写action="" 
也不用写submit，就可以实现表单的提交
<form id="myform">
	Name:<input type="text" name="name"/><br/>
	Password:<input type="password" name="password"/><br/>
	<input type="button" value="login" id="btn"/>
</form>

Ext.get("btn").on("click",function(){
	Ext.Ajax.request({
		url:'person.jsp',
		params:{id:'01'},
		method:'post',
		timeout:3000,
		form:"myform",
		success:function(response,options){
			alert(eval(response.responseText)[0].name);
		},
		failure:function(response,options){
			alert(response.responseText+""+options);
		}
	});
});


3.Ext.ElementLoader的load方法//Ext.ElementLoader简化、集成
person.jsp文件
<input type="text" name="time" id="time"/><br/>
<input type="button" value="get time" id="btn1"/>

elementLoader.js文件
Ext.get("btn1").on("click",function(){
	var time = Ext.get("time").getLoader();//返回的是Ext.ElementLoader类
	time.load({//load方法
		url:'extjs/extjs!getTime.action',
		renderer:function(loader,response,request){//相当于request的success方法
			var t = response.responseText;
			Ext.getDom("time").value = t;
		}
	});
});


struts-extjs.xml文件
<struts>
	<package name="extjs" namespace="/extjs" extends="struts-default">
		<action name="extjs" class="ExtjsAction">
			<results name="success">/addSession.jsp</result>
		</action>
	</package>
</struts>


ExtjsAction.java文件
public void getTime() throws IOException{
	response.setCharacterEncoding("utf-8");//页面也要使用utf-8，否则乱码
	Writer writer = response.getWriter();
	writer.write(DateUtils.getFormatStringDate(new Date()));
	writer.close();
}



4.Ext.ElementLoader的startAutoRefresh方法
Ext.get("btn2").on("click",function(){
	var i = Ext.get("i").getLoader();
	time.startAutoRefresh(1000,{//startAutoRefresh方法
		url:'extjs/extjs!getI.action',
		renderer:function(loader,response,request){//相当于request的success方法
			var i = response.responseText;
			Ext.getDom("i").value = i;
		}
	});
});


private static int i = 0;
public void getI() throws IOException{
	response.setCharacterEncoding("utf-8");
	Writer writer = response.getWriter();
	i = i + 1;
	writer.write("计数器："+i);
	writer.close();
}


5.request的jsonData方式//通常还是使用params请求项
Ext.get("btn").on("click",function(){
	var data = "{id:'01',name:'uspcat.com',age:26,email:'yfc@126.com'}";
	Ext.Ajax.request({
		url:'person.jsp',
		method:'post',
		timeout:3000,
		jsonData:data,
		success:function(response,options){
			alert(eval(response.responseText)[0].name);
		},
		failure:function(response,options){
			alert(response.responseText+""+options);
		}
	});
});