Captain Of my Soul is JH

{"subject":"DWR(Direct Web Remoting)\uc758 \uc0ac\uc6a9\ubc95","link":"http:\/\/nom3203.egloos.com\/2538602"}DWR(Direct Web Remoting)


Ajax를 이용하여 Servlet 클래스와 jsp를 이용하여, XML 데이터를 파싱해서 사용해 보았다.
하지만, JavaScript 에서 JAVA객체를 직접 사용할 수 있는 DWR 이라는 프레임워크를 사용하면 좀 더 쉽게 처리가 가능하다.

라이브러리 다운로드를 위해 사이트로 이동한다.
http://directwebremoting.org/dwr/download.html

위 사이트의 페이지에서
JAR File: dwr.jar (1.08Mb)
WAR File: dwr.war (4.62Mb)

위의 두개의 파일을 다운로드 한다.
dwr.war 파일은 압축해제한뒤 적당한 위치에 보관해둔다. 이 파일내부에는 설정관련 xml 파일이 존재한다.
dwr.jar 파일은 실제로 우리가 사용할 클래스들이 위치한다.



새로운 프로젝트 생성후에, 생성된 프로젝트를 선택한뒤 New > Servlet을 선택한다.



다운로드 받았던 dwr.jar 파일 프로젝트의 lib 폴더에 넣어준다
데이터베이스 처리를 위해 ojdbc.jar 파일도 함께 넣어주고, 생성된 프로젝트를 선택한뒤
새로운 서블릿을 생성한다.  이때 'Use an existing Servlet class or JSP' 항목에 체크 해준뒤
위 그림에서처럼 DwrServlet을 선택한다



서블릿을 생성할때의 모습과 유사한 이미지이다.
위 그림에서는 잘못된 맵핑정보가 입력되었는데, 실제로는 /dwr/* 로 설정되어야 한다



위 그림에서처럼 web.xml 맵핑정보에 새로운 서블릿정보가 추가되었다




dwr.war 파일을 압축해제한 폴더경로의 WEB-INF/web.xml 파일을 열어
위 그림에서처럼 init-param 부분의 설정정보를 복사한다.



web.xml 의 적절한 위치에 복사한 설정정보를 붙여넣는다



dwr.war 파일의 압축해제된 경로상의 dwr.xml 파일을 복사하여




프로젝트 경로의 WEB-INF 경로 하위에 붙여넣는다.




dwr.xml 파일 내용중의 불필요한 부분을 삭제한뒤
creator 와 converter 부분만을 남긴다.



위 그림에서처럼 dwr.xml 파일의 설정내용은
자바스크립트에서의 설정과 자바의 객체생성 관련 정보를 기재한다.



위 그림의 메모에서처럼 new 연산자 대신, spring, context 등의 다른 생성설정도 가능하다



위 그림에서처럼 converter 부분의 설정은 데이터 변환에 대한 설정이다



서버를 실행하여 http://localhost:xxxx/dwr/ 경로를 입력하면
위 그림에서처럼 dwr에 설정된 boardService 서블릿에 대한 내용을 확인 가능하다
boardService 라는 링크를 클릭하면 아래와 같은 페이지를 확인 할 수 있다



boardService 서블릿에 존재하는 메서드들의 리스트이다.
execute 버튼을 클릭하여 메서드들의 테스트를 진행 할 수 있다



list() 메서드의 execute 버튼을 클릭하였을때의 모습
프로퍼티와 데이터의 집합으로 구성된 JSON 데이터의 모습이다



insert() 메서드를 실행하기 위한 JSON 데이터의 생성과정이다
키와 값으로 구성된 문자열을 중괄호 {}로 감싸준다



insert()와 같이 리턴되는 값이 없는 메서드의 경우, 우측에 null이라는 문자열이 메서드 실행후에 나타난다.



실제로 정상적으로 인서트 되었는지를 확인한다.



view() 메서드의 실행모습



html 파일을 생성한다.



DWR 서블릿에서 생성해주는 JS 코드를 사용하겠다는 위 그림의 두줄을 입력한다
이 코드는 종전의 boardService 서블릿의 테스트 페이지에서 확인 가능하다.



위 그림의 메모에서처럼 명칭이 동일해야 정상작동이 가능하다.



위 그림은 DWR이 생성해준 js 코드



생성해준 html 페이지에 자바스크립트 코드와 html 엘리먼트들을 기재해 준뒤, 정상 작동여부를 확인한다.  

{"subject":"AJAX (Asynchronous JavaScript and XML)","link":"http:\/\/nom3203.egloos.com\/2538572"}

AJAX (Asynchronous JavaScript and XML)

=======================================
html 파일에서의 자바스크립트 코드
=======================================

 var xmlHttpRequest;
 
 function ajaxFunction() {
     if(window.ActiveXObject) {
      xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
     } else if(window.XMLHttpRequest) {
      xmlHttpRequest = new XMLHttpRequest();
     }
 
  xmlHttpRequest.open("GET", "/board/list.do", true);
  xmlHttpRequest.onreadystatechange = callbackFunction;        // callback Function 지정
  xmlHttpRequest.send(null);
 
  /*
  xmlHttpRequest.open("POST", "ajax_001_process.jsp", true);
  xmlHttpRequest.onreadystatechange = callbackFunction;
  xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xmlHttpRequest.send("userId=bit&userPw=11111");
  */
 }

=========================================
call back Function
=========================================

 function callbackFunction() {
  // 0 : 객체생성
  // 1 : open
  // 2 : send
  // 3 : 응답
  // 4 : 응답완료
  if (xmlHttpRequest.readyState == 4) {           // 상태코드체크
   if (xmlHttpRequest.status == 200) {             // 응답코드체크
    var xml = xmlHttpRequest.responseXML;
    var boardList = xml.getElementsByTagName("board");
    
    var objTable = document.getElementById("idBoardList");
 
    var html = "";
    
    for (var index=0; index < boardList.length; index++) {
     var board = boardList[index];
 
     var seq = board.getElementsByTagName("seq")[0].firstChild.data;
     var title = board.getElementsByTagName("title")[0].firstChild.data;
     var registDate = board.getElementsByTagName("registDate")[0].firstChild.data;
     var readCount = board.getElementsByTagName("readCount")[0].firstChild.data;
 
     html += "<tr>";
     html += " <td>" + seq + "</td>";
     html += " <td>" + title + "</td>";
     html += " <td>" + registDate + "</td>";
     html += " <td>" + readCount + "</td>";
     html += "</tr>"; 
    }
    pause(1000);
    
    objTable.innerHTML = html; 
    document.getElementById("DivLoad").style.display = 'none';
 
   } else {
    alert(xmlHttpRequest.statusText);         // 응답문자열출력
   }
  } else {
   document.getElementById("DivLoad").style.display = 'block';
  }
 }


==============================================
BoardListServlet (list.do) 코드중 service()메서드
==============================================

 protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      // TODO Auto-generated method stub
      //1. 데이터 추출
      //2. 유효성 검사
      //3. 처리
      List<BoardVO> boardList = this.boardService.list();

      //4. 결과 출력
      request.setAttribute("boardList", boardList);

      request.getRequestDispatcher("/WEB-INF/board/list_xml.jsp").forward(request, response);
 }



==============================================
/board/list_xml.jsp 파일의 내용
==============================================

<?xml version="1.0" encoding="UTF-8"?>
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<boardList>
     <c:forEach var="board" items="${boardList}" varStatus="varStatus">
          <board>
              <seq>${varStatus.count}</seq>
              <title>${board.title}</title>
              <registDate>${board.registDate}</registDate>
              <readCount>${board.readCount}</readCount>
          </board>
 </c:forEach>
</boardList>

{"subject":"\uc65c Servlet\uc740 HttpServlet\ub97c \uc0c1\uc18d\ubc1b\ub294\uac00?","link":"http:\/\/nom3203.egloos.com\/2537298"}