AJAX 서버측 웹 애플리케이션 개발 프레임워크

오픈 소스 스터디

 

AJAX 서버측 기술

 

AJAX 서버측 웹 애플리케이션 개발 프레임워크

0. 목차

• 1. JSON과 JSON-RPC
  • 1.1 JSON
    • 1.1.1 JSON이란 무엇인가?
    • 1.1.2 JSON의 구조(structure)
    • 1.1.3 JSON의 형식(format)
    • 1.1.4 JSON의 이점
  • 1.2 JSON-RPC
    • 1.2.1 JSON-RPC란 무엇인가?
  • 1.3. JSON-RPC-JAVA
    • 1.3.1 JSON-RPC-JAVA의 사용
  • 2.1 DWR
    • 2.1.1 DWR은 무엇인가?
    • 2.1.2 DWR의 사용
• 3. 참고문헌과 링크
• 4. 용어들

1. JSON과 JSON-RPC

1.1 JSON

1.1.1 JSON이란 무엇인가?

JSON (JavaScript Object Notation, 자바스크립트 객체 표기법)은 경량의 DATA-교환 형식이다.
이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다.
JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999의 일부에 토대를 두고 있다.

1.1.2 JSON의 구조(structure)

JSON은 두개의 구조를 가지고 있다.

• 이름/값의 쌍으로 된 묶음으로 object, record, struct, dictionary, hash table, keyed list, associative array로
  실현되고 있다.
• 정렬된 값들의 리스트로 대부분의 언어에서 array, vector, list, sequence로 실현되고 있다.

1.1.3 JSON의 형식(format)

1.1.4 JSON의 이점

• JSON 객체에는 자료형이 부여되므로 별도의 타입 시스템을 만들 필요가 없다.

  {"addresses" :[
   
  { "name" : "DOE, JANE","street": "111 Appian Way", "city": "Atlanta", "state": "GA","zip":"11111"}, 
  { "name" : "DOE, JOHN","street": "222 Something Street", "city": "San Diego", "state": "CA","zip":"22222"}, 
  { "name" : "MCKENZIE, DOUG","street": "333 Maple Leaf Avenue", "city": "Toronto", "state": "ON","zip":"L4Z IX2"},
  
  
  
  ]} 

• 데이타를 파싱할 필요가 없다. name/value의 간단한 구조의 형태로 표현된 데이타를 responseText로 받아
  별도의 파서없이 사용하면 된다.

  var data = eval(xhr.responseText); 
  for (i = 0; i < data.address.length; i++) { 
   new Insertion.Bottom('names',"<li>"+data.addresses[i].name+"</li>"); 
  }

• JSON은 매우 유연하기도 하다. 데이타들의 이름을 교체해서 사용할 수도 있다.
• 텍스트 형태이기 때문에 매우 빨리 처리한다.
• <script> 태그의 src attribute에 서버의 url을 명시하기만 하면 어떤 서버에서도 데이타를 가져올 수 있다.

1.2 JSON-RPC

1.2.1 JSON-RPC란 무엇인가?

JSON-RPC is a lightweight remote procedure call protocol.
JSON-RPC는 경량의 원격호출 프로토콜로, 원격에 있는 서버의 프로세스를 호출해서 사용할 수 있게 한다.
request, response, notification으로 구성된다.

• request의 세가지 properties : method(호출될 메소드명), params(메소드의 파라메터들), id(request id)
• response의 세가지 properties : result(메소드가 실행된 결과), error(error object), id(request id)
• notification : response가 필요없는 request로 id=null(must!)이다.
• communication Examples

  --> {"method":"echo","params":["JSON-PRC"],"id":1} <-- {"result":"Hello JSON-RPC","error":null,"id":1} 

1.3. JSON-RPC-JAVA

JSON-RPC-JAVA는 JSON-RPC를 자바에 실행한 것이다.

1.3.1 JSON-RPC-JAVA의 사용

• jsonrpc.jar를 다운받아 서블릿 엔진의 lib 폴더에 설치한다.
• JSONRPCServlet을 web.xml에 추가한다.
  JSONRPCServlet은 JSON-RPC JAVA의 전송 파트로 JSON-RPC request를 JSONRPCBridge로 전송하는
  역할을 수행한다.

  <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 
   "http://java.sun.com/dtd/web-app_2_3.dtd"> 
   <web-app> 
   <servlet> 
   <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name> 
   <servlet-class>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-class> 
   </servlet> 
   <servlet-mapping> 
   <servlet-name>com.metaparadigm.jsonrpc.JSONRPCServlet</servlet-name> 
   <url-pattern>/JSON-RPC</url-pattern> 
   </servlet-mapping> 
   </web-app>

• JSP page에 JSONRPCBridge를 사용한다.

  ... <jsp:useBean id="JSONRPCBridge" scope="session" class="com.metaparadigm.jsonrpc.JSONRPCBridge" /> ...

  HttpSession에 JSONRPCBridge를 넣은 후,

  <% JSONRPCBridge.registerObject("myTestObject", aTestObject); %>

  호출한 메소드가 있는 객체를 가져온다.

  <script type="text/javascript" src="jsonrpc.js"> <script type="text/javascript" src="myapp.js">

  jsonrpc.js와 자신의 자바스크립트 코드를 넣는다.

• javascript client에서 적용한 예는 아래와 같다.

  onLoad = function() { 
   try { 
   jsonrpc = new JSONRpcClient("/<your webapp name here>/JSON-RPC"); 
   // Call a Java method on the server 
   var result = jsonrpc.myTestObject.myFunction("hello"); alert(result); 
   } catch(e) { alert(e); } 
  }

  jsonprc는 JSON-PRC 프락시 객체로 내부에서 XMLHttpRequest나 ActiveObject를 이용하여 서버로 호출을
  전송하고 결과를 받는 작업을 수행한다.
  마지막으로 jsonrpc을 이용한 데이타를 이용하여 웹 페이지에 호출한다.

2. DWR

2.1 DWR은 무엇인가?

DWR(Direct Web Remoting)은 프락시 기반 Ajax로 자바스크립트에서 서버측 로직을 호출하도록 만들어주는
프레임워크이다.

그림에서 보여지는 것처럼 JSON-RPC JAVA처럼 객체를 생성할 필요없이 바로 서버에서 자바 객체를 찾아
메소드를 호출해서 사용할 수 있는 매우 강력한 프락시 기반 AJAX 프레임워크이다.

2.2.DWR의 사용

• dwr.jar을 설치한다.
  dwr은 dwr.jar와 dwr.war 두 가지 형태로 배포되고 있다. dwr.war 파일은 jar 파일에 더하여 몇가지 예제와
  web.xml의 템플릿을 제공한다.
  겟어헤드에서 dwr.jar를 다운받은 후 아래와 같이 세 단계를 거쳐 dwr.jar를 설치하면 된다.

• 다운받은 dwr.jar를 WEB-INF/lib 디렉토리에 넣는다.
• config 파일을 수정한다.
  web.xml에 다음 내용을 추가한다.

  <servlet> 
   <servlet-name>dwr-invoker</servlet-name> 
   <display-name>DWR Servlet</display-name> 
   <servlet-class>uk.ltd.getahead.dwr.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>

  WEB-INF 아래에 dwr.xml을 생성한다. dwr.xml 파일은 클래스와 클래스의 메소드를 자바스크립트에서
  사용할 수 있도록 해준다.

  <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"  
   "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> 
   <dwr> 
   <allow> 
   <create creator="new" javascript="JDate"> <param name="class" value="java.util.Date"/> </create> 
   <create creator="new" javascript="Demo"> <param name="class" value="your.java.Bean"/> </create> 
   </allow> 
   </dwr>

  new creator는 자바클래스의 public 생성자(the public no-args constructor)를 사용한다.
  생성자를 자바스크립트에서 그대로 사용하기 때문에 두 가지 제약 사항을 가진다.

  • 자바스크립트의 예약어(reserved word)를 사용하지 말자.
  • 자바스크립트는 메소드 오버로딩을 지원하지 않으므로 오버로딩된 메소드는 피한다. 자바스크립트가
    어느 것을 호출할지 알 수가 없다.

• http://localhost:port/webapp/DWR 을 주소창에 입력한다. 아래와 같은 dwr debug 페이지가 호출된다.
  

• • 다음과 같은 코드를 찾아 html이나 jsp 파일에 입력한다.

    <script src='/[YOUR-WEBAPP]/dwr/interface/[YOUR-SCRIPT].js'></script> 
    <script src='/[YOUR-WEBAPP]/dwr/engine.js'></script>

  • 두 가지 js 파일을 웹 애플리케이션에서 찾아보면 존재하지 않는 것을 알게 된다.
    두 가지는 dwr 서블릿으로 매핑되어 자바스크립트 코드를 애플리케이션으로 전송한다.
  • 호출된 URL에서 등록된 메서드의 목록을 볼 수 있다. excute 버튼을 이용해 파라메터를 입력하고
    메소드를 실행해볼 수 있다.

불행히도 dwr.xml을 사용하기 위해서는 JDK 1.4.2 and JDK 5 이상을 사용해야 한다. xml parser 에러로 인해 하위 버전에는 문제가 생길 수 있다고 함.

3. 참고사이트

• json http://www.json.org
• json-rpc http://json-rpc.org
• the open source web site of Metaparadigm Pte Ltd.의 json-rpc 소개 http://oss.metaparadigm.com/jsonrpc
• dwr http://getahead.ltd.uk
• dwr을 사용한 쇼핑카트 예제 http://www-128.ibm.com/developerworks/java/library/j-ajax3/
• 네이버 자바프레임워크카페 위키 : http://openframework.or.kr/JSPWiki/Wiki.jsp
• Spring and DWR revisited : http://www.oreillynet.com/lpt/wlg/8649

4. 용어들

• marshalling(마샬링) : 마샬링(marshalling)은 클라이언트가 사용하고자 하는 객체의 형태에 관계없이
  같은 방식으로 인터페이스 함수를 사용할 수 있게 하는 메카니즘이다.마샬링은 두 가지의 단계를 포함한다.
  서버의 인터페이스 포인터를 다른 프로세스의 클라이언트에서 사용할 수 있게 한다.
  클라이언트가 인터페이스의 함수에 실은 함수 인자들을 정확하게 서버로 전달해야 한다.
  원칙적으로 클라이언트는 in-proc서버만을 사용할 수 있다. 원격에 있는 서버를 사용하기 위해서는
  그 서버를 대행하면서, 클라이언트와 같은 프로세스에서 실행될 수 있는 프록시나 핸들러가 필요하다.
  프록시는 원격의 서버를 순수하게 대행한다는 의미이지만, 핸들러는 대행을 할 수도 있고,
  자신이 구현할 수도 있는 혼합형태이다. 어쨌든 둘 다 원격의 객체와 클라이언트의 연결을 위한 대행의 역할을
  한다.클라이언트가 서버의 함수를 호출할 때 넘겨지는 인자, 그리고 서버 함수의 리턴값은 프로세스의 경계를
  넘어서 유효해야 한다. 이 측면 또한 마샬링이 개입되는 곳이다. 인자의 형태에 따라
  다른 형태의 마샬링이 일어난다. DWORD같이 간단한 타입은 직접 복사가 된다.
  그러나 어떤 영역을 가리키는 포인터가 넘어갈 때는 그 영역 전체가 프로세스 경계를 넘어 복사되어야 한다.
• unmarshalling(언마샬링) : 마샬링을 통해 보내진 데이터들을 원래 구조로 복원시키는 것이다.
• proxy(프락시) : Proxy(프락시)는 컴퓨터 시스템에서 가장 최근에 사용된 주기억장치의 내용을 캐시 기억 장치에
  저장해 둠으로써, 다음 번에 주기억장치에 대한 접근 요구가 발생했을 때 캐시 기억 장치를 사용해 보다 빠르게
  서비스를 제공할 수 있는 것과 같은 원리의 요청 서비스 기술을 말한다. 사용자가 이제까지 인터넷을 통해
  접근했던 정보들을 컴퓨터의 하드디스크 일정 영역에 저장해 둠으로써, 마치 하드디스크가 캐시 기억 장소의
  역할을 대신하게 되면서 이후 사용자가 인터넷 서비스를 요청하면 일단 하드디스크에 저장되어 있는 프락시
  정보를 이용한다. 만일 사용자가 요청한 정보가 하드디스크에 있으면, 통신망을 통해 원격지로부터 자료를
  수신하지 않고도 사용자에게 정보를 제공할 수 있기 때문에 보다 빠르게 요청 응답을 제공할 수 있다는
  장점이 있다. 사용자가 요청한 정보가 원격지에 있는 호스트에서 변경된 경우에는 하드디스크에 있는
  프락시 정보가 올바르지 못하게 되기 때문에 사용자 요청이 발생하면 무조건 하드디스크에서 전달하는 것이
  아니라, 일단 상대방 호스트에게 정보 수정 여부를 확인한 뒤, 정보가 바뀌지 않았으면 하드디스크의 내용을
  사용자에게 전달한다.
• asynchronous(비동기)
• synchronous(동기)
  
  
  
  자료 출처  :  http://wiki.javajigi.net/pages/viewpage.action?pageId=3920&decorator=printable