AJAX의 기본 구성 요소

자바스크립트

자바스크립트는 애플리케이션 프로그램에 내장해서 사용하기 좋은 범용 스크립팅 언어입니다(이게 무슨말이야~ 그냥 스크립트 언어죠! 다들 잘 알고 계시죠?). 웹 브라우저에서 자바스크립트를 이용해서 웹페이지를 작성하면 브라우저가 제공하는 여러 기능(화면제어, 이벤트 제어등)들을 직접 제어할 수 있게 됩니다. AJAX 애플리케이션도 모두 자바스크립트로 작성하죠. Javascript는 AJAX에서 중추적인 역할을 담당합니다.

CSS(Cascading Style Sheet)

CSS는 여러분이 작성한 웹페이지의 내용(엘리먼트)을 어떻게 화면에 표시할지를 서술하는 방법입니다. 반면 HTML은 문서의 구조를 표현하는데 사용됩니다. 다시말하면, 웹페이지에서 문서의 구조(HTML)와 표시형식(CSS)을 분리할 수 있게 하는 역할을 하게됩니다. CSS를 활용하면 화면 표시 스타일을 재사용 가능하도록 모듈화할 수 있는데, 화면 표시 형식을 간단하면서도 강력한 방법으로 한꺼번에 조절할 수 있습니다.(불러다가 여기저기서 써먹기가 쉽다는 말입니다.) CSS는 직접해보시면 아~ 이런거구나하고 느낌이 확 오실겁니다. AJAX 애플리케이션은 흔히 CSS로 사용자 인터페이스의 스타일을 조절합니다.

DOM(Document Object Model)

DOM을 사용하면 웹 페이지의 상세한 모든 구조를 객체로 표현해 자바스크립트로 직접 프로그래밍 할 수 있습니다. 자바스크립트로 DOM을 제어하면 페이지를 새로 고침하는 대신 사용자 인터페이스를 동적으로 변경할 수 있습니다. 기존의 웹 애플리케이션은 필요할 때마다 주기적으로 페이지를 새로고침해서 해당 문서를 웹서버에서 전부 새로 다운로드했었고, 인터페이스를 변경하려면 웹서버에서 웹브라우저에게 새로운 HTML을 전송해야 했습니다. AJAX애플리케이션은 사용자 인터페이스를 변경하는 경우 대부분 DOM을 이용해서 웹서버를 통하지 않고 직접화면을 바꿉니다.

XMLHttpRequest

XMLHttpRequest를 사용하면 백그라운도로 웹 서버에 요청을 보내고 결과를 얻어올 수 있습니다. 대부분 데이터를 표현하는데 XML을 사용하지만 텍스트 기반이라면 어떤 형태의 데이터를 사용해도 아무 문제가 없습니다. 물론 XMLHttpRequest를 가장 일반적으로 사용하기는 하지만, 서버에서 데이터를 가져오는 데 사용할 수 있는 방법에는 이것 말고도 여러가지가 있습니다.

- 위에서 기술된 CSS, DOM, 자바스크립트 세 가지는 기존에도 다이나믹 HTML 줄여서 DHTML 이라는 이름으로 널리 사용되었습니다. DHTML을 사용하면 다양하고 재미있는 형태로 동적인 웹페이지를 구성할 수 있었지만, 필요한 경우 페이지 전체를 새로고침해야 한다는 단점을 극복하지느 못했습니다. AJAX를 활용할 때 DHTML의 역할이 막중한데, 단순히 기존의 DHTML에 비동기적으로 서버에서 데이터를 받아올 수 있는 방법만 추가해도 웹페이지를 새로고침하지 않고 처리할 수 있는 일들이 많아집니다. 웹브라우저의 사용자 인터페이스에서 사용자가 작업하는 동안 백그라운드로 웹서버와 통신할 수 있다는 장점 하나만으로도 AJAX는 최종적으로 훨씬 우수한 결과물을 만들 수 있게 해 줍니다.