[ETC] [Whiteship's Note] Spring + Ajax with DWR (Coding)

황제낙엽 2009.03.12 03:31 조회 수 : 317 추천:94

http://whiteship.tistory.com/1252다음의 순서대로 코딩을 할 수 있습니다.(꼭 이 순서를 지켜야 하는 것은 아닙니다.)
0. POJO로 Ajax (자바스크립트로 노출시킬) 서비스 구현.
1. web.xml에 DWR Servlet 등록하기.
2. dwr.xml 작성하기.
3. 클라이언트 코드 작성하기.
    3-1. 자바스크립트 등록하기.
    3-2. 요청하기.
    3-3. 요청 처리하기.

0. POJO로 Ajax (자바스크립트로 노출시킬) 서비스 구현.


매우 단순하게 구현했으며, MemberService 인터페이스에서는 Member의 이름으로 회원을 검색하여 결과를 리스트 형태로 반환하는 메소드를 가지고 있습니다.

1. web.xml에 DWR Servlet 등록하기.

web.xml에 다음과 같은 코드를 추가합니다.
·미리보기 | 소스복사·
  1. <servlet>  
  2.     <servlet-name>dwr</servlet-name>  
  3.     <servlet-class>  
  4.         org.directwebremoting.servlet.DwrServlet   
  5.     </servlet-class>  
  6.     <init-param>  
  7.         <param-name>debug</param-name>  
  8.         <param-value>true</param-value>  
  9.     </init-param>  
  10. </servlet>  
  11. <servlet-mapping>  
  12.     <servlet-name>dwr</servlet-name>  
  13.     <url-pattern>/dwr/*</url-pattern>  
  14. </servlet-mapping>  

/dwr/ 로 시작하는 모든 요청을 DwrServlet이 처리하도록 설정하였습니다.

2. dwr.xml 작성하기.

WEB-INF/ 폴더에 dwr.xml 파일을 다음과 같이 작성합니다.
·미리보기 | 소스복사·
  1. <!DOCTYPE dwr PUBLIC   
  2. "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"   
  3. "http://www.getahead.ltd.uk/dwr/dwr10.dtd">  
  4.   
  5. <dwr>  
  6.     <allow>  
  7.         <convert converter="bean" match="whiteship.domain.Member" />  
  8.         <create creator="new" javascript="MemberService">  
  9.             <param name="class"  
  10.                 value="whiteship.service.MemberServiceImpl" />  
  11.         </create>  
  12.     </allow>  
  13. </dwr>  

Member 타입으로 캐스팅 할 수 있도록, converter를 등록해줍니다.
new 생성기를 사용하여, MemberService라는 이름의 자바스크립트를 생성합니다. 이 자바스크립트는 MemberServiceImpl 자바 클래스를 가지고 작성합니다.

=================================================================================
이제 서버쪽에서 설정해야 할 내용은 끝입니다. 이것으로 클라이언트 쪽에서 자바 객체의 메소드를 자바스크립트에서 호출할 수 있습니다. 어떻게 호출하는지 살펴보겠습니다.

3. 클라이언트 코드 작성하기.

3-1. 자바스크립트 등록하기.

View에서 사용할 자바스크립트를 등록합니다.
·미리보기 | 소스복사·
  1. <script type='text/javascript' src='dwr/engine.js'></script>  
  2. <script type='text/javascript' src='dwr/interface/MemberService.js'></script>  
  3. <script type='text/javascript' src='dwr/util.js'></script>  

맨 아래 한 줄은 옵션입니다. 위의 두 줄은 필수이며, 위의 자바스크립트 파일들이 없다고 걱정하시지 않아도 됩니다. web.xml에서 설정한 dwr/ 경로를 통해 DwrServlet이 알아서 처리할 것입니다.

두 번째 자바스크립트 파일의 이름은 dwr.xml에서 자바 클래스를 자바스크립트로 변환할 때 사용하기로 한 이름으로 설정해주시면 됩니다.

3-2. 요청하기.

폼에서 다음과 같은 input 엘리먼트가 있고, 해당 엘리먼트에서 자바스크립트를 호출합니다.
·미리보기 | 소스복사·
  1. <form name="memberForm">  
  2.     <input type="text" name="name" maxlength="10" onkeyup="inputChanged();" />  
  3. </form>  

·미리보기 | 소스복사·
  1. function inputChanged() {   
  2.     var name = document.memberForm.name.value;   
  3.     if(name.length > 1) {   
  4.         MemberService.get(name, updateTable);   
  5.     } else {   
  6.         DWRUtil.removeAllRows("memberTable");   
  7.     }   
  8. }  


3-3. 요청 처리하기.

위의 자바스크립트에서 updateTable이 바로 요청의 결과를 처리할 자바스크립트 입니다. 다음과 같이 작성합니다.

·미리보기 | 소스복사·
  1. function updateTable(results) {   
  2.     DWRUtil.removeAllRows("memberTable");   
  3.     DWRUtil.addRows("memberTable", results, cellFuncs);   
  4. }   
  5.   
  6. var cellFuncs = [   
  7.     function(data) { return data.name; },   
  8.     function(data) { return data.email; }   
  9. ];  

요청의 결과를 가져와서 테이블을 채워줄 때 해당 데이터에서 어떤 필드로 테이블을 채워야 하는지 정의하기 위해 cellFuncs 라는 구조체(?)를 정의해 주었습니다.

SpringAjax.zip
참조 : Spring In Action 16장
이 게시물을
목록
쓰기 태그