Ajax frameworks

Web2hub wiki

Admin (토론 | 기여) 사용자의 2008년 6월 9일 (월) 06:24 버전

(차이) ←이전 버전 | 현재 문서 (차이) | 다음 버전→ (차이)

Client-side framework

Ajax는 그 약자에서 말해주듯, Javascript를 이용하여 비동기(asynchronous) 요청을 생성한다. 클라이언트의 웹브라우저에서 실행되는 Javascript가 이 역할을 수행한다. 여기서 생성된 요청은 서버측에서 실행되는 웹 애플리케이션에 의해 적절히 처리된 후 클라이언트에게로 응답을 되돌려준다. 이 응답이 웹브라우저에 도착하는 이벤트가 발생하면 미리 등록된 콜백 함수가 적절히 응답의 내용을 처리하는데, 이 역시 Javascript의 몫이다.

앞의 Ajax에서 간단한 예제 코드를 보았듯이, 기본 객체와 함수만을 이용하여 Javascript로 Ajax 프로그래밍을 하는 것은 적지 않게 복잡하다. 특히 브라우저의 종류에 따라 다른 문법을 적용해야 하는 경우가 많기 때문에 이에 대해 일일이 대응하는 코드를 작성하는 것은 매우 불편하다.

Ajax를 위한 Client-side framework들은 코드의 복잡성을 간단하게 해주며, 브라우저에 따른 문법 차이 등을 숨겨서 보다 편리한 개발을 가능하게 해준다. 이런 측면에서 가장 기본적인 기능은 XMLHttpRequest()를 보다 사용하기 편리하도록 확장해주는 Remoting 기능이라고 할 수 있다. 여기서 더 나아가, 클라이언트측에서 보다 화려하고 세련된 사용자 UI를 편리하게 개발할 수 있는 라이브러리들도 포함할 수 있다. 이러한 프레임워크는 서버측에서 사용되는 플랫폼이나 언어에 독립적으로 사용될 수 있도록 개발된 것도 있고, 서버측과 클라이언트측이 긴밀하게 상호작용할 수 있도록 단일 프레임워크의 일부로 되어있는 것도 있다.

아래에서는 널리 쓰이는 몇가지 client-side framework들에 대해 알아본다.

Dojo

Dojo는 오픈소스 프로젝트로서, 단순한 remoting 기능은 물론 여러 가지의 I/O 함수, 이벤트 지원, Javascript의 mixin 확장, 다양한 그래픽 효과 및 애니메이션 등을 포함한다.

Dojo의 사용을 위해서는 HTML의 <head> 영역에 다음 코드를 삽입한다.

<script language="JavaScript" type="text/javascript" src="..../dojo.js">
</script>

Dojo의 remoting

XMLHttpRequest 객체의 생성과 콜백함수 등록에 해당하는 작업은 다음의 예제 코드를 응용하면 간단히 작성할 수 있다.

function example(data) {
   dojo.io.bind({
      url: "some url string..",
      load: function(type, data, evt){ // do something on successful loading; },
      error: function(type, error){ // do something on errors; },
      mimetype: "text/plain"
   });
}

앞의 Ajax 섹션에서 소개한 예제 코드에 비해 매우 간단하게 필요한 작업을 완료할 수 있다. 위 코드의 내용은 대부분 매우 직관적이다. url key에는 요청을 보내고자 하는 서버측의 URL을, load key에는 요청에 대한 응답이 성공적으로 반환되었을때 호출될 콜백함수를, error key에는 요청에 대해 에러가 발생했을때 호출될 콜백함수를 등록한다. mimetype key에는 plain text 이외에 다른 형식(예를 들면 HTML이나 Javascript)의 반환형식을 선택할 수 있다.

Dojo의 UI

Remoting 기능 이외에 Dojo에는 UI에 대한 시각적 효과들을 간편하게 생성할 수 있는 라이브러리도 제공된다. 예를 들면, 사용자에게 보여지는 화면, 즉 HTML을 구성하고 있는 특정 element를 서서히 사라지게 할 수 있다. (fade-out) 이러한 효과는 다음의 예제를 응용하여 매우 간단하게 구현할 수 있다.

var elem = document.getElementById("some_id");
var fade_out = dojo.graphics.htmlEffects.fadeOut(elem, 1000);
fade_out.play();

위의 코드는 "some_id"라는 id를 가진 DOM 노드를 찾아 이를 1000 밀리세컨드에 걸쳐 fade-out 시킨다. 구체적으로 말하면, "some_id" 노드의 불투명도(opacity)를 100%에서 0%로 변화시키는 것이다.

fadeOut() 외에도 십여가지의 시각적 효과를 지원하고 있다. 몇가지 예를 들면 다음과 같다.

fadeIn(): fadeOut()의 반대 효과
slideBy(): 특정 노드를 지정된 거리만큼 이동시킨다.
colorFadeOut(): 특정 노드의 배경색상을 본래의 background-color 값에서 지정된 색상으로 변화시킨다.

지원되는 효과의 전체 목록은 dojo website (http://dojotoolkit.com)에서 볼 수 있다.

Dojo의 기타 유용한 기능

Remoting 및 UI 기능에 덧붙여, Dojo는 앞서 Ajax 섹션에서 언급한 바 있는 브라우저의 Back/Forward 버튼과 북마킹 문제에 부분적으로나마 대처할 수 있는 기능들도 내장하고 있다.

Prototype

Prototype은 Ruby on Rails 웹 프레임워크와 긴밀하게 연관되어 있다. Prototype 역시 Dojo와 마찬가지로 오픈소스 프로젝트로, remoting 및 UI 라이브러리, 기본 Javascipt의 확장 등을 지원한다.

Prototype의 사용을 위해서는 HTML의 <head> 영역에 다음의 코드를 삽입한다.

<script language="JavaScript" type="text/javascript" src="..../prototype.js">
</script>

Prototype의 remoting

Prototype에서 XMLHttpRequest()의 생성 및 콜백 등록에 해당하는 부분은 다음의 예제 코드를 응용하여 구현할 수 있다.

function example(some_arg){
   new Ajax.Request(url, {
      asynchronous: true,
      method: "get", 
      parameters: "arg=" + some_arg,
      onSuccess: function(request){ // do something on success; },
      onFailure: function(request){ // do something on error; }
   });
}

위의 코드 역시 매우 직관적으로, Dojo의 경우와 크게 다르지 않을 것이다. 눈에 띄는 차이점이라면 Asynchoronous key에 비동기식 또는 동기식 요청 옵션을 지정할 수 있으며, method key에 GET이나 POST 등의 HTTP method를 지정할 수 있다. 또한 onSuccess나 onFailure에 지정되는 콜백함수의 입력 인자는 위에서 생성된 XMLHttpRequest 객체에 해당한다. 따라서 이 콜백 함수들 내부에서는 응답이 반환된 상태의 XMLHttpRequest 객체 자체에 직접 접근할 수 있다. (예를 들면 request.responseText 와 같은 형식으로 결과값 자체에 접근할 수 있다.)

Prototype의 Javascript 확장

또다른 Prototype의 대표적인 기능 중의 하나를 소개하면 $()가 있다. 아래의 코드를 살펴보자.

var id1 = document.getElementById("some_id");
var id2 = $("some_id");
var ids = $("somd_id_1", "some_id_2", ... , "some_id_n");

위의 코드에서 1행과 2행의 기능은 완전히 동일하다. Javascript 프로그래밍에서 매우 빈번하게 쓰이는 document.getElementById()를 편리하게 대체할 수 있다. 3행은 $()이 하나 뿐만 아니라 여러개의 id값을 지정받을 수도 있음을 보여준다. 이 경우 결과값은 각각 해당 id들을 가진 DOM 노드들의 배열로 반환된다.

대표적인 추가 클래스로는 Element, Insertion, Form 등이 있다. Element 클래스는 특정 DOM 노드를 보이거나 안보이게 하는 등의 동작을 편리하게 할 수 있다. 몇가지 멤버 메소드들을 소개하면 다음과 같다.

Element.toggle('some_id'): some_id 노드의 style.display 속성을 토글시킨다.
Element.show('some_id'): some_id 노드의 style.display 속성을 block으로 설정한다.
Element.hide('some_id'): Element.show()의 반대 기능
Element.remove('some_id'): display 속성을 none으로 하는 것 뿐만 아니라 아예 DOM tree 상에서 해당 노드를 삭제한다.

위의 메소드들은 모두 static이므로 Javascript 코드 상에 직접 Element.toggle(..)와 같은 문법으로 사용하면 된다.

Insertion 클래스는 DOM 노드를 현재의 HTML을 구성하고 있는 DOM 트리의 특정 위치에 삽입할 수 있는 편리한 메소드를 가지고 있다.

Insertion.Before('some_id', 'some_data'): 'some_id' 노드의 opening tag가 위치하는 곳 직전에 'some_data'를 삽입한다.
Insertion.Top('some_id', 'some_data'): 'some_id' 노드의 opening tag 직후에 'some_data'를 삽입한다.
Insertion.Bottom('some_id', 'some_data'): Top()과는 반대로 closing tag 직전에 'some_data'를 삽입한다.
Insertion.After('some_id', 'some_data'): Before()와 반대로 closing tag 직후에 'some_data'를 삽입한다.

이밖에도 escapeHTML(), unescapeHTML(), String.stripTags() 등과 같은 편리한 Javascript method들을 사용할 수 있다.

Prototype의 UI

아래의 Script.aculo.us를 참조하라.

Script.aculo.us

Server-side framework

DWR (Direct Web Remoting)

DWR은 자바 기반의 리치 웹 애플리케이션 개발을 지원하는 오픈 소스 라이브러리이다. Direct Web Remoting이라는 이름에서 알 수 있듯이 DWR은 자바 RMI 같은 RPC 메커니즘처럼 원격 객체를 로컬 객체처럼 이용할 수 있게 한다. DWR은 두 부분으로 구성된다. 첫째, 브라우저에서 실행되는 자바스크립트가 있다. 이 자바스크립트는 서버와 통신을 수행하며 웹 페이지를 동적으로 갱신한다. 둘째, 서버에서 실행되는 자바 서블릿이 있다. 이것은 브라우저에서 보낸 요청을 처리하고 그 결과를 응답으로 보낸다.

(출처 - DWR - How it works)

DWR을 이용하면 브라우저에서 실행되는 자바스크립트 코드에서 웹 서버에서 실행되는 자바 함수를 로컬에 있는 것처럼 이용할 수 있다. 개발자는 XMLHttpRequest 객체를 생성하고 이것을 이용하여 서버로 요청을 보내며 결과를 받는 등의 작업을 수행하기 위해 직접 자바스크립트 코드를 작성할 필요가 없다. 보안을 위해 개발자는 어떤 자바 클래스가 자바스크립트 코드에서 호출될 수 있게 공개할 지 설정해야 한다.

오른쪽 그림은 DWR을 이용하면 onclick 같은 자바스크립트 이벤트가 발생했을 때 어떻게 선택 목록의 내용을 바꿀 수 있는지 보여준다. 웹 브라우저에서 이벤트가 발생하여 eventHandler()가 호출되면 이 함수는 DWR에 의해 만들어진 자바스크립트 함수(getOptions())를 호출한다. 이 자바스크립트 함수는 자바로 구현된 서버 측 자바 함수와 동일한 모습을 갖는다. 이후 원격호출의 구체적인 작업(서버와 통신하고 자바스크립트와 자바 코드 사이에 주고받는 매개변수와 결과값을 변환하는 등의 작업)은 DWR이 맡아서 처리한다. 결과가 반환되면 DWR은 자바스크립트 콜백 함수(populateList())를 실행한다. 이 함수는 DWR이 제공하는 유틸리티 함수(DWRUtil.addOptions())를 이용하여 웹 페이지의 내용을 갱신한다.

DWR은 인터랙티브한 자바 웹 애플리케이션 개발을 위해서 사용하기에 편리한 툴이다. DWR은 브라우저와 서버 사이의 비동기 통신 및 브라우저와 서버가 주고 받는 데이터의 변환 작업 등 하위 레벨의 세세한 작업을 대신 수행해 줄 뿐더러 서버 측 자바 코드를 이용하여 직관적으로 웹 애플리케이션을 구현할 수 있게 하기 때문이다.

Ajax.NET

Ajax.NET은 미하엘 슈바르츠(Michael Schwarz)가 개발한 마이크로소프트 .NET 프레임워크를 이용한 웹 애플리케이션 개발 시 사용할 수 있는 무료 Ajax 라이브러리다. 현재 Ajax.NET 라이브러리의 공식적인 개발은 종료된 상태이고, 현재는 오픈 소스 프로젝트인 BorgWorX 프로젝트로 이어져서 commercial Ajax.NET 라이브러리가 개발되고 있는 중이다.