Extjs4.0的Ajax
Extjs4.0的Ajax
Ext.Ajax 是Ext.data.Connection的一个子类，提供了用简单的方式进行Ajax的功能实现
1． 主要方法
Abort :终止一个没有完成Ajax请求
inLoading：判断指定的Ajax请求是不是正在运行
paresStatus：返回请求响应的代码
2． Ext.ElementLoader
方便我们重新构建页面
Load方法
startAutoRefresh方法
1． Ajax的基本应用
2． (function(){
3． Ext.onReady(function(){
4． Ext.Ajax.request({
5． url : 'extLession/ajax08/person.jsp',
6． params :{ id : '01'},//params是一个对象，{}代表的是对象
7． method : 'POST',
8． timeout : 300,
9． success : function(response,options){
10． //疑问：为什么response.responseText得到的是一个对象，用点不能去调用呢，弹出的对话框时undifined，而把jsp页面中的改成数组，在js中用eval去调用就可以
11． alert(eval(response.responseText)[0].name);
12． },
13． failure : function(response,options){
14． //alert(response.responseText+" "+options);
15． }
16． });
17． });
18． })();
2． Ajax中form属性的应用
3． (function(){
4． Ext.onReady(function(){
5． Ext.get("btn").on("click",function(){
6． Ext.Ajax.request({
7． url : 'extLession/ajax08/person.jsp',
8． params :{ id : '01'},//params是一个对象，{}代表的是对象
9． method : 'POST',
10． timeout : 300,
11． form : 'myform',
12． success : function(response,options){
13． //疑问：为什么response.responseText得到的是一个对象，用点不能去调用呢，弹出的对话框时undifined，而把jsp页面中的改成数组，在js中用eval去调用就可以
14． alert(eval(response.responseText)[0].name);
15． },
16． failure : function(response,options){
17． //alert(response.responseText+" "+options);
18． }
19． });
20． });
21． });
22． })();
23． //以上讲的是ajax中form的应用，form的使用在ajax中的request中，当使用form属性时，表单中不用写action和submit按钮，
24． //直接用form可以把表单中的东西传到后台，但要注意要在单击事件的情况下
25． //优点是把控制层和显示层彻底的分开
3． 学习elementLoder，当点击按钮的时候，把系统时间显示到文本框中
4． (function(){
5． Ext.onReady(function(){
6． Ext.get("btn").on("click",function(){
7． Ext.Ajax.request({
8． url : 'extLession/ajax08/person.jsp',
9． params :{ id : '01'},//params是一个对象，{}代表的是对象
10． method : 'POST',
11． timeout : 300,
12． form : 'myform',
13． success : function(response,options){
14． //疑问：为什么response.responseText得到的是一个对象，用点不能去调用呢，弹出的对话框时undifined，而把jsp页面中的改成数组，在js中用eval去调用就可以
15． alert(eval(response.responseText)[0].name);
16． },
17． failure : function(response,options){
18． //alert(response.responseText+" "+options);
19． }
20． });
21． });
22． });
23． })();
24． //以上讲的是ajax中form的应用，form的使用在ajax中的request中，当使用form属性时，表单中不用写action和submit按钮，
25． //直接用form可以把表单中的东西传到后台，但要注意要在单击事件的情况下
26． //优点是把控制层和显示层彻底的分开
4．二级联动菜单，用 ajax
(function(){
Ext.onReady(function(){
//二级菜单的联动,在日常的开发过程中要有前台的缓存
//增加一个辅助函数，把对象变成dom
function createChild(value,name){
var el = document.createElement("option");
el.setAttribute("value",value);
el.appendChild(document.createTextNode("name"));
return el;
}
//1.得到city这个dom对象,是Element对象
var cityObj = Ext.get("city");
//2.我们未这个city对象注册一个change
cityObj.on("change",function(e,select){
//3.得到的是改变后的value值
var ids = select.options[select.selectedIndex].value;
//4.ajax 请求把后台数据拿过来
Ext.Ajax.request({
url : '/extjs/extjs!menu.action',//把所对应的城市的路径写上
params : {ids:ids},//ids是时刻变化的
method : 'post',
timeout : 4000,
success : function(response,opts){
var obj = eval(response.responseText);//得到对象，用eval变成数组
//5.得到地区的那个area 的dom
var oldObj = Ext.get("area").dom;
//6.清楚里面项
while(oldObj.length>0){
oldObj.options.remove(oldObj.length-1);
}
//7.加入新的项
Ext.Array.each(obj,function(o){
Ext.get('area').dom.appendChild(createChild(o.value,o.name));//得到的是一个对象
});
}
});
});
});
})();