Extjs学习笔记(八) Ajax

Ext.Ajax 是 Ext.data.Connection的一个子类,提供了用简单的方式进行Ajax的功能实现
1.主要方法
    abort : 终止一个没有完成Ajax请求
    isLoading : 判断指定的Ajax请求是不是正在运行
    paresStatus : 返回请求响应的代码
    request : 发送服务器请求 -----> 重点

 

//eval()

执行括号内部的字符串

如：eval("alert(''hello)")

 

(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);
			},
			failure  :function(response , options){
				alert(response.responseText+" "+options)
			}
		});
	})
})()

 

1.1 Ext.Ajax.request form

person.jsp

html:

<form id="myform">
			Name:
			<input type="text" name="name">
			<br>
			Pass:
			<input type="password" name="pass">
			<br>
			<input type="button" value="login" id="b">
		</form>

 

ajaxform.js:

(function(){
	Ext.onReady(function(){
		Ext.get('b').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)
				}
			});
		})
	})
})()

 

2.Ext.ElementLoader    
    方便我们重新构建页面
    load方法

http://adminstrator:8080/extjs4/GetTimeServlet

返回内容: 2012年7月1日

JS：

Ext.onReady(function(){
	Ext.get('b1').on("click",function(){
		var time = Ext.get("time").getLoader();
		time.load({
			url:'http://adminstrator:8080/extjs4/GetTimeServlet',
			renderer:function(loader,response,request){
				var time = response.responseText;
				Ext.getDom("time").value = time;
			}
		});
	});
});

 

    startAutoRefresh 方法

自动刷新，去后台刷新。

/extjs4/GetIServlet返回：一个累加器 ：计数器1，计数器2

 

	Ext.get('b2').on("click",function(){
		var i = Ext.get('i').getLoader();
		i.startAutoRefresh(1000,{
			url:'/extjs4/GetIServlet',
			renderer:function(loader,response,request){
				var i = response.responseText;
				Ext.getDom("i").value = i;
			}			
		});
	});

jsonData,属性将字符串参数 按照JSON格式传到后台。
3.多级联动菜单   

html：

                <select name="city" id="city">
			<option value="beij" selected>
				北京市
			</option>
			<option value="tianj">
				天津市
			</option>
		</select>
		<select name="area" id="area">
			<option value="def" selected>
				-----------
			</option>
		</select>

 

js：

(function(){ 
    //创建HTMLElement
	function createChild(value,name){
		var el = document.createElement("option");
		el.setAttribute("value",value);
		el.appendChild(document.createTextNode(name));
		return el;
	}
	var data = {};
	
	Ext.onReady(function(){
		//1.得到city这个dom对象
		var cityObj = Ext.get("city");
		//2.我们为这个city对象注册一个change
		cityObj.on("change",function(e,select){
			//3.得到改变后的数值
			var ids =  select.options[select.selectedIndex].value;
			//3.1 他先去前台的缓存变量中查数据,当没有的时候在去后台拿
			if(data["city"]){
				//直接操作
			}else{
				//做ajax
			}
			//4.ajax请求把后台数据拿过来
			Ext.Ajax.request({
				url:'/extjs4/MenuServlet',
				params:{ids:ids},
				method:'post',
				timeout:4000,
				success:function(response,opts){
					var obj = eval(response.responseText);
					//5.得到地区的哪个对象area DOM
					var oldObj = Ext.get("area").dom;
					//6.清除里面项
					while(oldObj.length>0){
						oldObj.innerHTML= "";
					}
					//7.加入新的项
					Ext.Array.each(obj,function(o){
						Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name));
					});
					//8.把从数据库拿到的数据进行前台页面缓存
				}
			});
		});
	});
})();