[ExtJS강좌 26] 비동기 Ajax 사용하기 - (Ext.Ajax.request)

정말 오랫만에 ExtJS 관련 포스팅을 하게되었다 .... 으캬캬캬캬 

사실 ... 회사 플젝 + 블로그 포스팅 + 개인플젝 리팩토링때문에 강좌를 미뤘었다.... 

이번 포스팅에는 Ext.Ajax.request를 사용하여 비동기 처리를 하고자 한다.

jQuery($.ajax) = ExtJS(Ext.Ajax.request)

사용법 또한 거의 동일하다고 보면 되겠다.

ExtJS에서는 보통 ajax 사용시 

      form패널의 경우 submit을 해주고

     grid 또는 tree에서는 store -> proxy를 사용하여 비동기 처리를 한다.

하지만 Ext.Ajax.request 또한 필요에 따라 사용하게 되므로 포스팅을 해보도록 하겠다.

간단하게 회원가입에서 아이디 중복 조회를 한다는 시나리오를 가지고 한번 테스트를 해보도록 하자

조  건 

1. db에는 "user"라는 회원이 존재한다.

2. 중복검색 버튼 클릭시 user 라고 중복 조회시 alert으로 "존재하는 

    회원입니다."라는 문구 출력

3. user1이라고 중복 조회시 alert으로 "SUBMIT" 이라는 문구 출력

※ 해당 포스팅은 MVC 방식을 사용하지 않은 예제이므로 

    MVC 방식으로 진행하고자 한다면 코드를 잘 나누도록 하자

login.html 페이지 ExtJS 설정을 위한 JS/CSS 파일 INCLUDE

<link rel="stylesheet" type="text/css" href="/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"/>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

JAVASCRIPT 코드

Ext.onReady(function(){
	//꼭 form패널로 하지 않아도 된다.
	Ext.create('Ext.form.Panel',{
		title : '회원가입예제',
	    renderTo : Ext.getBody(),
	    layout: 'hbox',
	    items : [{
		    fieldLabel: '아이디',
		    xtype : 'textfield',
		    id : 'userId'
	    },{
	    	xtype : 'button',
	    	text : '중복조회',
	    	handler : function(){
	    		var userId = Ext.getCmp("userId").getValue();
	    		//ajax 호출
				Ext.Ajax.request({
					//호출 URL
					url : '/loginInfo.jsp',
					//submit 방식
					method : 'POST',
					//서버 전송 parameter
					params : {
						userId : userId
					},
					//성공
					success : function(response) {
						//response.responseText 문자열 로 넘어오므로 
						//Ext.JSON.decode를 이용하여 json object로 만들어준다.
						var jsonResult = Ext.JSON.decode(response.responseText);
						//jsonResult.flag 값이
						//     Y일 경우 중복입니다라는 alert 호출후input 초기화
						//     N일 경우 submit alert 호출
						if(jsonResult.flag){
		  				   Ext.MessageBox.show({
			  				title : '결과값',
							msg : '존재하는 아이디입니다.',
							buttons : Ext.MessageBox.YES,
							icon : Ext.MessageBox.ERROR
			  			  })  
		  			       } else {
		  				  Ext.MessageBox.show({
			  				title : '결과값',
							msg : 'SUBMIT',
							buttons : Ext.MessageBox.YES,
							icon : Ext.MessageBox.INFO
			  			  })
		  			     }
					},
					//실패
		  			failure : function(){
		  				  console.log("error");
		  			}
		  		}); 
	    	}
	    }]
	})
})

서버페이지 임의코드

JSONObject jsonObj = new JSONObject();
//사용자 페이지에서 받은 사용자ID값
String userId = request.getParameter("userId");
//임의의 DB데이터
String dbUserId = "user";

//만약 사용자페이지에서 넘어온 데이터가 user라는 값이라면 true json object 
//사용자 페이지로 response
if(userId.equals(dbUserId)) {
	//중복이다
	jsonObj.put("flag", true);
//아닐경우 false 로 response
} else {
	//아니다
	jsonObj.put("flag", false);
}
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();

실행화면

1. 중복회원일 경우

2. 중복회원이 아닌 경우

기존 jQuery의 ajax 사용을 해보신 개발자 분들이라면 

이번 포스팅은 쉽게 이해하실거라 생각함

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!