오랜만에 포스팅..
Ajax 와 Java 의 만남으로, DWR(Direct Web Remoting) 라는 좋은 놈이 있다.
이놈을 좀 잘 활용하면, 서블릿이 필요가 읍다.
자바스크립트로 직접적으로 접근을 하니, 그러나 표현하는 데이터가 많으면 속도가 느리다.
적절히 혼합해서 사용하면 정말 굳일듯?
우선 다운로드를 한다.
http://directwebremoting.org/dwr/download
해당 라이브러리 추가후,
아래와 같이 수정
WEB-INF/web.xml
[code].....
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<!-- This should NEVER be present in live -->
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
.....
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
[/code]
WEB-INF/dwr.xml (신규 생성)
[code]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="Login">
<param name="class" value="test.Login" />
<include method="loginProc" />
</create>
</allow>
</dwr>
[/code]
[code]<create creator="new" javascript="Login">[/code]
- 페이지에서 Login 이라는 자바스크립트 클래스로 이용한다.
[code]<param name="class" value="test.Login" />[/code]
- 위 사용하려는 Login 의 참조 클래스
[code]<include method="loginProc" />[/code]
- Login 클래스의 메소드
test.Login
[code]package test;
public class Login {
public Login(){}
public String loginProc(String id, String pw){
String loginResult = "false";
if( id.equals("test") && pw.equals("test") ){
loginResult = "true";
}
return loginResult;
}
}
[/code]
별거 읍다. test / test 로 들어왔을때 맞는지 아닌지만 확인. 실 이용에는 DB커넥션등.. 뭐 들어가면 될듯.
login.html
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login.html</title>
<meta http-equiv="content-type" content="text/html; charset=EUC-KR">
<script type='text/javascript' src='../dwr/interface/Login.js'> </script>
<script type='text/javascript' src='../dwr/engine.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
<script type='text/javascript'>
function loginProc(){
var id = dwr.util.getValue('id');
var password = dwr.util.getValue('password');
Login.loginProc( id, password, resultData );
}
function resultData(loginResult){
console.info( loginResult );
if( loginResult == "true" ){
document.getElementById("resultLayer").innerHTML = "<b>로그인 완료</b>";
}
if( loginResult == "false" ){
document.getElementById("resultLayer").innerHTML = "<b>로그인 실패</b>";
}
}
</script>
</head>
<body>
test / test
<hr />
<div id="displayLayer">
<div>
<table>
<tr>
<td>id</td>
<td>: <input type="text" id="id" name="id" /></td>
</tr>
<tr>
<td>pw</td>
<td>: <input type="password" id="password"
name="password" /><input type="button" value="login"
onClick="loginProc();" /></td>
</tr>
</table>
</div>
</div>
<hr />
<div id="resultLayer">
</div>
<div>
</div>
</body>
</html>
[/code]
스크립트 선언에 보면,
[code]<script type='text/javascript' src='../dwr/interface/Login.js'> </script>
<script type='text/javascript' src='../dwr/engine.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
[/code]
부분을 볼수가 있는데, 경로는 현재 웹컨덴츠 루트를 선택해 주면 된다.
[code]<script type='text/javascript' src='http://localhost:8080/test/dwr/engine.js'></script>
[/code]
그리고 사용자 정의 클래스를 불러오는 부분이
[code]<script type='text/javascript' src='../dwr/interface/Login.js'></script>[/code]
이 부분이 되겠다. /dwr/interface/ 로 해서 불러오면 끝.
그리고 이제 실 사용부분을 보면,
dwr.util.getValue 는 뭐 보면 아시겠으니 생략
[code]Login.loginProc( id, password, resultData );[/code]
loginProc(String id, String passwrd) 를 사용하므로 id 와 password 를 넘겨준다.
그런데 resultData 라고 하나가 더 들어가있다. 이것은 callBack 부분이므로 리턴값이 있는 경우 사용하면된다.
function resultData 에서 마지막으로 결과 값 처리를 한다.
참 쉽죠~? (사실 나도 처음에 헤맸다. -_-)
