ajax 기능을 JSP로 통합하기

난이도 : 중급

Daniel Wintschel, Writer and developer, Freelance

2008 년 1 월 08 일

개 발자와 사용자는 Web 2.0 시대에 웹 기반 애플리케이션의 가용성과 반응성에 대한 높은 기대를 갖고 있습니다. 지난 2년 동안 은둔 생활을 하지 않았다면 Asynchronous JavaScript + XML(ajax)에 대해 들어보았을 것입니다. ajax를 사용하여 브라우저 페이지의 재 로드 없이, 반응성 있고 동적인 브라우저 기반의 사용자 인터페이스를 구현할 수 있습니다. 이 글에서는 ajaxTags를 설명합니다. Java™/JavaScript Library는 ajax 기능을 JSP 페이지로 쉽게 통합할 수 있도록 해줍니다.

머리말

전 통적으로, 웹 기반 사용자 인터페이스(페이지와 애플리케이션 포함)는 사용자에 의해 이루어진 요청들이 페이지 리프레시를 발생시켰는데, 이는 상당한 시간과 대역폭의 낭비로 이어졌다. 반복적인 페이지 리프레시로 인해 웹은 매우 느려진다.

소셜 북마크 mar.gar.in Digg del.icio.us Slashdot

요 즘, 개발자들은 웹 기반 애플리케이션 내에서 성능과 사용자 경험을 크게 향상시킬 수 있는 새로운 트릭과 기술을 모색하고 있다. ajax로 코딩 된 웹 애플리케이션들은 백그라운드에서 비동기식으로 데이터가 서버로 보내질 수 있도록 하면서, 동시에 페이지 재 로드 없이 보여지고 있는 웹 페이지의 다양한 부분들을 동시에 업데이트 한다. ajax는 많은 객체들과 기술들을 구성하고 있다. ajax에서 X라는 이니셜이 있지만, XML은 전혀 사용되지 않는다. 브라우저에서 보내온 응답은 플레인 텍스트, HTML, XML 등 다양한 타입 또는 포맷이 될 수 있다.

이 글에서는, 사용하기 쉬운 ajax 지원을 JSP 페이지로 가져오기 위해 외부 JavaScript를 사용하는 작은 JSP 태그 라이브러리를 설명하겠다: ajaxTags.

위로

시작하기

이 글에서 설명하는 예제를 실행하려면, 몇 가지 툴이 필요하다. 여기에서 사용하는 모든 애플리케이션은 무료로 사용할 수 있고, 오픈 소스이다.

ajax 기능을 애플리케이션에 구축하면 여러분의 사용자들에게 여러 가지 방면으로 큰 효과를 줄 수 있으며, 개발의 복잡성을 완화할 수 있다. ajaxTags 같은 라이브러리와 테스트를 완료한 JavaScript 라이브러리는 여러분에게 많은 도움이 될 것이다.

Apache Tomcat은 이 글에 있는 예제를 실행하기 위해 사용할 레퍼런스 구현 서블릿 컨테이너이다. Apache Tomcat 웹 사이트(참고자료)에서 무료로 다운로드 할 수 있다. 이 글의 예제는 최신 버전을 사용하고, 이 글을 쓰고 있는 현재 버전은 6.0.13이다.

또한, SourceForge에서는 ajaxTags 예제 애플리케이션을 다운로드 해야 한다. (참고자료) 이 예제는 ajaxTags 데모 1.3 버전을 사용한다. 이것은 표준 WAR 파일로서, Tomcat webapps 디렉토리에 전개할 수 있다. 검색해야 하는 URL을 간소하게 하고 싶다면, 전개하기 전에 WAR 파일 이름을 수정한다. 그렇지 않으면, http://localhost:8080/ajaxtags-1.3-beta-rc6-1/로 검색해야 한다.

그럼 시작해 보자.

위로

ajax는 목욕통을 청소하는 용도 아닌가?

불 과 몇 년 전에, 열심 개발자들 조차도 ajax라는 이름과 Colgate-Palmolive에서 개발하고 제조한 유명한 세정제와 혼동했다. 온라인 경험을 향상시킬 수 있는 웹 개발 기술이라고 생각하는 사람은 드물었다. 이제 ajax가 특정 기술을 뜻한다는 것을 알게 되었으므로, 이것이 어떻게 작동하고, 어떤 상황에서 이것을 사용할 수 있는지 알아야 한다.

어떻게 작동하는가?

ajax 애플리케이션을 개발하고 코딩 할 때, 전후에서 어떤 일이 발생하는지 이해해야 한다. 한 애플리케이션 내의 전형적인 이벤트 흐름은 다음과 같다:

1. 사용자가 웹 페이지를 요청한다.
2. 사용자가 웹 페이지에서 상태를 수정한다. (예를 들어, 링크를 클릭하고, 선택 박스에서 어떤 것을 선택하고, 라디오 버튼이나 체크 박스를 클릭한다.)
3. 상태 변경을 하면 이벤트가 실행되면서, JavaScript 함수가 호출된다.
4. JavaScript 함수는 XmlHttpRequest 객체를 인스턴스로 만드는데, 이것은 백그라운드에서 서버에 비동기식으로 HTTP 요청을 한다. (어떤 페이지 리프레시도 발생하지 않는다.)
5. 서버가 응답하면서, 요청된 데이터를 JavaScript 함수로 리턴한다.
6. JavaScript 함수는 추가 JavaScript 또는 DHTML을 통해 보이는 현재 페이지를 업데이트 및 수정한다.

현 재 보여지는 웹 페이지 부분들을 업데이트 하는 JavaScript는 어떤 HTML 엘리먼트가 업데이트를 담당하고 있는지를 알아야 한다. 주어진 페이지 내에서 특정 엘리먼트를 동적으로 업데이트 하려면(페이지 재 로딩 없이), 이러한 HTML 엘리먼트에 고유 ID를 할당해야 한다. Listing 1에 자세하게 설명되어 있다:

                
<select id="model" disabled="disabled">
  <option value="">Select model</option>
</select>

Listing 1은 모델의 ID를 특정 선택 박스에 할당한다. ID를 사용하게 되면, JavaScript를 사용하여 선택된 엘리먼트를 쉽게 배치 및 조작할 수 있다.

ajaxTags API는 잘 작성된, 오픈 소스, 서드 파티 JavaScript 라이브러리를 사용한다. 이러한 라이브러리들에는 풍부한 기능이 포함되어 있고, 많은 브라우저에서 광범위한 테스트를 거쳤기 때문에, 작업할 때 믿을 수 있다. ajaxTags에 의해 사용되는 서드 파티 라이브러리에는 다음이 포함된다:

• Prototype (JavaScript 라이브러리와 유틸리티 함수)
• Script.aculo.us (시각 효과들로 가득찬 JavaScript 라이브러리)
• Overlibmws (DHTML 팝업 라이브러리)

위로

ajaxTags를 사용할 때

개발자로서 일을 쉽게 하고, 여러분의 애플리케이션을 사용하는 사용자들의 경험을 향상시키고 싶은 상황에서 ajaxTags를 사용할 수 있다. 이 중 일부 유스 케이스에는 다음이 포함된다:

• 처음 선택에 기반하여 두 번째 드롭-다운 박스의 콘텐트를 수정한다.
• 사용자가 보고 있는 페이지 리프레시 없이 클릭 또는 마우스오버 이벤트에 기반하여 서버에서 추가 정보에 대한 요청을 실행한다.
• 전체 페이지를 재 로드 하지 않고, 사용자가 입력한 데이터에 기반하여 서버에서 계산을 수행한다.

이러한 기능들 중 일부를 애플리케이션에 통합하는 방법을 예제를 통해 알아보자.

위로

ajaxTags를 애플리케이션에 통합하기

ajaxTags를 애플리케이션에 통합하려면, 몇 가지 사전 조건들이 필요하다. 이 섹션에서는 이러한 사전 조건들과 종속물들을 설명하겠다.

종속물

ajaxTags 를 다운로드 하고 사용할 때 최선의 방법은, 단순한 JAR 파일만이 아닌 전체 바이너리 배포판을 다운로드 하는 것이다. 이러한 방식으로, Prototype, Script.aculo.us, overlibmws 라이브러리를 포함하여, 여기에 번들 된 필수 종속물들을 얻을 수 있다.

셋업 및 설정

애플리케이션에 ajaxTags를 셋업 및 설정하는 일은 매우 단순하다:

1. ajaxtags.jar 파일을 WEB-INF/lib 디렉토리에 넣는다.
2. 더 오래된 서블릿 컨테이너를 사용하고 있다면(Servlet 2.4 / JSP 2.0 이전), taglib 정의를 web.xml 파일에 추가해야 한다. 더 새로운 컨테이너를 사용하고 있다면, 걱정할 필요가 없다.
   
   
   Listing 2. 오래된 서블릿 컨테이너에 대한 태그 라이브러리 정의 (web.xml에 포함)
   

   <taglib> <uri>http://ajaxtags.org/tags/ajax</uri> <location>/WEB-INF/ajaxtags.tld</location> </taglib>

   
   
3. 종속 JavaScript 파일을 웹 애플리케이션에 복사한다. ajaxTags 문서에 따라서:
   
   • Prototype 1.4.0: prototype-1.4.0.js
   • Scriptaculous 1.5.1: scriptaculous.js, builder.js, controls.js, dragdrop.js, effects.js, and slider.js
   • OverLIBMWS (optional, for ajax:callout only): overlibmws.js

주 요 단계를 마치면, 애플리케이션에 ajaxTags JSP 태그 라이브러리를 사용할 수 있다. 개발 측면에서, 여러분에게 필요한 두 가지는 JSP 페이지(뷰)와 클라이언트에서 받은 비동기식 호출로 콘텐트를 리턴할 수 있는 서버 측 데이터 핸들러이다.

ajaxTags는 XML, HTML, 플레인 텍스트 콘텐트를 다루는데, 이것은 대부분의 사용자 필요를 채운다. API 자체에는 단 몇 줄의 코드 라인으로 알맞은 응답을 만들 수 있는 몇 가지 헬퍼 클래스가 포함되어 있다.

위로

ajaxTags 데모와 샘플

SourceForge에서 다운로드 받은 ajaxTags 데모 애플리케이션에는 수 많은 예제들이 있다. 이 중 몇 가지를 보도록 하자. 비슷한 기능들을 애플리케이션에 쉽게 통합하는 방법을 파악할 수 있다.

주: 본 샘플은 하드 코딩된 데이터 소스를 사용하고 있다. 실제에서는, 자바 파일에 하드 코딩된 데이터 대신 데이터베이스에서 데이터를 가져온다.

선택 박스 업데이트, 뷰, HTML

클 라이언트 측에서부터 시작해 보자. 이 곳에서 전체 프로세스가 앞에서 뒤로 어떻게 작동하는지를 알 수 있다. 여러분이 보게 될 첫 번째 것은 두 개의 드롭-다운 박스를 포함하고 있는 데모 JSP에서 온 스니펫이다. 이것은 페이지의 관련 부분이 보여지는 모습이다. (Tomcat에서 실행 중인 ajaxTags 데모 애플리케이션을 검색하거나, Select/Dropdown 예제에서 Run을 클릭하여 이것을 찾을 수 있다.) 이것은 전후 JavaScript 함수들과 프로그레스 인디케이터를 활용하기 때문에 특별히 좋은 예제이다. 또한 이것은 알맞은 선택을 하면 자동차 업체의 로고를 디스플레이 한다. (그림 1).

여러분도 보듯, 두 개의 드롭-다운 박스가 있다. 관련 JSP 코드(dropdown.jsp)를 보도록 하자. (Listing 3):

                
<label for="make">Make:</label>
<select id="make">
  <option value="">Select make</option>
  <option value="Ford">Ford</option>
  <option value="Honda">Honda</option>
  <option value="Mazda">Mazda</option>
</select>
<span id="progressMsg" style="display:none;">
<img alt="Indicator" src="<%=request.getContextPath()%> 
/img/indicator.gif" /> Loading...</span>
<label for="model">Model:</label>
<select id="model" disabled="disabled">
  <option value="">Select model</option>
</select>

선택 엘리먼트에 할당된 ID와, 두 번째 드롭-다운에 어떤 차 모델도 없고 실행 불가가 된다는 점을 주목하라.

선택 박스 업데이트, JSP 태그 신택스

이제, 애플리케이션의 가장 중요한 부분을 보도록 하자. 바로 ajaxTags JSP 태그 라이브러리의 실제 사용법이다. Listing 4 역시 같은 파일에서 온 것이다. ((dropdown.jsp):

                
<ajax:select
  baseUrl="${contextPath}/dropdown.view"
  source="make"
  target="model"
  parameters="make={make}"
  preFunction="initProgress"
  emptyOptionName="Select model"
  postFunction="resetProgress"
  errorFunction="reportError" />

Listing 4의 코드를 보기 전에, 다음 스니펫을 주목해 보자: ${contextPath} 혼돈하지 않도록, 이것은 실제로 EL (expression language)을 사용하는 변수 세트이고, header.jsp에서 정의된다. (Listing 5):

                
<c:set var="contextPath" scope="request">
   ${pageContext.request.contextPath}</c:set>

${contextPath} 변수가 어떻게 변환되는지를 확실히 알 수 있다. 이것의 값은, 여러분이 자바 코드로 보낸다면 이것의 값은 pageContext.getRequest().getContextPath()와 동일하다. ${contextPath} 변수는 설정에 기반하여 http://localhost:8080/ajaxtags-1.3-beta-rc6-1의 값으로 끝난다.

다시 Listing 4로 돌아가서, 서버에 비동기식 콜백을 하면, 요청하는 URL을 알아야 한다. ajaxTags는 baseUrl 매개변수를 필요로 하는데, 이것은 변경 이벤트가 make ID로 선택 박스에 발생할 때, 비동기식으로 요청되는 URL이다.

${contextPath}의 값을 안다면, 요청을 받고 있는 baseUrl이 http://localhost:8080/ajaxtags-1.3-beta-rc6-1/dropdown.view라는 것을 알 수 있다.

baseUrl 다음에는 source와 target이 있다. 이러한 매개변수들은 여러분이 작업하고 있는 HTML 엘리먼트의 ID를 요청한다. 이 경우, 여러분은 두 개의 선택 박스에 대해 작업하고 있다. 하나는 자동차 메이커를 포함하고 있고, 하나는 자동차 모델을 포함하고 있다. 자동차 메이커를 가진 선택 박스는 source이고, 자동차 모델을 갖고 있는 선택 박스는 target이다.

parameters 매개변수(Listing 6)은 요청을 받고 있는 URL을 따라 전달되어야 하는 추가 매개변수들이다:

                
parameters="make={make}"

make={make}처 럼 중괄호 신택스를 주목하라. 기본적으로 이것은 비동기식으로 요청되는 URL에 make의 매개변수 키를 붙이는 것이고, 이에 상응하는(ID에 기반) HTML 엘리먼트에서 찾은 모든 값을 전달한다. 따라서, 이 예제에서, 뒤에 있는 JavaScript가 make의 ID를 가진 HTML 엘리먼트를 얻고, 그 엘리먼트의 값을 HTTP 요청의 일부로서 전달한다. 실제 보다 더 어려운 것처럼 보이지만, 첫 번째 선택 박스에서 선택이 이루어질 때 요청 될 마지막 URL을 보자. (Listing 7):

                
http://localhost:8080/ajaxtags-1.3-beta-rc6-1/dropdown.view?make=Mazda

하나의 매개변수가 URL의 끝에 추가되었고, 매개변수 키는 make이고, 매개변수 값은 Mazda이다.

ajax:select 매개변수들인 preFunction, postFunction, errorFunction은 여러분이 작성했던 커스텀 JavaScript 함수들의 이름일 뿐이다. 이것은 타이밍이나 조건에 맞게 호출된다. 이 경우, 명명 방식이 분명하다. preFunction은 ajax 요청 전에 실행된다; postFunction은 ajax 요청이 완료되고, 응답을 받은 후에 실행된다. errorFunction은 문제가 발생할 때 실행된다.( 500 Internal Server Error를 리턴하는 요청, 또는 리소스가 존재하지 않는다는 메시지 등)

developerWorks ajax 리소스 센터 ajax 리소스 센터는 ajax 프로그래밍 모델 관련 튜토리얼, 디스커션 포럼, 블로그, wiki, 이벤트, 뉴스 등을 제공하고 있습니다. ajax에 관한 모든 것이 집대성 되어 있습니다.

마지막 매개변수인 emptyOptionName은 선택이 이루어 지지 않았다는 것을 나타내는 옵션의 값이다. 이 경우, 기본 상태가 복원된다.

브라우저를 사용하여 JSP 페이지를 요청한 후에, ajax:select 태그가 Listing 8의 JavaScript 스니펫으로 대체되었다는 것을 알게 된다. 이것은 클라이언트의 페이지에 삽입된다. (웹 브라우저의 페이지 소스):

                
<script type="text/javascript">
new ajaxJspTag.Select(
"/ajaxtags-1.3-beta-rc6-1/dropdown.view", {
parameters: "make={make}",
postFunction: resetProgress,
target: "model",
preFunction: initProgress,
source: "make",
emptyOptionName: "Select model",
errorFunction: reportError
});
</script>

기본적으로, 이 JavaScript 스니펫은 브라우저가 이것을 계산하기 때문에 실행된다. JavaScript 객체(ajaxJspTag.Select)가 인스턴스화 되고, 올바른 리스너가 알맞은 엘리먼트에 첨부된다.

Mazda 메이커의 자동차를 요구하는 URL이 요청될 때 백그라운드에서 브라우저로 보내진 실제 응답을 보자. (Listing 9) (응답은 Listing 7의 URL을 요청한 결과이다.)

                
<ajax-response>
  <response>
    <item>
      <name>Mazda 3</name>
      <value>Mazda 3</value>
      <value>false</value>
    </item>
    <item>
      <name>Mazda 6</name>
      <value>Mazda 6</value>
      <value>false</value>
    </item>
    <item>
      <name>RX-8</name>
      <value>RX-8</value>
      <value>false</value>
    </item>
  </response>
</ajax-response>

선택 박스 업데이트: 서버 측 보기

본 예제의 서버 측 코드는 매우 간단하다. ajaxTags API는 여러분의 필요에 맞춰 HttpServlet 하위 클래스와 간단한 XML 응답을 만드는 유틸리티 클래스를 구현했다. (Listing 10):

                
public String getXmlContent(
  HttpServletRequest request, HttpServletResponse response)
  throws Exception {
  String make = request.getParameter("make");
  CarService service = new CarService();
  List<Car> list = service.getModelsByMake(make);
  ajaxXmlBuilder xml = new ajaxXmlBuilder();
  for (Car car:list) {
    xml.addItem(car.getModel(),true,car.getModel(),false);
  }
  return xml.toString();
}

필자는 예제에서 코드를 수정하여 Listing 10을 좀더 단순화 했다. 여러분도 보듯, ajaxTags 클라이언트 측 JavaScript에 의해 핸들될 수 있는 응답을 생성하는데 아주 적은 코드만 개입되었다.

위로

요약

ajaxTags 를 사용하면 강력한 ajax 기능을 새로운 자바 웹 애플리케이션이나 기존 자바 웹 애플리케이션에 쉽게 추가할 수 있다. 드롭-다운 박스 수정, 토글링, 탭 패널, 콜아웃, 기타 기능들을 지원하는 JSP 태그가 완벽하게 보완된 ajaxTags는 ajax 애플리케이션을 위한 탁월한 선택이다. ajaxTags 같은 ajax 라이브러리를 사용하면, 웹 애플리케이션의 가용성과 사용자 경험을 크게 향상시킬 수 있으며, 서버 로드와 대역폭 사용을 줄일 수 있다.

참고자료

• ajaxTags와 AppFuse 튜토리얼.
  
  
• 또다른 짧은 ajaxTags 튜토리얼.
  
  
• ajax 기반 웹 애플리케이션을 구현하는 방법을 설명하는 튜토리얼. "Asynchronous JavaScript with XML을 사용하여 애플리케이션 구현하기" (Naveen Balani and Rajeev Hathi, developerWorks, 2005년 11월).
  
  
• "ajax와 XML: 다섯 가지 ajax 안티 패턴(anti-pattern) (한글)" : ajax 코드의 일반적인 함정 피하기 (Jack D. Herrington, developerWorks, 2007년 5월).
  
  
• "ajax와 XML: 다섯 개의 일반적인 ajax 패턴 (한글)" : 유용한 ajax 디자인 패턴들 (Jack D. Herrington, developerWorks, 2007년 4월).
  
  
• ajax를 이용한 웹 애플리케이션 구현: "자바 개발자를 위한 ajax: 동적 자바 애플리케이션 구현 (한글)" (Philip McCarthy, developerWorks, 2005년 9월).
  
  
• developerWorks XML 존
  
  
• developerWorks ajax 리소스 센터: ajax 프로그래밍 모델 관련 튜토리얼, 디스커션 포럼, 블로그, wiki, 이벤트, 뉴스 등을 제공.

• ajaxTags 웹사이트(Sourceforge).
  
  
• Apache Tomcat 다운로드(Apache.org).
  
  

• 포럼에 참여하기.
  
  
• developerWorks XML 존 토론 포럼.
  
  

필자소개

		Daniel Wintschel은 강력하고 효율적인 중소 비즈니스를 돕는데 대부분의 시간을 투자한다. 자바 또는 Ruby로 웹 애플리케이션도 작성한다. 코딩을 진정으로 즐긴다.