Ajax

Web2hub wiki

Jump to: navigation, 찾기

목차

개요

Ajax란?

Ajax 예제: Google Map

Ajax, 그리고 웹애플리케이션의 진화

Ajax 개발

여기서는 Ajax를 이용하기 위한 코드에 대해 간단히 소개하고 넘어간다. 아래에 소개하는 코드를 실전에서 쓸 경우는 거의 없을 것이다. 만일 XMLHttpRequest 및 기본적인 코드에 대해 친숙하다면, Ajax_frameworks를 살펴보는 것이 더 나을 것이다.

XMLHttpRequest

XMLHttpRequest는 Ajax와 같이 비동기 방식으로 요청을 생성하고 응답을 처리하기 위한 자바스크립트 객체이다. 불행히도 브라우저에 따라 XMLHttpRequest 객체를 생성하는 문법은 조금 다르다. 다음과 유사한 형태의 코드를 이용해서 (브라우저에 따른) XMLHttpRequest 객체를 생성한 후, 그 핸들을 반환받을 수 있다. 

function createXHR(){
   var xhr;
   try{
      xhr = new ActiveXObject("Msxml2.XMLHTTP");  // before IE 5.0
   }catch (e){
      try{
         xhr = new ActiveXObject("Microsoft.XMLHTTP");  // IE 5.0 - 6.0
      }catch (E){
         xhr = false;
      }
   }
   if (!xhr && typeof XMLHttpRequest != 'undefined'){
      xhr = new XMLHttpRequest();  // Mozilla, etc.
   }
   return xhr;
}

위의 코드는 브라우저 종류에 따라 다른 문법을 지원하기 위해 지저분한 감이 있다. Ajax_frameworks에서 소개하는 몇몇 프레임워크에서는 위와 같은 기능을 한두줄로 간편하게 처리할 수 있는 방법들을 제공한다.


이제 위에서 생성한 XMLHttpRequest 객체를 사용하여 비동기 요청을 생성하고 응답을 처리해야 한다. 여기서 다양한 경우들에 대한 구체적인 코드를 모두 다루기보다는 직관적인 사용법만을 제시하는 정도로 하겠다. 

var xhr;

// 임의의 인자 arg를 받아 ajax 요청을 생성한다. (필요에 따라 arg는 없어도 무방)
function sendRequest(arg){
   xhr = createXHR();

   // 요청의 처리 경과에 따라 호출될 콜백 함수를 등록한다.
   xhr.onreadystatechange = processResponse;  

   // some_address라는 서버측 주소에 arg 인자를 덧붙여서 GET method로 요청을 만든다.
   xhr.open("GET", "/some_address?" + arg);  

   // 위에서 만든 요청을 서버로 전송한다. 
   // 비동기 요청이므로 아래의 호출은 응답을 기다리지 않고 즉시 반환된다. 
   // 서버측 응답은 앞에서 등록한 processResponse 콜백 함수에서 처리된다.
   xhr.send(null);
}

function processResponse(){
   if (xhr.readyState == 4){
      var data = xhr.responseText;  // 서버측에서 보내온 응답을 plain text로 받아온다.
      // do something with data..
   }
}

위의 코드에서 xhr.readyState == 4 구문이 의아하게 보일지도 모르겠다. readyState는 HTTP 요청의 진행 상태에 따라 아래의 5가지 값 중 하나를 가진다. 

* 0: uninitialized
* 1: loading
* 2: loaded
* 3: interactive
* 4: completed

따라서, readyState == 4 는 XMLHttpRequest 요청과 응답에 대한 처리가 완료되었음을 뜻한다.


결과 이용

앞의 코드에서 // do something with data 로 처리된 부분은 사실 XMLHttpRequest에 의해 반환된 결과를 이용해서 실제로 유용한 작업을 수행하는 부분이다. 가장 간단한 사용예는 다음과 같이 반환된 결과 문자열을 현재 페이지의 특정 위치에 삽입하는 형태가 될 것이다. 

document.getElementById("some_id").innerHTML = data;

위의 코드는 현재 페이지의 HTML 에서 id = "some_id" 속성을 가진 노드의 내부 HTML을 data 변수에 담긴 문자열로 치환한다. 치환된 결과는 자동적으로 즉시 사용자가 보는 페이지에 반영된다.

이와 같은 방식의 코드는 Ajax로 요청을 생성한 후, 그 결과값에 따라 사용자가 보는 페이지의 일부분 내용을 변경하는 작업에 유용하다. 예를 들면 사용자가 입력하는 값에 따라 제시되는 객관식 보기들을 변경할 수 있다. 마우스를 움직이는 좌표에 따라 특정 정보를 갱신하는 것도 가능하다. 대부분의 검색 사이트에서 널리 쓰이는 사용자의 검색어 타이핑에 따라 즉각적으로 자동완성을 제시해주는 기능도 위의 코드를 응용하면 구현할 수 있다.


다루지 않은 부분

지금까지 살펴본 코드 예제들은 그저 Ajax 코딩을 처음 하기 위한 직관을 제시하는 것일 뿐, 어디까지나 빙산의 일각에 지나지 않는다. 위의 코드에서 제시된 방법 외에 다음과 같은 속성들도 존재한다.

  • responseXML : responseText와는 달리 서버로부터의 응답을 XML 트리로 파싱하여 전달한다. DOM 라이브러리를 이용하여 탐색할 수 있다.
  • innerText, outerText, outerHTML : innerHTML 외에 사용이 가능한 다른 속성들이다. 단, 널리 지원되는 innerHTML과는 달리 지원되지 않는 브라우저가 있을 수 있으니 innerHTML의 사용을 권장한다.

Ajax 관련 주의 사항

이 섹션에서는 Ajax를 적용하는데에 있어 고려해야 하는 기술 외적인 부분을 소개한다.


개발 주의 사항

Ajax 요청이 진행중이라는 사실의 암시

  • 많은 사용자들은 고전적인 request-response 기반의 웹 인터페이스에 익숙해있다. 그들이 웹페이지의 UI를 다루고 있을때 - 예를 들면, form에 무언가를 타이핑한다던가, 마우스를 움직이거나 임의의 개체 위에 hovering한다던가 등 - 서버측으로 통신이 일어날 수 있다는 사실을 거의 알지 못할 것이다.
  • 사용자가 어떤 행동을 할때 그에 대한 피드백을 Ajax 기법으로 전달하려 한다면 항상 이와 같은 사용자들의 관습을 염두에 두어야 한다. 예를 들어 사용자의 주소를 입력받는 UI가 있다고 해보자. '시'를 입력하는 필드에 '서울'을 입력한 사용자가 그 다음의 '구'를 입력하는 필드에 타이핑 실수로 '영등호구'를 넣었다고 해보자. 이러한 명백한 주소 입력 오류를 Ajax 방식으로 경고해주도록 UI를 개발하였다고 해보자. 즉, 매 주소 필드가 입력될때마다 Ajax 요청을 일으켜서 그 유효성을 서버측에서 검사한 후 필요한 경우 사용자 UI의 해당 주소 필드 옆에 경고 문구를 삽입하는 것이다.
  • 여기까지는 좋다. 하지만 사용자의 타이핑이 매우 빠른 반면 네트웍은 느린 편이라면? Ajax 요청이 완성되어 경고 문구가 삽입되기 전에 그는 이미 모든 주소 필드를 입력해버렸을지도 모른다. 페이지가 길다면 이미 아래로 스크롤해버려서 경고 문구를 눈치채지 못할 수도 있다.
  • 따라서 Ajax 요청을 발생시킬 때에는 (필요에 따라) 사용자에게 "현재 무언가 통신이 진행중이고 그 피드백을 기다려보시라"는 암시를 보여줄 필요가 있다. Gmail을 사용해보았다면 화면의 구석에 작은 텍스트로 현재 무언가 작업이 진행중이라는 메세지를 본 적이 있을 것이다.

Ajax 요청으로 일어난 변화에 사용자의 주의 유도

  • Ajax 요청의 결과로 현재 웹페이지의 DOM에 변화를 일으켰다고 해보자. 이 변화는 사용자가 보고있는 웹페이지의 모습에 반영될 것이다. 하지만 고전적인 방식의 웹페이지 UI에 익숙해져있는 사용자들은 페이지 상에서 뭔가 변화가 일어났다는 사실을 쉽게 눈치채지 못할 수 있다. (그동안의 오랜 습관으로 인해 대부분의 사용자들은 그들이 뭔가 클릭을 하거나 엔터키를 눌러야만 페이지가 바뀐다고 생각하기 쉽다. 더구나 이렇게 클릭을 하거나 엔터키를 누름으로써 발생하는 '페이지 새로고침'은 화면 전체가 지워졌다가 새로 뿌려지기 때문에, 사용자들은 자연스레 지금의 페이지에서 어떠한 변화가 생겼는지 주의깊게 살펴볼 것이다.)
  • 따라서 (필요에 따라) Ajax 요청의 결과로 발생한 시각적인 변화에 대해 의도적으로 사용자의 주의를 유도할 필요가 있다. 이와 관련하여 대표적인 테크닉으로 YFT (Yellow Fade Technique)가 있다. 이 테크닉을 요약하면 무언가 페이지상에 새로 추가되는 순간, 그 개체의 색을 노란색으로 만들었다가 서서히 본래의 색으로 되돌리는 테크닉이다. 사용자 입장에서는 별안간 색깔이 다른 물체가 등장한 셈이므로 주의를 기울이지 않을 수 없을 것이다.
  • 이러한 테크닉의 사용에서 미묘한 점은 사용자의 주의를 유도하되, 지나치게 산만하게 한다거나 거부감을 유도할 정도로 '오버'해서는 안된다는 것이다.

웹브라우저의 Back/Forward 버튼 문제

웹브라우저의 북마킹(bookmarking) 문제

원본 주소 ‘http://www.web2hub.com/wiki/index.php/Ajax’