Ajax 마스터하기

저자 : 이선민, Technical Consultant, IBM Innovation Center (IIC), IBM Korea. 2006년 9월 4일

지난 한 해 미국을 중심으로 인터넷 업계를 뜨겁게 달군 키워드 중 하나는 '웹2.0' 이었으며, Google의 Gmail과 Maps 그리고 사진공유 사이트인 Flickr 등을 통해 국내 에서도 이에 관한 관심이 매우 높아졌습니다. '웹2.0 컨퍼런스'를 기획한 ‘오라일리(O’Reilly)’사의 팀 오라일리 회장은 “웹2.0 시대로의 전환은 ‘웹의 플랫폼화(The Web as platform)’에 있다”라고 언급했으며, 여기서의 플랫폼은 MS의 Windows 와 같은 운영체제를 말합니다. 즉 지금까지는 윈도우즈를 부팅시킨 후 할 수 있었던 워드나 엑셀 작업등을 이제는 운영체제에 구애됨이 없이 웹브라우저를 통해서도 할 수 있다는 것입니다.

Ajax가 주목받는 이유는 이러한 웹2.0 시대를 연 많은 사이트 들이 Ajax 기술을 활용하고 있기 때문입니다.

Ajax(Asynchronous Java Script and XML)는 클라이언트 측 스크립팅을 사용하는 웹 애플리케이션 개발 방식으로서 http를 통해 xml 데이터를 웹 서버와 교환합니다. 따라서 웹 페이지는 동적으로 업데이트 될 수 있습니다. 전체 페이지를 리프레시 하여 응답성이 떨어지게 하지도 않습니다. Ajax를 사용하여 보다 풍부하고 동적인 웹 애플리케이션 사용자 인터페이스를 만들 수 있습니다. Ajax는 기술이 아니며, 오히려 여러가지 기술이 복합된 방법론 또는 패턴에 더 가깝습니다.

본 특집은 Ajax에서 사용되고 있는 XMLHttpRequest를 이용한 비동기 자료검색, DOM을 이용한 상호작용, 모든 것을 결합시켜 정리해 주는 자바스크립트 등에 관하여 자세하게 예를 들어 설명하고 있습니다.

이 시리즈는 모두 5회로 나누어 설명합니다.

• Part 1: Ajax 소개
  
  Ajax 애플리케이션에 관한 서론 및 이 애플리케이션에 필요한 몇 가지 기본개념들을 설명합니다.
  
  
  
• Part 2: JavaScript와 Ajax를 이용한 비동기식 요청
  
  XMLHttpRequest 객체에 대해 구체적으로 소개합니다. 이 객체는 서버측 애플리케이션이나 스크립트에 대한 요청을 핸들하고, 서버측 컴포넌트에서 리턴 데이터를 처리하는 Ajax 애플리케이션의 핵심 입니다. 모든 Ajax 애플리케이션은 XMLHttpRequest 객체를 사용하기 때문에 Ajax 애플리케이션의 작동은 여기에 얼마나 익숙해지냐에 달려있습니다.
  
  
  
• Part 3: Ajax의 고급 요청 및 응답
  
  지난 글에서 다루었던 기초를 넘어서 요청 객체의 세 가지 핵심 부분들-HTTP 준비 상태,HTTP 상태 코드, 요청 유형들-에 대해 자세히 설명합니다. 애플리케이션에 무언가 문제가 있을 때 준비 상태, HEAD 요청을 하는 방법, 또는 400 상태 코드가 의미하는 것이 무엇인지를 이해하면 간단한 디버깅으로 끝낼 수 있기 때문입니다.
  
  
  
• Part 4: 웹 응답에 DOM 활용하기
  
  웹 페이지를 정의하는 문서 객체 모델(Document Object Model)을 소개합니다.