AJAX 개발자용 자료(1) – 소개

2005년 한해 WEB2.0과 함께 많은 관심을 받은 AJAX, 이미 많이 알려지고 여러 사이트에서 사용되고 있지만 아직도 생소한 분들을 위해 지금까지 현황과 이슈들을 정리해 보았다.

AJAX는 `Asynchronous JavaScript And XML`의 머리글자를 딴 신조어로 XMLHttpRequest 객체를 사용해서 비동기적 통신을 하고 XML로 응답을 받는 기술을 뜻한다. 또한 광의적 의미로 DHTML, CSS, DOM, javascript 등의 기술을 사용해서 동적인 페이지를 구성하는 기술 또한 포함하고 있다. XMLHttpRequest 객체는 IE5.0에서 처음 지원하기 시작했고 현재 파이어폭스, 오페라 등 대부분의 브라우져에서 지원하고 있다. 지금까지 설명에서 알 수 있듯이 AJAX는 어떤 새로운 기술이라기 보다는 기존 기술의 집합체라 할 수 있으며 기존과 다른 새로운 웹 UI 개발을 가능하게 해주는 WEB2.0의 구현 도구라 할 수 있다.

AJAX의 기본은 javascript에서 XMLHttpRequest를 사용해 서버에 요청을 하고 비동기적으로 응답을 받는 것이다. 소스를 보면 쉽게 이해할 수 있을 것이다.

function getXmlHttpRequest() {
 if(window.XMLHttpRequest) {
  return new XMLHttpRequest();
 } else {
  // IE에서는 XMLHttpdRequest 객체를 ActiveXObject로 취급한다.
  return new ActiveXObject("Microsoft.XMLHTTP");
 }
}

// XMLHttpRequest 객체 생성
var xmlhttp = getXmlHttpRequest();

// 1번째 인자 : http 통신 방식
// 2번째 인자 : 요청할 URL
// 3번째 인자 : 비동기 통신 여부 설정
xmlhttp.open("GET", "ajax_test.jsp", true);

// XMLHttpRequest 통신의 이벤트 리스너를 등록한다.
xmlhttp.onreadystatechange = function() {
 // 통신이 완료된 상태
 if(xmlhttp.readyState == 4) {
  if(xmlhttp.status == 200) {
   // 응답을 문자열로 받을 수 있다.
   alert(xmlhttp.responseText);
  }
 }
}

xmlhttp.send(null);

1. 왜 AJAX를 사용해야 하는가? AJAX가 크게 인기몰이를 한 이유는 AJAX가 Google에서 다양하게 쓰이면서 그 활용성이 인정받았기 때문이다. 마치 데스크탑 App와 같은 사용성을 보여준 Google Map, Google Suggest, Gmail 등은 AJAX가 이상적으로 쓰인 경우라 할 수 있다. 그렇다면 AJAX를 사용할 때 얻을 수 있는 이점에은 어떤것이 있을까?

1) 웹페이지 속도 향상 : http 통신은 서버에 요청 후 전체페이지를 다시 받아야 한다. 하지만 AJAX를 사용할 경우 비동기적으로 서버에 변경사항을 알린 후 변경된 부분만 javascript를 사용해서 반영할 수 있다. 또는 전체 리스트 자료를 화면에 보여준 후 세부정보는 개별적으로 서버에 요청해서 사용자에게 보여줄 수 있다. 결과적으로 페이지 로딩속도를 빠르게 할 수 있고 불필요한 페이지 리로드와 트래픽을 줄일 수 있다.

2) 사용자 UI 개선 : 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다. 쇼핑몰에서는 Drag&Drop 방식으로 장바구니에 상품을 담을 수 있고, 이미 Writely 와 같은 Web Word Processor도 등장했다. 기술과 친화적인 상상력 풍부한 기획이 뒷받침 된다면 아직 아무도 경험해 보지 못한 새로운 웹이 탄생할 가능성이 열려있다.

(사실 기존에도 hidden frame이나 Java Applet, Active-X, Flash 등을 사용해서 이런 작업이 가능했다. 하지만 AJAX는 추가 설치가 없고 개발이 쉬우며 다양한 브라우져를 지원해주는 장점이 있다.)

2. AJAX를 사용할 때 주의할 점 : 그렇다면 AJAX를 사용하는 것이 항상 정답일까? 기술력을 자랑하기 위해 AJAX를 사용하던 시대는 지났고 이제는 꼭 필요한 곳에 여러 문제점에 주의하면서 AJAX를 사용할 때가 되었다.

1) 뒤로가기 버튼 사용의 어려움 : AJAX는 javascript를 사용해서 동작하기 때문에 페이지 단위의 브라우져에서 사용자 경험과 다르게 작동하는 경우가 있다. 특히 뒤로가기 버튼이 무용지물이 되기 때문에 AJAX를 유해한 기술로 매도하기도 한다. (뒤로가기 버튼은 웹서핑을 할 때 클릭 다음으로 많이 쓰이는 기능이다.) 하지만 이미 iframe을 사용한 해결책이 제시되어 있다. 또한 AJAX를 활용한 서비스 사용 경험이 증대될 수록 이런 문제는 줄어들 것으로 보인다.

2) 진행상황 파악의 어려움 : XMLHttpRequest를 통해 통신을 하는 경우 웹페이지 로딩과는 달리 사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다. 이 경우 사용자 요청이 처리중에 있다는 표시를 화면에 보여 주도록 권고되고 있다. 예를 들어 Gmail에서는 중간중간 `loading` 이라는 상태표시를 통해 사용자의 요청이 처리중임을 알려준다. 이러한 상태는 XMLHttpRequest.readyState의 상태를 통해 판단할 수 있다. 또한 이때 사용할 수 있는 공개된 이미지도 제공되고 있다.

참고 : XMLHttpRequest.readyState 상태 정보
0 : UNINITIALIZED (open() 호출전)
1 : LOADING (send() 호출전)
2 : LOADED (HTTP 요청후 응답을 받은 상태)
3 : INTERACTIVE (응답을 받고 있는 중간 상태)
4 : COMPLETED (모든 요청 응답 완료)

이 외에도 개발툴의 부재, javascript diabled 인 경우 사용 불가능, XMLHttpRequest의 캐시 문제 등이 있지만 이미 많은 공개 라이브러리가 제공되고 있고 여러 개발자의 고민으로 해결방법들이 제시되고 있다.

참고 : AJAX 관련 소식