"Hello World!": Ajax

레이블이 Ajax인 게시물을 표시합니다. 모든 게시물 표시

2009년 5월 14일 목요일

DWR을 이용한 간단한 로그인 예제.

오랜만에 포스팅..

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>


<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 에서 마지막으로 결과 값 처리를 한다.

참 쉽죠~? (사실 나도 처음에 헤맸다. -_-)

2008년 8월 12일 화요일

JSP, AJAX, Prototype, JSON, XML을 이용한 로그인 처리..

JSP, AJAX, Prototype, JSON을 이용한 로그인 처리.. 라고 타이틀은 지었지만,

이름 만큼 대단한 예제는 아니다.. 다만, 위의 언어들을 이용해서 만든 Refresh 없는 로그인 처리이다.

방식은 로그인 체크가 필요한 버튼이나 어떠한 행위가 이루어 질때, checkLogin() 을 호출.

loginCheck.jsp 를 불러온다. loginCheck.jsp 에는 JSON 타입으로, 세션체크를 하여, 로그인 여부를 판별한다.

checkLogin() -> loginCheck.jsp (세션 체크 후 JSON 생성) -> resultProc() 에서 처리

위와 같은 방식이 가능한 것은 브라우져의 세션은 현재 띄우고 있는 브라우져의 부모나 자식창에 세션이 상속되기

때문에 기존에 iFrame 으로 작업을 했으나, 새로고침을 해야 하는 번거로움이 있었다. 그러나 이방식은

새로고침이 필요없다.

우선, 로그인 처리를 할 페이지를 만들어 준다.

로그인 체크를 위핸 javascript 메소드를 만들어 준다. 이때, prototype.js 가 include 되어있어야 한다.

main.html

[code]
function checkLogin()
{
var url = './loginCheck.jsp?timeStamp=' + new Date().getTime();

   var myAjax = new Ajax.Request(
   url,
{
   onComplete: resultProc,
   onException: onException
});
   }

function resultProc(req) {

//JSON 방식
var result = eval("(" + req.responseText + ")");

if( result.data.result == 1 ){
alert("로그인 되어있음");

} else {
goLogin();

}
}
[/code]

loginCheck.jsp (JSON)

[code]
<%@ page contentType="text/plain; charset=euc-kr" %>
<%
String MEMBER_ID = "";
String result = "2";

if( session.getAttribute("MEMBER_ID")!=null ){
MEMBER_ID = session.getAttribute("MEMBER_ID").toString();
result = "1";
}

%>

{
data: {
result: '<%=result %>',
memberid: '<%=MEMBER_ID %>'

}
}
[/code]

위 방식을 xml 을 로드해서 처리 하려면 아래와 같이 바꾸면 된다.

main.html

[code]
function resultProc(req) {
var xmlDoc = req.responseXML;
var result = xmlDoc.getElementsByTagName("result")[0].firstChild.nodeValue;
console( result );
}
[/code]

loginCheck.jsp (XML)

[code]
<?xml version="1.0" encoding="utf-8" ?>
<%@ page contentType="text/xml; charset=utf-8" %>
<%
String MEMBER_ID = "";
String result = "2";

if( session.getAttribute("MEMBER_ID")!=null ){
MEMBER_ID = session.getAttribute("MEMBER_ID").toString();
result = "1";
}

%>

<node>
<result><%=result %></result>
</node>
[/code]

JSP로 XML를 파싱할떄 주의!! 꼭 위의 빨간 색 부분의 contentType 를 지정해 주어야 제대로 인식한다..

이것때문에 30분간 뻘짓.. -_-;

2007년 7월 26일 목요일

오랜만에 책 2권을 질렀습니다.

거의 1년만에 책을 2권 질렀습니다.

술먹을 돈, XBOX360 시디 살돈, 디카, 렌즈같은 것은 막 지르면서

책한권 안보고 산다는게 참 뭐라고 해야 할까요.

회의 적이라고 해야할까요. 그래서 계획을 세웠습니다.

" 한 달에 최소한 한권, 여유가 된다면 두권을 읽자! "

잘 지켜질지 모르겠지만.. 계획을 세웠으니, 지켜봐야겠습니다.

제가 지른책은 프로그래머라면 필수 탈무드라고 불리우는

실용주의 프로그래머 : The Pragmatic Programmer [재출간판]

하고, 요즘 많이들 쓰이는, 그리고 개인적으로도 관심을 가지고 있던 Ajax관한 책

Ajax Programming 기초부터 중급까지

두권을 질렀습니다. Ajax의 책을 저것을 선택한것은 OKJSP의 운영자 Kenu님의 추천이

걸려있어서 주저없이 저것으로 선택했습니다.

이제 열공만 남았네요.

언제 다 읽을지 모르겠지만.. 읽고나서 소감문 올리겠습니다. :)