AJAX 실전 #1 - XMLHttpRequest

AJAX가 무엇인지는 검색을 통해 쉽게 찾을 수 있으니 생략하기로 한다.
다만 한가지 당부의 말을 하고 싶어 몇자 적는다.

당신이 AJAX에 대하여 무엇을 상상했건 당신이 상상한 그 이상도 그 이하도 아닐것이다.
AJAX는 혜성처럼 등장한 새로운 언어도 아니고 무언가 획기적인 방법으로 화려한 어플리케이션을 개발하게 해주는 기술도 아니다.

꼭 위의 말을 기억하길 바란다.
기대가 크면 실망도 크니까....

내가 이 포스팅을 하게 된 이유는 아직 AJAX를 잘 모르는 친구놈에게 AJAX를 가르치기 위함이다.
때문에 글 내용은 차분하면서도 세세하게 예제를 통해 AJAX에 대해 설명할 것이다.


준비

앞으로 AJAX를 설명하면서 만들 어볼 예제는 주소록이다.

본 내용과는 관련이 없지만 혹시 Ruby on Rails 를 모르지만 해보고 싶은 분은 여기를 클릭해서 주소록 예제를 해보시길 :)

주소록의 구조는 간단하다.
빈 주소록에 새 레코드를 작성하고 작성된 레코드를 수정하거나 삭제하는 기능이 전부다.
물론 이 모든 작업은 AJAX를 사용하여 페이지 이동 없이 하나의 열려진 페이지 내에서 이루어질것이다.

그럼 본격적으로 시작....



시작

우선 AJAX의 핵심(나는 이것이 핵심이라고 생각한다.)인 XMLHttpRequest 객체에 대해 알아보자.


XMLHttpRequest

property:

onreadystatechange	Sets or retrieves the event handler for asynchronous requests.
readyState	Retrieves the current state of the request operation.
responseBody	Retrieves the response body as an array of unsigned bytes.
responseText	Retrieves the response body as a string.
responseXML	Retrieves the response body as an XML Document Object Model (DOM) object.
status	Retrieves the HTTP status code of the request.
statusText	Retrieves the friendly HTTP status of the request.

method:

abort	Cancels the current HTTP request.
getAllResponseHeaders	Returns the complete list of response headers.
getResponseHeader	Returns the specified response header.
open	Assigns method, destination URL, and other optional attributes of a pending request.
send	Sends an HTTP request to the server and receives a response.
setRequestHeader	Adds custom HTTP headers to the request.

각각의 속성과 메서드들은 MSDN에서 자세하게 설명하고 있다.

XMLHttpRequest 객체는 브라우져마다 생성방법이 조금씩 다르다.

IE 6이하의 버전에서는 다음과 같다.

new ActiveXObject('Msxml2.XMLHTTP')
new ActiveXObject('Microsoft.XMLHTTP')


IE 7부터 XMLHttpRequest을 지원하며 파이어폭스,사파리등에서는 이미 지원하고 있다.
따라서 이들의 브라우져에서의 생성 방법은 다음과 같다.

  new XMLHttpRequest();


이걸 한데 묶어보면 다음과 같다.

var request = false;

try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}

XMLHttpRequst 객체가 만들어졌다.
서버와 클라이언트가 데이터를 주고 받을 수 있는 길이 열린것이다.
앞으로 저 길 위에서 주소록에 사용될 데이터들이 왔다리 갔다리 할 것이다.
이번 순서는 길을 연것으로 만족하자.
그리고 XMLHttpRequest 객체의 속성과 메서드들을 꼼꼼히 살펴보기 바란다.
인터넷에서 흔하게 찾을 수 있는 누군가에의해 만들어진 함수를 쓰는 것도 나쁘지는 않으나 적어도 XMLHttpRequest 객체의 각 속성과 메서드의 역할은 제대로 알고 있어야 할 것이다.

다음 순서에서는 주소록을 위한 서버 프로그램(PHP)과 클라이언트 프로그램(HTML)을 만들어 볼 것이다.