Extjs 학습 노트 (8) Ajax

Ext. Ajax 는 Ext. data. connection 의 하위 클래스 로 간단 한 방식 으로 Ajax 의 기능 을 실현 하 는 1. 주요 방법 을 제공 합 니 다.    abort: Ajax 요청 이 완료 되 지 않 은 것 을 종료 합 니 다.    isLoading: 지정 한 Ajax 요청 이 실행 중인 지 판단    pares Status: 응답 을 요청 한 코드 를 되 돌려 줍 니 다.    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 방법
자동 리 셋, 백 스테이지 리 셋.
/ extjs 4 / 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.                  
				}
			});
		});
	});
})();