Ajax 마스터하기

출처 :http://www-128.ibm.com/developerworks/kr/series/web/

 

저자 : 이선민, 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)을 소개합니다.
  
  
  
• Part 5 : DOM 다루기
  
  이번 글에서는 돔을 보다 자세히 연구합니다. 웹 페이지에 대한 특정 모델은 그 페이지의DOM 트리라고 하는데, 이러한 돔 트리의 부분들을 생성, 제거, 변경하는 방법을 설명하고 그 다음 단계인 웹 페이지를 업데이트 하는 방법을 설명합니다. 여러분은 DOM을 통해서 사용자 인터페이스를 변경할 수 있고 인터랙팅 할 수 있습니다. 이것은 실로 엄청난 프로그래밍의 힘과 유연성을 제공해 주는데, 일단 DOM 트리로 작업하는 방법을 배우면 풍부하고 동적인 인터랙티브 웹 사이트를 마스터하는 단계로 넘어갈 수 있다.
  
  
  

이상에서 Ajax 애플리케이션에 필요한 기본개념들에 대해 살펴보았습니다. Ajax라는 용어는 새롭지만, 이를 구현하는 기술요소들은 전혀 새로운 것이 아닙니다. 하지만 이를 이용할 경우 사용자는 원하는 응답을 빠른 시간에 받을 수 있고 이에따라 서버의 부담이 줄어들며, 개발자는 페이지 화면구성을 다이나믹하게 할 수 있고, 플래시나 액티브엑스(ActiveX) 의존도를 상당부분 대체 할 수 있다는 장점이 있습니다. 이 시리즈 이외에도 한국 developerWorks 사이트에 Ajax 에 관련된 글들이 많이 번역되어 게시되고 있으며, developerWorks 사이트에는 최신 기술자료들이 올라와 있으니 즐겨찾아 주시기 바랍니다.
여러분에게 많은 도움이 되기를 바랍니다.

 

감사합니다.