ExtJS 강좌 - Ajax 비동기 통신에 대하여 알아보자

이번장은 간단하게 ExtJS에서 제공하는 Ajax에 대하여 포스팅 해보도록 하겠습니다.

jQuery의 ajax를 접근해보셨던 분들이시면 쉽게 이해하실 수 있습니다.

간단한 예를 들어서 설명을 진행하겠습니다.

우선 ExtJS의 스크립트 태그는 다음과 같습니다.

Ext.onReady(function(){
   Ext.create('Ext.panel.Panel',{
	    title : 'AJAX 비동기 예제',
     	renderTo : Ext.getBody(),
    	items : [{
    		xtype : 'textfield',
    		fieldLabel : '아이디',
    		id : 'user_id'
    	},{
    		xtype : 'textfield',
    		fieldLabel : '제목',
    		id : 'title'
    	}],
    	fbar : [{
    		xtype : 'button',
    		text : '전송',
    		handler : function(btn){
    			var user_id = Ext.getCmp("user_id").getValue();
    			var title = Ext.getCmp("title").getValue();
    			
    			Ext.Ajax.request({
					url : '/submit.jsp',
					method : 'POST',
					params : {
						user_id : user_id,
						title : title
					},
					success : function(response) {
						var result = Ext.JSON.decode(response.responseText);
						Ext.MessageBox.show({
				  				title : '응답결과',
								msg : '아이디:'+result.id+',제목:'+result.title,
								buttons : Ext.MessageBox.YES,
								icon : Ext.MessageBox.INFO
				  		})  
					},
		  			failure : function(){
		  				alert("에러발생");
		  			}
		  		}); 
    		}
    	}]
	})
});

위에서 기본패널에 텍스트 컴포넌트 2개와 하단툴바에 버튼 생성을 하였습니다.

버튼 클릭이벤트 발생 시점에 'Ext.Ajax.request' 를 이용하여 비동기 통신을 호출하게 됩니다.

'Ext.Ajax.request' 의 각 속성에 대한 설명은 다음과 같습니다.

url : 비동기 호출을 할 URL주소값입니다.

method : form태그의 method와 동일한 개념의 호출방식을 작성해주면 됩니다.

params : 비동기 호출 페이지에 넘겨줄 parameter 데이터 값입니다.

success : 성공

failure : 실패

속성을 보면 jQuery에서 지원하는 $.ajax 와 거의 동일한 구조입니다.

비동기 호출페이지인 submit.jsp 파일을 생성하여 

다음처럼 JSON RESPONSE 하는 코드를 작성해보도록 하겠습니다.

JSON 파싱을위한 라이브러리는 

기존과 동일한 json-simple 라이브러리를 이용하겠습니다.

2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기

submit.jsp 샘플코드

String user_id = request.getParameter("user_id");
String title = request.getParameter("title");
	
JSONObject jsonObj = new JSONObject();
jsonObj.put("id", user_id);
jsonObj.put("title", title);
	
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();

위코드에서 알아보고자 한 부분은 사용자 페이지에서 전달받은 user_id와 title에 대한 값을 확인해보고 

request받은 값들을 다시그대로 json 파싱하여 클라이언트 페이지로 response 해주는 샘플코드입니다.

실행결과를 한번 확인해보도록 하겠습니다.

초기화면

값입력후 전송버튼클릭

ajax통신결과

정상적으로 Ajax 통신이 이루어진것을 확인하였습니다.

by 개발로짜