[ 2010.07.23 DWR(Direct Web Remoting) ]
|
Client 단의 HTML에서 Server 단의 Method에 접근 가능하도록 하여주는 Framwork
기존 방식에서는 가령 HTML에서 Servlet을 거쳐 service나 VO 클래스들에 접근하였다면, 이제 DWR이 AJAX와 XMLHTTPrequest를 이용하여 이 Servlet의 Controller 역할을 수행하게 되는 것이다. |
이 프레임워크를 사용하기 위해서 DWR API를 다운 받는다.
http://directwebremoting.org/dwr/ 에서 현 날짜를 기준 안정화 버전 : https://dwr.dev.java.net/files/documents/2427/126494/dwr.jar
- 간단한 구현 로직
Client Layer | Server Layer |
클라이언트 단에서는 dwr.xml을 기반으로 *.js 파일이 생성 | 서버단에서는 web.xml을 기반으로 DWRservlet 클래스를 생성 |
DWR 설정 파일 : WEB-INF\dwr.xml 생성 (JavaScript에서 호출할 Server Layer의 JavaClass와 그 안의 method들을 설정. DWRServlet(클래스) : Web.xml에 등록한다. | |
[ 간단한 실습 ]
Dynamic Web Project : ajax_dwr-tutorial
기본적으로 DWR을 사용하기 위해서는 2개의 API 파일(dwr & common-logging[-xxxx]. Jar)이 WEB-INF\lib에 복사해야 한다.
- Web.xml에 DwrServlet등록
Web.xml |
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<!-- DWSErvlet 등록 --> <servlet> <servlet-name>dwr</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>
</web-app> |
- Dwr이 호출할 클래스를 생성 hello.HelloClass
HelloClass |
package hello;
public class HelloClass { public String getHello(){ return "안녕하세요~"; } } |
- Web-INF\ dwr.xml 생성
dwr.xml |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr><!-- Root TAG --> <allow><!-- JavaScript에서 호출가능한 클래스를 등록하여 준다. --> <create creator="new" javascript="HelloClass"><!-- HelloClass.js 파일을 생성한다. --> <param name="class" value="hello.HelloClass"/><!-- hello.HelloClass의 getHello() --> <include method="getHello"/> </create> </allow> </dwr> |
- Client단에서 서버로 사용자의 요청을 보낼 Page
Req.jsp |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>2010.07.23 DWR</title> </head> <body> <!-- DWR 관련 script 파일 등록 -->
<script src="/ajax_dwr_tutorial/dwr/interface/HelloClass.js"></script> <script src="/ajax_dwr_tutorial/dwr/engine.js"></script>
<script> function getHello(){ //HelloClass.js를 이용해 서버의 ㅡ getHello 호출 //호출시 : HelloCLass.getHello(callBack함수명); HelloClass.getHello(callback); } //callback함수는 서버로 부터 응답을 받으면 자동으로 호출됨. //서버에서 response 한 값을인수로 받는다.
function callback(data){ alert(data); }
</script> </body> <input type="button" value="인사말 호출" onClick="getHello()"/> </html> |
인수를 넘겨서 처리하기.
서버단의 HelloClass.java에서 클라이언트로부터 2개의 인자값을 받는 method를 생성한다.
public String getGreeting(String name,int age){ return name+"님 안녕하세요~!, 님은 " + age + "세 이십니다."; } |
클라이언트단의 html페이지에서 인자값을 넘겨주는 버튼을 하나 생성하고, 해당 버튼이 눌리면 미리 정의해 놓은 인수값들을 서버로 전송하는 함수를 만든다.
function getGreeting(){ //Argument가 있는 Java bean의 remote 메소드를호출하는 function var name="홍길동"; var age="23"; HelloClass.getGreeting(name,age,callback2);// (argument[1],argument[2],argument[3],....argument[n], callback함수); (n=>0) , 서버단에 등록된 순서대로 입력해야 한다. } function callback2(data){//Remote method에서 return 한 값을 인수로 받는다. alert(data); }
<input type="button" value="Argument 인사말" onClick="getGreeting()"/> |
마지막으로 dwr.xml에서 이 둘 사이의 Data 교환이 새로 생성한 Method를 추가한다.
<!-- 사용자로부터 값을 하나 입력받는 method --> <include method="getGreeting"/> |
이제 실습을 해보면 아래 그림과 같이 javascript에서 넘겨준 name과 age 값을 server에서 실행되어진 것을 확인할 수 있다.
dwr.xml에 등록된 클래스들 확인하기
우선 이를 위해서는 web.xml에 <param-value>true</param-value> 값이 우측과 같이 true로 지정되어 있어야 한다.
Dwr.xml에 등록된 클래스를 확인하기 위한 접근 방법은
http://서버IP/프로젝트명/dwr 의 형식이다. 위 실습에서의 접근은 아래와 같고 실제 접속을 하여보면 현 프로젝트에서 dwr.xml에 등록된 class 파일이 보여진다.
http://localhost:8088/ajax_dwr_tutorial/dwr
이제 HelloClass에 정의된 Method들을 확인하기 위해 다시 링크를 따라 이동해보면,
위 그림과 같이 dwr에서 생성된 *.js 파일 및 method들을 확인할 수 있다. 그리고 실행해보면 그림과 같이 확인도 가능하다. 부과적으로 위 소스에서 정의하지 않은 method인 wait() 및 기타 Method들은 해당 클래스의 부모 클래스로부터 상속되어진 것이다.
'Java > Source_book' 카테고리의 다른 글
| [javascript] 초간단 객체지향 JavaScript (0) | 2013.05.13 |
|---|---|
| 2010.07.25 AJAX 최종 실습 예제 (0) | 2010.07.26 |
| 2010.07.21 Ajax DOM 을 이용한 동적으로 Table 생성 및 JSON (0) | 2010.07.21 |
| [ 2010.07.19 - 20 AJAX 실습 및 정리 ] – Word 버전 (0) | 2010.07.20 |
| [2010.07.19 ~20]JavaScript & Ajax - Image 버전 (0) | 2010.07.20 |
| 2010.07.19 AJAX (0) | 2010.07.19 |
