Ajax를 이용한 웹 애플리케이션 구현

JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 

난이도 : 초급

Philip McCarthy, 소프트웨어 개발 컨설턴트, Independent

2005 년 9 월 20 일
2006 년 10 월 24 일 수정

페이지 리로드 사이클은 웹 애플리케이션 개발에 있어서 가장 큰 사용 장애이자 자바 개발자들에게는 심각한 도전 과제이다. Philip McCarthy가 혁신적인 동적 웹 애플리케이션 구현 방법을 소개한다. Ajax (Asynchronous JavaScript and XML)는 자바, XML, JavaScript가 혼합된 프로그래밍 기술이다. 자바 기반 웹 애플리케이션의 페이지 리로드 패러다임을 과감히 바꾼다.

시리즈 소개

• 자바 개발자를 위한 Ajax: 동적 자바 애플리케이션 구현 (한글)
• 자바 개발자를 위한 Ajax: Ajax용 자바 객체 직렬화 (한글)
• Java 개발자를 위한 Ajax: Ajax와 Direct Web Remoting (한글)
• 자바 개발자들을 위한 Ajax: 구글 웹 툴킷(Google Web Toolkit) 연구 (한글)

Ajax (Asynchronous JavaScript and XML)는 클라이언트 측 스크립팅을 사용하는 웹 애플리케이션 개발 방식으로서 데이터를 웹 서버와 교환한다. 따라서 웹 페이지는 동적으로 업데이트 될 수 있다. 전체 페이지를 리프레시 하여 인터랙션 플로우에 영향을 끼치지도 않는다. Ajax를 사용하여 보다 풍부하고 동적인 웹 애플리케이션 사용자 인터페이스를 만들 수 있다. 원시 데스크탑 애플리케이션의 가용성에 접근한 풍부하고 동적인 웹 애플리케이션 사용자 인터페이스이다.

Ajax는 기술이 아니다. 오히려 패턴에 더 가깝다. Ajax는 많은 개발자들에게는 생소할지 모르지만, Ajax 애플리케이션을 구현한 모든 컴포넌트들은 여러 해 동안 존재했다. 2004년과 2005년에 Ajax 기술에 기반한 동적 웹 UI가 생겨나면서 주목을 받게 되었다. 대표적인 예로 Google의 Gmail과 Maps 애플리케이션 그리고 사진 공유 사이트인 Flickr을 들 수 있다. 이러한 UI들은 몇몇 웹 개발자들에 의해 "Web 2.0"으로 불릴 만큼 혁신적이었다. 이에 따라 Ajax 애플리케이션에 대한 인기도 하늘로 치솟았다.

이 시리즈를 통해 Ajax를 사용하여 애플리케이션을 개발할 때 필요한 모든 툴들을 소개하겠다. 우선 이 첫 번째 글에서는 Ajax의 개념을 설명하고, 자바 기반 웹 애플리케이션에 Ajax 인터페이스를 구현하는 기본적인 단계들을 설명하겠다. 코드 예제를 사용하여 서버측 자바 코드와 클라이언트측 JavaScript를 설명하겠다. 이것이 바로 동적인 Ajax 애플리케이션의 핵심축을 구성한다. 마지막으로 Ajax 방식의 단점과 Ajax 애플리케이션을 구현할 때, 반드시 고려해야 할 가용성 및 접근성 문제들도 설명하도록 하겠다.

더 나은 쇼핑 카트

Ajax를 사용하여 전통적인 웹 애플리케이션을 만들 수 있다. 페이지 부하를 줄여서 인터랙션을 간소하게 할 수 있다. 아이템들이 추가될 때 마다 동적으로 업데이트 되는 쇼핑 카트 예제를 설명하겠다. 온라인 스토어와 결합된 이 방식을 사용하면, 사용자들은 전체 페이지가 업데이트 될 때까지 기다리지 않고도 카트에 아이템들을 검색 및 추가할 수 있다. 이 글에 소개한 몇몇 코드는 이 쇼핑 카트 예제에만 국한된 것이지만, 여기에 사용된 기술들은 Ajax의 어떤 애플리케이션에나 적용될 수 있다. Listing 1은 쇼핑 카트 예제에서 사용되는 HTML 코드이다.

				
<!-- Table of products from store's catalog, one row per item -->
<th>Name</th> <th>Description</th> <th>Price</th> <th></th>
...
<tr>
  <!-- Item details -->
  <td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td>
  <td>
    <!-- Click button to add item to cart via Ajax request -->
    <button onclick="addToCart('hat001')">Add to Cart</button>
  </td>
</tr>
...

<!-- Representation of shopping cart, updated asynchronously -->
<ul id="cart-contents">

  <!-- List-items will be added here for each item in the cart -->
  
</ul>

<!-- Total cost of items in cart displayed inside span element -->
Total cost: <span id="total">$0.00</span>

			

위로

Ajax 작동

Ajax 인터랙션은 XMLHttpRequest라고 하는 JavaScript 객체로 시작한다. 이름만 보아도 알겠지만 이것은 클라이언트측 스크립트가 HTTP 요청을 수행하도록 하고 XML 서버 응답을 파싱한다. Ajax 연구의 첫 번째 단계는 XMLHttpRequest 인스턴스를 만드는 것으로 시작한다. 이 요청(GET 또는 POST)에 사용되는 HTTP 메소드와 도착지 URL은 XMLHttpRequest 객체에서 설정된다.

이제 Ajax의 첫 번째 단어 a가 비동기식(asynchronous)을 의미한다는 것을 기억하라. HTTP 요청을 보내면 서버가 응답할 때 까지 기다릴 것을 브라우저에 요청하지 않아도 된다. 대신 사용자와 페이지 간 인터랙션에 지속적으로 반응하고, 서버의 응답이 도착하면 이를 다루도록 요청한다. 이를 위해서 XMLHttpRequest로 콜백 함수를 등록하고, XMLHttpRequest를 비동기식으로 실행한다. 컨트롤이 브라우저에 리턴되지만, 콜백 함수는 서버 응답이 도착하면 호출될 것이다.

자바 웹 서버에 요청은 다른 HttpServletRequest와 마찬가지로 도착한다. 요청 매개변수를 파싱한 후에 서블릿은 필요한 애플리케이션 로직을 호출하고, 응답을 XML로 직렬화 하고, 이를 HttpServletResponse에 작성한다.

다시 클라이언트로 돌아가서, XMLHttpRequest에 등록된 콜백 함수가 서버에서 리턴된 XML 문서를 처리하도록 호출된다. 마지막으로, 사용자 인터페이스는 서버로부터 온 데이터에 대한 응답으로 업데이트된다. 이때 JavaScript를 사용하여 페이지의 HTML DOM을 조작한다. 그림 1은 Ajax의 시퀀스 다이어그램이다.

위 그림은 고급 시퀀스 다이어그램이다. 각 단계를 자세히 설명하도록 하겠다. 그림 1에서 보면 Ajax의 비동기식 방식 때문에 시퀀스가 단순하지 않다.

위로

XMLHttpRequest 실행

Ajax 시퀀스의 시작 부분부터 설명하겠다. 브라우저에서 XMLHttpRequest를 생성 및 실행하는 Ajax 시퀀스의 시작 부분부터 설명하겠다. 불행히도 XMLHttpRequest를 만드는 방식은 브라우저마다 다르다. Listing 2의 JavaScript 함수는 부드럽게 진행되면서 현재 브라우저에 맞는 정확한 방식을 찾고, 사용 준비가 된 XMLHttpRequest를 리턴한다. 이것을 JavaScript 라이브러리에 복사하여 XMLHttpRequest가 필요할 때 사용하도록 한다.

				
/*
 * Returns a new XMLHttpRequest object, or false if this browser
 * doesn't support it
 */
function newXMLHttpRequest() {

  var xmlreq = false;

  if (window.XMLHttpRequest) {

    // Create XMLHttpRequest object in non-Microsoft browsers
    xmlreq = new XMLHttpRequest();

  } else if (window.ActiveXObject) {

    // Create XMLHttpRequest via MS ActiveX
    try {
      // Try to create XMLHttpRequest in later versions
      // of Internet Explorer

      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e1) {

      // Failed to create required ActiveXObject

      try {
        // Try version supported by older versions
        // of Internet Explorer

        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

      } catch (e2) {

        // Unable to create an XMLHttpRequest with ActiveX
      }
    }
  }

  return xmlreq;
}
  
			

나중에 XMLHttpRequest를 지원하지 않는 브라우저를 다루는 방법을 설명하겠다. 지금은 Listing 2의 새로운 newXMLHttpRequest가 언제나 XMLHttpRequest를 리턴하는 것으로 간주한다.

쇼핑 카트 시나리오 예제로 돌아가서, 사용자가 해당 카탈로그 아이템에서 addToCart() 버튼을 누를 때 마다 Ajax 인터랙션을 호출하도록 할 것이다. addToCart()라는 onclick 핸들러 함수는 Ajax 호출 시 카트의 상태를 업데이트 한다.(Listing 1). Listing 3에서 보듯 addToCart()가 해야 하는 첫 번째 일은 Listing 2에서 newXMLHttpRequest()함수를 호출하여 XMLHttpRequest의 인스턴스를 획득하는 것이다. 다음에는 콜백 함수를 등록하여 서버의 응답을 받는 것이다. (Listing 6).

요청으로 인해 서버상의 상태가 변경되기 때문에 HTTP POST가 이 일을 수행하도록 할 것이다. POST 를 통해 데이터를 보내려면 세 단계를 거쳐야 한다. 우선, 통신하고 있는 서버 리소스에 대한 POST에 연결한다. 이 경우 URL cart.do에 매핑된 서블릿이다. 그런 다음 XMLHttpRequest에 헤더를 설정한다. 이때 요청 내용은 폼 인코딩(form-encoded) 데이터라는 것을 언급한다. 마지막으로 폼 인코딩 데이터를 가진 요청을 바디(body)로서 보낸다.

Listing 3은 그 세 단계를 나타낸다.

				
/*
 * Adds an item, identified by its product code, 
 * to the shopping cart
 * itemCode - product code of the item to add.
 */
function addToCart(itemCode) {

  // Obtain an XMLHttpRequest instance
  var req = newXMLHttpRequest();

  // Set the handler function to receive callback notifications
  // from the request object
  var handlerFunction = getReadyStateHandler(req, updateCart);
  req.onreadystatechange = handlerFunction;
  
  // Open an HTTP POST connection to the shopping cart servlet.
  // Third parameter specifies request is asynchronous.
  req.open("POST", "cart.do", true);

  // Specify that the body of the request contains form data
  req.setRequestHeader("Content-Type", 
                       "application/x-www-form-urlencoded");

  // Send form encoded data stating that I want to add the 
  // specified item to the cart.
  req.send("action=add&item="+itemCode);
}

			

지금까지 Ajax 설정의 첫 번째 부분을 보았다. 주로 HTTP 요청을 클라이언트에서 생성하여 실행하는 것이다. 다음에는 이 요청을 핸들할 때 사용하는 자바 서블릿 코드이다.

위로

서블릿 요청 핸들링

서블릿으로 XMLHttpRequest를 핸들하는 것은 브라우저에서 일반적인 HTTP 요청을 핸들하는 것과 비슷하다. 포스트 바디(body)에 보내진 폼 인코딩 데이터는 HttpServletRequest.getParameter() 호출로 얻을 수 있다. Ajax 요청은 애플리케이션의 일반 웹 요청과 같은 HttpSession에서 발생한다. 이것은 쇼핑 카트 시나리오 예제에 유용하다. 왜냐하면 사용자의 쇼핑 카트 상태를 JavaBean에 캡슐화 하고, 그 상태를 요청들 간 세션에 지속시키기 때문이다.

Listing 4는 Ajax 요청을 핸들하여 쇼핑 카트를 업데이트 하는 간단한 서블릿의 일부이다. Cart빈은 사용자 세션에서 검색되고, 상태는 요청 매개변수에 따라 업데이트 된다. Cart는 XML로 직렬화 되고, 그 XML은 ServletResponse에 작성된다. 응답 내용 유형을 application/xml로 설정하는 것이 중요하다. 그렇지 않으면 XMLHttpRequest는 응답 내용을 XML DOM으로 파싱할 것이다.

				
public void doPost(HttpServletRequest req, 
  HttpServletResponse res)
      throws java.io.IOException {

  Cart cart = getCartFromSession(req);

  String action = req.getParameter("action");
  String item = req.getParameter("item");
  
  if ((action != null)&&(item != null)) {

    // Add or remove items from the Cart
    if ("add".equals(action)) {
      cart.addItem(item);

    } else if ("remove".equals(action)) {
      cart.removeItems(item);

    }
  }

  // Serialize the Cart's state to XML
  String cartXml = cart.toXml();

  // Write XML to response.
  res.setContentType("application/xml");
  res.getWriter().write(cartXml);
}

			

Listing 5는 Cart.toXml() 메소드에서 만들어진 XML 예제이다. 매우 단순하다. cart 엘리먼트의 generated 애트리뷰트에 주목하라. System.currentTimeMillis()에서 만들어진 타임스템프이다.

				
<?xml version="1.0"?>
<cart generated="1123969988414" total="$171.95">
  <item code="hat001">
    <name>Hat</name>
    <quantity>2</quantity>
  </item>
  <item code="cha001">
    <name>Chair</name>
    <quantity>1</quantity>
  </item>
  <item code="dog001">
    <name>Dog</name>
    <quantity>1</quantity>
  </item>
</cart>

			

다운로드 섹션의, 애플리케이션 소스 코드에서 Cart.java를 보았다면, 스트링(strings)들을 함께 붙여서 XML이 만들어 졌다는 것을 알 수 있을 것이다. 이 예제에서는 가능하지만, 자바 코드에서 XML을 만드는 방법 중 최악의 방법이다. 다음 글에서는 더 나은 방법을 소개하겠다.

이제 CartServlet이 XMLHttpRequest에 어떻게 응답하는지 알았다. 이제 클라이언트측으로 리턴할 차례 이다. 여기에서 XML 응답이 페이지 상태의 업데이트에 어떻게 사용되는지를 보게 된다.

위로

JavaScript를 이용한 응답 핸들링

XMLHttpRequest의 readyState 속성은 요청의 주기 상태를 부여하는 숫자 값이다. "초기화되지 않은 것"에는 0 부터 "완료된 것"에는 4 까지 붙을 수 있다. readyState가 변경될 때 마다 readystatechange 이벤트가 실행되고, onreadystatechange 속성을 통해 붙은 핸들러 함수가 호출된다.

Listing 3에서, getReadyStateHandler()함수가 호출되어 핸들러 함수를 만드는 방법을 보았다. 이 핸들러 함수는 onreadystatechange속성으로 할당된다. getReadyStateHandler()는 함수들이 JavaScript의 첫 번째 객체라는 것을 활용한다. 다시 말해서 함수들은 다른 함수들에 대한 매개변수가 될 수 있고, 다른 함수들을 생성 및 리턴할 수 있다. XMLHttpRequest가 완료되었는지 여부를 검사하여 그 핸들러 함수에 대한 XML 응답으로 전달하는 함수를 리턴하는 것은 getReadyStateHandler()의 역할이다. Listing 6은 getReadyStateHandler()의 코드이다.

/*
 * Returns a function that waits for the specified XMLHttpRequest
 * to complete, then passes its XML response
 * to the given handler function.
 * req - The XMLHttpRequest whose state is changing
 * responseXmlHandler - Function to pass the XML response to
 */
function getReadyStateHandler(req, responseXmlHandler) {

  // Return an anonymous function that listens to the 
  // XMLHttpRequest instance
  return function () {

    // If the request's status is "complete"
    if (req.readyState == 4) {
      
      // Check that a successful server response was received
      if (req.status == 200) {

        // Pass the XML payload of the response to the 
        // handler function
        responseXmlHandler(req.responseXML);

      } else {

        // An HTTP problem has occurred
        alert("HTTP error: "+req.status);
      }
    }
  }
}

HTTP 상태 코드 Listing 6에서, XMLHttpRequest의 상태 속성(status property)은 요청이 성공적으로 완료되었는지를 보기 위해 테스트된다. status에는 서버 응답에 대한 HTTP 상태 코드가 포함되어 있다. GET과 POST 요청을 수행할 때 200(OK)이 아닌 어떤 코드도 에러이다. 서버가 리다이렉트 응답(예를 들어, 301 또는 302)을 보내면 브라우저는 리다이렉트를 따라 새로운 위치에서 리소스를 가져온다. XMLHttpRequest는 리다이렉트 상태 코드를 볼 수 없다. 또한 브라우저(Cache-Control: no-cache)는 헤더를 모든 XMLHttpRequest에 추가하여 클라이언트 코드가 (변경되지 않은) 304 서버 응답을 다루지 않도록 한다.

getReadyStateHandler()에 대하여

특히 JavaScript 읽기에 익숙하지 않다면 getReadyStateHandler()는 비교적 복잡한 코드이다. 대신 여러분의 JavaScript 라이브러리에 이 하수를 추가하여 XMLHttpRequest의 내부를 다루지 않고도 Ajax 서버 응답들을 핸들할 수 있다. 중요한 것은 자신의 코드에서 getReadyStateHandler()를 사용하는 방법을 이해하는 것이다.

Listing 3에서 getReadyStateHandler() 는 다음과 같이 호출된다. handlerFunction = getReadyStateHandler(req,updateCart). 이 경우 getReadyStateHandler()에 의해 리턴된 함수는 변수 req에 있는 XMLHttpRequest가 완료되었는지를 확인한 다음 응답 XML이 있는 updateCart 함수를 호출한다.

카트 데이터 추출하기

Listing 7은 updateCart()의 코드이다. 이 함수는 DOM 호출들을 사용하여 쇼핑 카트 XML 문서를 조사하여 새로운 카트 내용을 반영하여 웹 페이지를 업데이트 한다. (Listing 1) XML DOM에서 데이터를 추출하는데 사용된 호출에 집중해보자. cart 엘리먼트에 대한, generated 애트리뷰트는 Cart가 XML로 직렬화 되었을 때 만들어진 타임스템프이다. 이것은 새로운 카트 데이터가 옛 카트 데이터에 반영되지 않았는지를 확인한다. Ajax 요청은 근본적으로 비동기식이라서 시퀀스에서 도착하는 서버 응답에 대한 세이프가드를 체크한다.

				
function updateCart(cartXML) {

 // Get the root "cart" element from the document
 var cart = cartXML.getElementsByTagName("cart")[0];

 // Check that a more recent cart document hasn't been processed
 // already
 var generated = cart.getAttribute("generated");
 if (generated > lastCartUpdate) {
   lastCartUpdate = generated;

   // Clear the HTML list used to display the cart contents
   var contents = document.getElementById("cart-contents");
   contents.innerHTML = "";

   // Loop over the items in the cart
   var items = cart.getElementsByTagName("item");
   for (var I = 0 ; I < items.length ; I++) {

     var item = items[I];

     // Extract the text nodes from the name and quantity elements
     var name = item.getElementsByTagName("name")[0]
                                               .firstChild.nodeValue;
                                               
     var quantity = item.getElementsByTagName("quantity")[0]
                                               .firstChild.nodeValue;

     // Create and add a list item HTML element for this cart item
     var li = document.createElement("li");
     li.appendChild(document.createTextNode(name+" x "+quantity));
     contents.appendChild(li);
   }
 }

 // Update the cart's total using the value from the cart document
 document.getElementById("total").innerHTML = 
                                          cart.getAttribute("total");
}

			

이것으로 Ajax 실행이 완료되었다. 물론 여러분은 웹 애플리케이션이 실행되는 것을 보고 싶을 것이다.(다운로드 참조). 이 예제는 매우 간단하고 환경 범위도 다양하다. 예를 들어 서버측 코드를 추가하여 카트에서 아이템을 제거했지만, UI에서 접근하는 방법은 없다. 애플리케이션의 기존 JavaScript 코드에 이러한 기능을 구현하기 바란다.

위로

Ajax를 사용할 때의 문제점

다른 기술과 마찬가지로 Ajax도 허점이 많이 있다 . 최근에는 쉬운 솔루션이 없다는 것이 문제되고 있지만 Ajax가 성숙해 가면서 개선될 전망이다. 개발자 커뮤니티가 Ajax 애플리케이션 개발에 경험을 많이 쌓고 최선의 방법과 가이드라인이 문서화 될 것이다.

XMLHttpRequest의 기능

Ajax 개발자들이 직면한 가장 큰 문제들 중 하나는 XMLHttpRequest를 사용할 수 없을 경우이다. 대다수의 브라우저들은 XMLHttpRequest를 지원하지만, 어떤 사람들은 그러한 브라우저를 사용하지 않거나 브라우저 보안 설정 때문에 XMLHttpRequest를 사용할 수 없는 경우도 있다. 기업 인트라넷에 전개할 웹 애플리케이션을 개발한다면 어떤 브라우저가 지원되는지를 지정하고, XMLHttpRequest를 언제나 사용할 수 있도록 해야 한다. 하지만 공용 웹상에 전개한다면 XMLHttpRequest를 사용할 수 있겠지만 오래된 브라우저, 장애인용 브라우저, 핸드헬드용 경량 브라우저에는 사용할 수 없다.

따라서 애플리케이션을 "부드럽게 강등시켜서" XMLHttpRequest지원이 안되는 브라우저에서 작동하도록 해야 한다. 이 쇼핑 카트 예제에서 애플리케이션을 강등시키는 최선의 방법은 Add to Cart 버튼이 폼 제출을 수행하도록 하는 것이다. 페이지를 리프레시하여 카트의 업데이트를 반영한다. 페이지가 로딩되면 Ajax 작동이 JavaScript를 통해 페이지에 추가될 수 있다. JavaScript 핸들러 함수를 각 Add to Cart 버튼에 붙인다. 이는 어디까지나 XMLHttpRequest가 가능할 때이다. 또 다른 방법은 사용자가 로그인할 때 XMLHttpRequest를 탐지하는 것이다. 그리고 나서 Ajax 버전의 애플리케이션을 실행하든지 아니면 폼 기반 버전을 실행한다.

가용성 문제

Ajax 애플리케이션에 관련한 몇 가지 가용성 문제들이 있다. 예를 들어, 인풋이 등록되었다는 것을 사용자에게 알리는 것이 중요할 수 있다. 왜냐하면 보통의 피드백 방식인 모래시계 커서와 돌아가는 브라우저 "쓰로버(throbber)"가 XMLHttpRequest에 적용되지 않기 때문이다. 한 가지 방법은 Submit 버튼을 "Now updating..."메시지로 대체시키는 것이다. 이렇게 해서 사용자들이 응답을 기다리는 동안 버튼을 반복적으로 클릭하지 않도록 한다.

또 다른 문제는 사용자가 그들이 보고 있는 페이지의 일부가 업데이트 되었다는 것을 인식하지 못하는 것이다. 다양한 시각 기술을 사용하여 업데이트된 페이지 부분을 그려서 이 문제를 해결할 수 있다. 페이지 업데이트와 관련한 또 다른 문제로는 브라우저의 뒤로가기(back) 버튼이 "비활성화(breaking)"되는 것, 주소 바의 URL이 페이지의 전체 상태를 반영하지 않는 문제, 북마킹이 안되는 경우 등이 있다. (참고자료)

서버 부하

폼 기반의 Ajax UI를 구현하면 서버에서 요청 수가 상당히 많이 늘어난다. 예를 들어, 사용자가 검색 폼을 제출할 때 Google 웹 검색이 서버에 한번의 히트를 일으킨다고 해보자. 하지만 사용자의 검색어를 자동 완성하는 Google Suggest는 서버에 여러 요청들을 보낸다. Ajax 애플리케이션을 개발할 때 서버에 얼마나 많은 요청들을 보낼 것인지, 그리고 서버 부하가 어떻게 될 것인지를 알아야 한다. 또한 클라이언트에 요청을 버퍼링하고 클라이언트에 서버 응답을 캐싱하여 서버 부하를 완화시킬 수 있다. 또한 Ajax 웹 애플리케이션을 설계하여 가능한 많은 로직들이 굳이 서버에 연결되지 않고도 클라이언트에서 수행될 수 있도록 한다.

비동기식 다루기

XMLHttpRequest가 발송되는 순서대로 완료될 것이라는 보장이 없다. 실제로 그것까지 염두해 가며 애플리케이션을 설계하지 않는다. 쇼핑 카트 예제에서 마지막으로 업데이트 된 타임스탬프는 새로운 카트 데이터가 오래된 데이터에 적용되었는지를 확인할 떄 사용되었다. (Listing 7). 이것은 쇼핑 카트 시나리오에서 매우 기본적인 방식이지만 다른 경우에는 그렇지 않다. 설계할 때 비동기식 서버 응답을 어떻게 처리할 것인지를 생각하라.

위로

결론

Ajax의 기본 원리와 Ajax 인터랙션에 참여하는 클라이언트와 서버측 컴포넌트에 대해서 설명했다. 이들 모두 자바 기반 Ajax 웹 애플리케이션을 만드는 요소들이다. 또한 Ajax 접근방식에 따르는 고급 디자인 문제들도 이해해야 한다. 성공적인 Ajax 애플리케이션을 만들기 위해서는 UI 디자인부터 자바 스크립트 디자인, 그리고 서버측 아키텍쳐에 이르기까지 유기적인 접근 방식이 필요하다. 하지만 이제 여러분도 Ajax에 대한 기본적인 지식이 있으니 문제없다.

이 글에서 설명한 기술들을 사용하여 대형 Ajax 애플리케이션을 작성할 때의 복잡함에 압도될지 모르겠다. 하지만 좋은 소식이 있다. Struts, Spring, Hibernate 같은 프레임웍이 저급의 Servlet API와 JDBC에서 탈피하여 추상 웹 애플리케이션으로 진화했기 때문에 툴킷들을 사용하면 Ajax 개발이 쉬워진다. 이들 중 몇몇은 클라이언트 측에만 해당된다. 페이지에 시각 효과를 쉽게 추가할 수 있고, XMLHttpRequest의 사용법도 간단해진다. 서버측 코드에서 Ajax 인터페이스를 자동으로 생성하는 방법도 제공한다. Ajax 개발 방식이 고급화 되었다. .

Ajax 커뮤니티는 빠르게 변화하고 있고 정보도 풍부하다. 이 글을 다 읽었다면 참고자료 섹션을 참조하기 바란다. Ajax 또는 클라이언트측 개발이 처음인 사람들에게 권한다. 또한 시간을 내어 샘플 코드도 공부하기 바란다.

다음에는 XMLHttpRequest API를 보다 자세히 설명하고 JavaBean에서 XML을 쉽게 생성하는 방법도 설명하겠다. JSON (JavaScript Object Notation)도 소개할 테니 기대하라.

기사의 원문보기

• Ajax for Java developers: Build dynamic Java applications

위로

다운로드 하십시오

	다운로드 방식에 대한 정보			Get Adobe® Reader®

참고자료

• "Beyond the DOM" (Dethe Elza, developerWorks, May 2005)
  
  
• "Ajax and scripting Web services with E4X" (Paul Fremantle and Anthony Elder, developerWorks, April 2005)
  
  
• "Ajax: A New Approach to Web Applications" (Jesse James Garrett, Adaptive Path, February 2005)
  
  
• The Java BluePrints Solutions Catalog.
  
  
• AjaxPatterns.org
  
  
• XMLHttpRequest Usability Guidelines.
  
  
• Ajax Mistakes
  
  
• The Java technology zone
  
  

• Mozilla Firefox
  
  

• 포럼에 참여하기.
  
  
• developerWorks blogs

필자소개

		Philip McCarthy는 자바 및 웹 기술을 전공한 소프트웨어 개발 컨설턴트다. 그는 휴렛 팩커드 연구실 및 오랜지 사에서 디지털 미디어 및 텔레콤 분야에 종사해 왔고 현재는 영국 런던에서 재정 소프트웨어 분야에서 연구하고 있다.