AJAX는 전혀 새로운 기술이 아닌 지금까지 웹에서 널리 쓰여 왔던 자바스크립트, DHTML 등의 기존 기술들을 모아 풍부한 유저 인터페이스를 구현할 수 있도록 정립한 기술 집합체이다.
HTTP는 네트워크에서 발생하는 모든 웹 요청과 응답을 처리할 수 있는 웹 표준 프로토콜로 완전히 자리 잡았다.
하지만 HTTP는 비연결성 프로토콜로 기본적으로 요청과 요청 사이에 연관성이 없고 웹 서버에 보낸 요청에 대한 응답에 대해서 각각의 웹 문서를 매번 다시 렌더링하여 리프레시해야 하는 단점이 있다.
로딩이 끝나 렌더링이 끝난 웹 페이지를 DHTML을 이용하여 동적으로 레이아웃이나 스타일을 재구성할 수도 있지만 재구성에 필요한 데이터는 사용자의 입력 또는 페이지를 로딩할 당시 서버에서 모든 데이터를 미리 읽어와야만 한다.
하지만 사용자가 어떤 데이터를 입력할지 모르는 상황이고 그렇다고 해서 모든 경우의 수에 해당하는 데이터를 브라우저로 로딩시킬 수도 없다.
결국 웹 애플리케이션이 클라이언트와 상호작용하기 위해서는 웹 서버와의 통신이 불가피하고 웹 서버와의 통신은 매번 웹 페이지가 새롭게 리프레시된다는 것을 의미한다.
클라이언트와의 상호작용 하나 하나에 대해 웹 페이지가 매번 리프레시된다는 것은 응답성(responsiveness), 사용성(usability)의 저하를 의미한다. 웹 애플리케이션 개발자의 입장에서는 로컬PC에서 작동하는 데스크탑 애플리케이션의 빠른 응답성과 편리한 사용성이 부럽지 않을 수가 없다.
이러한 핸디캡을 극복하기 위해 이미 웹에서는 액티브X, 자바 애플릿, 플래시 등의 기술이 사용되고 있다. 이들 기술들은 간단한 브라우저 플러그인으로 작동하며 HTML만으로는 구현할 수 없는 인터랙티브한 웹 페이지를 표현할 수 있도록 해주어 데스크탑 애플리케이션 못지않은 사용성과 응답성을 보여준다.
최근 들어 이러한 플러그인들의 도움없이 브라우저 자체만 가지고 인터랙티브하고 응답성, 사용성을 높일 수 있는 AJAX(Asynchro nous Javascript + XML)가 주목을 받고 있다
이미 AJAX는 구글 맵(http://maps.google.com), Orkut(http://www.orkut.com),
Google Suggest(http://www.google.com/webhp?complete =1&hl=en),
Gmail(http://www.gmail.com), A9(http:// a9.com), Flickr(http://www.flickr.com) 등
에서 선보인 바 있으며 AJAX를 사용하고 있는 웹 사이트가 늘어나고 있는 추세이다.
AJAX를 사용하는 가장 큰 이유는 웹에서 액티브X, 플래시 또는 자바 애플릿 등에 의존했던 사용성, 접근성, 응답성의 향상이다. 네트워크 인프라가 발전하여 네트워크 속도가 아무리 발라진다고 하더라도 새로운 컨텐츠를 보여주기 위해서 웹 페이지 전체가 매번 리로딩되는 것은 사용성, 응답성의 한계로 이어질 수밖에 없다.
AJAX의 초점은 앞에서 안급한 기존 웹 어플리케이션의 비효율성, 동기적인 액선의 단점을 해결할 수 있는 웹 페이지의 부분적인 변화, 적용과 비동기성에 있다.
하지만 굳이 AJAX만이 대안은 아니다. 액티브X, 자바 애플릿, 플래시 등이 그 대안이 될 수 있다.
하지만 그러한 기술들 대신에 AJAX가 가질 수 있는 경쟁력을 얘기하자면 플러그인을 사용하지 않고 브라우저만으로 바로 이용할 수 있다는 것과 새로운 것을 배우지 않고 DHTML, 자바스크립트, CSS등의 기존 웹 기술들을 그대로 이용할 수 있다는 것이다. 이러한 장점들은 지금도 널리 사용되고 있는 액티브X, 자바 애플릿, 플래시 등의 기술에 대한 대안으로 AJAX에 관심을 가져볼만한 충분한 이유를 준다.
XMLHttpRequest
XMLHttpRequest는 웹 서버와 통신하기 위한 AJAX의 핵심 컴포넌트이다.
이미 IE에서는 5.0에서부터 액트브X 오브젝트 형태로 제공되고 있고 그 이외의 브라우저에서는 XMLHttpRequest라는 윈도우 객체에 속해 있는 객체의 형태로 제공된다. AJAX를 이용하여 스크립트를 작성할 때 가장 큰 차이를 보이는 부분이 XMLHttpRequest 객체를 가져오는 부분인데, 브라우저에 따라 차이를 보인다.
최근에 발표된 오페라 8.0에서 Gmail을 지원한다고 프로모션 하고 있는데, 이는 Gmail에서 AJAX를 사용할 수 있도록 XMLHttpRequest를 지원하기 시작했다는 의미이다.
AJAX에 있어서 가장 매력적인 부분은 비동기성이다. XMLHttpRequest는 동기적, 비동기적 등 두가지 방법으로 이용할 수 있는데, AJAX에서는 비동기적인 방법을 주로 이용하게 된다. 비동기 모드로 XMLHttpRequest를 사용할 경우 send()가 호출된 후 웹 서버로부터 응답이 오기를 기다리며 브라우저가 멈춰있지 않고 웹 서버로부터 결과를 모두 받아낸 이후 콜백 핸들러에 정의된 코드가 실행되기 때문에 사용자는 계속 브라우저를 이용할 수 있게 된다.
XMLHttpRequest에서의 보안은 자바 애플릿이나 자바스크립트에서 흔히 사용하는 HTML 문서의 도메인(domain)을 이용한 보안 방법과 같다. 즉 XMLHttpRequest가 작동하는 HTML문서는 해당 문서의 document object의 도메인 프로퍼티와 같은 도메인의 서버에만 요청을 보낼 수 있다.
DOM
웹 페이지를 동적으로 재구성하기 위해서 빼놓을 수 없는 것이 DOM(Document Object Model)이다.
DOM은 일반적인 문서 구조를 플랫폼·언어 독립적으로 접근할 수 있는 인터페이스를 제공하는데, XML 문서를 구조적으로 분석하기 위해서 주로 사용된다. 거의 모든 브라우저가 DOM을 지원하기 때문에 HTML의 각 요소를 DOM인터페이스를 이용하여 접근할 수 있고 변경할 수 있다. HTML 태그로 표현되는 각 요소들, 즉 DOM 객체들을 변경할 수 있다는 얘기와 같다. 때문에 DOM은 DHTML에서 빼놓을 수 없는 요소이고 AJAX에서 서버와 통신한 결과를 반영하기 위해 필요하다.
DHTML
AJAX에서 서버와 통신한 결과를 화면에 다이나믹하게 적용하기 위해서 여러 가지 방법이 사용된다.
그 중 전통적이고 쉽게 이용할 수 있는 방법이 DHTML을 이용하는 방법이다. DHTML은 CSS, 자바스크립트, DOM 등을 이용해 HTML 문서의 레이아웃, 스타일, 컨텐츠를 바꿀 수 있는 기술이므로 AJAX를 이용해서 얻어낸 새로운 결과를 HTML문서에 적용시키지 알맞다.