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

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

sitelink1  
sitelink2  
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  
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장
이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
41 GWT-yui-ext Demo 황제낙엽 2009.03.12 24
40 YUI 응용프로그램 만들기 (Writing Your First YUI Application) 황제낙엽 2009.03.12 32
39 MethodChain이란? 황제낙엽 2009.03.12 33
38 DWR2.x 와 Spring2.x에서 설정 황제낙엽 2009.03.12 15
37 [guni] DWR 사용시 Session 값 얻기 황제낙엽 2009.03.12 18
36 [guni] Spring + DWR 을 이용한 Form Submission처리... 황제낙엽 2009.03.12 9
35 [Whiteship's Note] Spring + Ajax with DWR (Revolution) file 황제낙엽 2009.03.12 68
» [Whiteship's Note] Spring + Ajax with DWR (Coding) file 황제낙엽 2009.03.12 52
33 [Whiteship's Note] Spring + Ajax with DWR 황제낙엽 2009.03.12 24
32 [흰둥이와 백설이] DWR - Reverse Ajax part 2 : Configuring Reverse Ajax 황제낙엽 2009.03.12 39
31 [흰둥이와 백설이] DWR - Reverse Ajax part1 황제낙엽 2009.03.12 31
30 [흰둥이와 백설이] DWR 사용을 위한 web.xml 설정 방법 황제낙엽 2009.03.12 52
29 [흰둥이와 백설이] Overview Of DWR - DWR : JAVA를 위한 쉬운 AJAX 황제낙엽 2009.03.12 18
28 Direct Web Remoting 황제낙엽 2009.03.12 28
27 자바스크립트 압축 황제낙엽 2009.03.11 17
26 Ajaxim (웹 인스턴트 메신저), DatePicker (슬라이딩 데이트), Starbox (별점추천 UI 라이브러리), Tablekit (테이블을 데이터 그리드로) 황제낙엽 2009.03.11 78
25 Prototype, Script.aculo.us 스크랩 황제낙엽 2009.03.11 73
24 [펌] 1. Dojo toolkit Example 황제낙엽 2009.03.11 15
23 [펌] 2. Dojo Event Model 황제낙엽 2009.03.11 17
22 [펌] 3. DOJO Built-in Widgets (달력) 황제낙엽 2009.03.11 8
쓰기 태그