ExtJS 기초강좌 24 - Ajax 클래스를 이용하여 비동기 호출해보기
오랫만에 ExtJS에 관련한 포스팅을 하게 되었습니다.
요즘 프로젝트 기간이 타이트하게 진행되다보니, 포스팅을 못하고 있네요..
ExtJS 6 가 출시되면서, ExtJS 5 에 대해서 포스팅을 계속 해야되는지 고민을 했었습니다.
하지만, 문법은 거의 흡사하므로, ExtJS 5에 대해서 포스팅을 계속 진행하기로 결정하였습니다.
ExtJS 6 가 정식적으로 나왔지만, 이전버전과 동일한 문법으로 진행이 되는거 같습니다.
본인 역시, 아직 ExtJS 6를 파악해보지는 못했으나, 조만간 ExtJS 기초강좌 포스팅을 마무리하고, 천천히 훑어보도록 해야겠습니다.
이번 강좌는 Ajax 클래스를 이용한 비동기 호출을 진행해보도록 하겠습니다.
Question
ExtJS는 항상 비동기 호출방식으로 데이터를 가공했던거 아니였나요?
Answer
그렇습니다.
ExtJS는 컴포넌트 내부의 데이터들을 호출하는 방식이 모두 비동기 방식으로 데이터들을 호출해왔습니다. Ajax 클래스는 필요없다(?)
간혹가다 그리드/트리내에 데이터를 출력할때 데이터스토어를 이용하여 ajax call을 하지 않고 어떠한 특정상황이 존재 할 수 있습니다.
그럴 때 Ext.Ajax 클래스를 이용할 수도 있습니다.
예를 들어, 그리드의 데이터스토어는 insert/update/delete 를 각각 따로 진행을 하게 됩니다.
하지만, DB 트랜잭션을 고려하여 일괄로 처리하고자 할 경우에 Ext.Ajax 클래스를 이용하여 일괄로 처리를 할 수있습니다.
이후 예제따라하기 편에서 다루도록 하겠습니다.
기존에 jQuery의 "$.ajax" 와 비교를하여 문법을 다루도록 하겠습니다.
문법을 익히고자 하는 목적으로, ExtJS의 컴포넌트를 사용하지 않고 단순히 HTML페이지에 데이터를 뿌려보도록 하겠습니다.
Mission - 비동기통신으로 넘겨준 입력값과 HELLO WORLD를 body 태그에 출력하기
제일먼저, jQuery를 이용한 HTML 페이지는 아래와 같습니다.
jQuery HTML 샘플코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url : './server_helloworld_response.jsp',
method : 'POST',
dataType : 'json',
data : {param1 : '입력값1', param2 : '입력값2'},
success : function(response) {
$("#div1").html(response.result);
$("#div2").html(response.param1);
$("#div3").html(response.param2);
}
})
})
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
서버페이지 샘플코드
JSONObject jsonObject = new JSONObject();
jsonObject.put("param1", request.getParameter("param1"));
jsonObject.put("param2", request.getParameter("param2"));
jsonObject.put("result", "<h1>HELLO WORLD</h1>");
response.setContentType("text/plain; charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.print(jsonObject);
pw.flush();
pw.close();
실행결과
설명
제일먼저, HTML코드에 기술되어있는 코드에 대해서 설명을 드리겠습니다.
JQuery를 사용해보셨던 분들이시라면 이해하시기 쉬운 코드이실 겁니다.
body 태그안에 div 태그들을 3개 기술하였고, 모든 HTML페이지가 LOAD 된 이후에, Ajax call을 진행했습니다.
ajax 의 각 속성은 아래와 같습니다.
url - 비동기 호출할 URL이며, FORM 태그의 action에 해당되는 속성
method - POST / GET / PUT 방식을 이이용할 수 있으며, FORM 태그의 method에 해당되는 속성
dataType : 'text/script/xml/json/html' 방식등이 있는데, 응답받는 결과값에 대한 유형을 정의하는 속성
(설정을 하지 않을 시, HTML이 기본값이다)
data : 서버페이지에 전송하고자 하는 입력값들
success : 성공 시, 서버페이지로부터 응답받은 결과값을 처리하는 부분
JSON 으로 응답받은 key값들을 이용하여 각각의 DIV 태그내에 응답받은 결과값을 삽입해주었음.
이어서 서버페이지 부분을 보도록 하겠습니다.
서버페이지에서는
param1 / param2 / result 라는 JSON Key로 HTML페이지로부터 받은 입력값들과 별도의 "HELLO WORLD" html 코드를 담아서 응답을 주었습니다.
동일한 결과를 ExtJS의 Ajax 클래스를 이용하여 작성해보도록 하겠습니다.
서버페이지는 동일하게 가고, 클라이언트 페이지의 자바스크립트 부분만 변경하도록 하겠습니다.
ExtJS 샘플코드
Ext.onReady(function(){
Ext.Ajax.request({
url : './server_helloworld_response.jsp',
method : 'POST',
params : {param1 : '입력값1', param2 : '입력값2'},
success : function(response) {
var data = Ext.JSON.decode(response.responseText);
Ext.get("div1").update(data.result);
Ext.get("div2").update(data.param1);
Ext.get("div3").update(data.param2);
}
})
})
위와 같이 작성을 하고 실행을 시켜보면, jQuery의 $.ajax 통신을 한 결과와 동일한 화면을 출력시킬 것입니다.
Ext.Ajax 클래스의 config는 대략적으로 이해를 하실거라 생각하고,
success 내에 정의된 몇가지에 대해서만 설명을 드리도록 하겠습니다. ▼
Ext.JSON.decode - jQuery의 경우 별도의 decode 작업이 필요없지만, Ext.Ajax를 이용할 경우,
디코드 작업이 필요합니다.
Ext.get("아이디").update() - 지정해준 아이디값의 영역내의 HTML 태그를 삽입해주기 위해서
update 메서드를 이용합니다.
jQuery의 ajax 와 거의 동일하므로 자세한 설명이 필요하지 않다 생각되어 이번 강좌는 여기서 마무리를 짓도록 하겠습니다.
다음장부터는 ExtJS에서 제공되는 다양한 차트들에 대해서 알아보도록 하겠습니다.
