2013년 8월 12일 월요일

메시지 컨버터 AJAX JSON sample

메시지 컨버터는 HTTP요청 메시지 본문과 HTTP 응답 메시지 본문을
통째로 메시지로 다루는 방식
파라미터의 @RequestBody와 메소드에 부여한 @ResponseBody를 이용해 쓸 수 있다.

메시지 방식의 컨트롤러를 사용하는 방법은 두가지
1. HTTP - GET 요청 메소드 : 요청정보가 URL, 쿼리 스트링으로 제한되므로 @RequestBody 대신 @RequestParam이나 @ModelAttribute로 요청 파라미터를 전달 받음
2. HTTP - POST 요청 메소드 : HTTP 요청 본문이 제공되므로 @RequestBody를 사용할 수 있다.

JSON 기반의 AJAX를 지원하려면 컨트롤러는 결과를 JSON 포멧으로 만들어서 돌려줘야 한다.


1. Controller part
@RequestMapping(value = "/page", method=RequestMethod.GET)
        //page라고 들어오는 JSON GET 요청을 처리할 것임
@ResponseBody
//JSON으로 변환해 클라이언트로 보내기 위해
public List<MyDao> makeReport(@RequestParam("startTime") int startTime,
@RequestParam("endTime") int endTime) {
        //시작, 종료 시간을 폼에서 입력받아 get으로 넘겨받음 MyDao라는 클래스 리스트를 리턴
logger.info("Displaying Page ");
List<MyDao> data = (new SelectByDate().findByDate(startTime, endTime));
                //DB에서 날짜를 기준으로 검색해서 데이터를 가져오는 메소드 부분
return data;
               //리스트를 리턴 -> JSON message converter가 처리할 내용
}

2. servlet part
<beans:bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<beans:property name="messageConverters">
<beans:list>
<beans:bean class=
"org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
<!-- 오브젝트를 JSON으로 변환시켜줄 메시지 컨버터 -->
</beans:list>
</beans:property>
</beans:bean>

3. Java Script part (page.js)
$(document).ready(
function() {
$('adpage').submit(
function() {
if (request) {
request.abort(); // abort any pending request
}

$.getJSON('adpage/', function(data) {
                                                  //make url (adpage), GET방식의 JSON요청을 보낸다
                                                 //function()은 받은 data를 처리할 부분
console.log(data);  //print data
});
});
});

4. View part
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="resources/jquery-2.0.3.js"></script>
<script type="text/javascript" src="resources/page.js"></script>
</head>
<body>
<h1>
AJAX JSON Example
</h1>

<P>  The time on the server is ${serverTime}. </P>
<form action="adpage" method="get">
<P>  Start Time
<input type="text" name="startTime" value="20130728"/>
</P>
<P>  End Time
<input type="text" name="endTime" value="20130801"/>
</P>
<input id="adpage" type="submit" value="Show Result"/>
</form>

</body>
</html>

댓글 없음:

댓글 쓰기