새로이 부상하고 있는 에이잭스(Ajax: Asynchronous JavaScript and XML) 표준은 풀 페이지를 갱신할 필요없이 동적으로 콘텐츠를 업데이팅함으로써 쌍방향 웹 페이지를 보다 반응성이 뛰어나게 보이도록 해준다. 에이잭스의 안과 밖, 그리고 어디서 구할 수 있고 언제 사용해야 하는지, 혹은 사용하지 말아야 하는지를 소개한다.

동적 콘텐츠가 있는 쌍방향 웹 사이트는 어떤 조직에서든 필수 품목이다. 하지만 단지 몇 개의 동적 콘텐츠 조각을 업데이트하기 위해 전체 페이지를 갱신해야 한다면 쌍방향 페이지는 반응성이 떨어져 보일 수 있다. 정적 조각들을 다시 띄울 필요 없이 동적 콘텐츠를 업데이트할 수 있는 방법은 없을까?
에이잭스(Ajax: Asynchronous JavaScript and XML)의 세계로 들어가 보자. 이것은 풀페이지 갱신을 피할 수 있게 해주는 메커니즘이다. 에이잭스는 뉴스나 주가 같은 동적 콘텐츠만 업데이트함으로써 웹 사이트가 보다 인터랙티브하게 보이게 해준다. 에이잭스가 있으면 로딩속도가 빨라 페이지 전환이 신속하게 이뤄진다. 이 기술은 구글 맵(Google Map)과 기타 유명 웹 사이트에서 적용되고 있다. 구글 맵을 클릭 앤 드래그할 때 문서 요청이 트리거링 되는데, 이것은 맵을 업데이트하지만 페이지의 정적 요소들은 갱신하지 않는다.
한편, 마이크로소프트 핫메일과 기타 사이트는 에이잭스로부터 혜택을 받을 수 있을 것이다. 예를 들어 핫메일을 읽으면 메시지 읽음 아이콘을 업데이트하기 위해 전체 페이지가 재로딩된다. 만약 핫메일이 아이잭스를 사용했다면 아웃룩과 더 비슷해 보일 것이며, 이것이 바로 포인트다. 즉 웹 사이트를 데스크톱 애플리케이션과 더 비슷해 보이게 만드는 것이다.

여러 기술들의 조합
에이잭스는 단일 기술이 아니라 기술들의 조합이라고 보아야 한다. 이것은 비동기적으로, 다중 요청이 병렬적으로 발생할 수 있다. XML은 응답의 데이터 유형을 참고로 하지만, 응답 데이터는 XML 포맷일 필요가 없다. 자바스크립트는 컴포넌트를 함께 묶어 준다. 페이지 요청은 초기화되며, 응답은 자바스크립트로 처리된다.
에이잭스의 중심은 XMLHTTPRequest 자바스크립트 객체로, 이것은 문서 요청을 HTTP 서버로 전송하고, 응답을 받는다. 자바스크립트는 응답의 내용을 파싱하고 이에 따라 웹 페이지를 업데이트한다. 에이잭스는 클라이언트 측 기술로서 웹 서버가 아니라 클라이언트 웹 브라우저에서 거주하고 초기화된다. 모든 주요 브라우저는 네이티브 자바스크립트 객체나 ActiveX 객체를 통해 XML HTTPRequest 객체를 지원하기 때문에, 에이잭스는 쉽게 사용 가능해진다. 네이티브 이행과 ActiveX 이행에서의 주된 차이점은 객체 생성에 있다.
대부분의 브라우저들은 또한 W3C(World Wide Web Consortium)의 표준 API를 지원하는데, 이것은 XMLH TTPRequest 객체를 기반으로 한다. 하지만 문제는 기존의 W3C API 이행이 100% 서로 호환되지 않는다는 것이며, 따라서 W3C API를 사용한다고 해서 모든 브라우저에서 작동된다는 보장은 없다. XMLHTTPRequest 객체는 브라우저들간에 동일하지만 기능적으로 약간의 차이가 있는데, 이는 나중에 거론하기로 하자.
탑 레벨에서 보면 에이잭스는 브라우저로부터 오는 정상적인 HTTP 요청처럼 보인다. 하지만 행동은 화면 뒤에서 이뤄진다. 우선 첫 페이지 로드가 있고, 이것이 페이지의 콘텐츠를 전송하며, 여기에는 웹 서버에서 브라우저로의 에이잭스 컴포넌트가 포함된다. 에이잭스 지원 페이지에는, XMLHTTPRequest 객체를 이용해 HTTP 요청을 초기화함으로써 버튼 클릭에 응답하는 HTML 컴포넌트가 있다. 그 결과물은 DOM(Document Object Model)이 허용하는 페이지의 어떤 면이든 변경하는 데 사용될 수 있으며, 변화는 클라이언트 측에서 발생한다.

자동 현황 보고
XMLHTTPRequest 객체가 하는 일은 브라우저처럼 get이나 post(혹은 put) 요청을 웹 서버로 전송하는 것이다. 하지만 XMLHTTPRequest 객체에서 오는 요청은 그 수가 얼마나 되든 동시에 발생할 수 있다. 왜냐하면 XMLHTTPRequest 객체의 결과는 브라우저에 의해 직접 처리되지 않기 때문에, 페이지는 자동으로 변경, 혹은 갱신되지 않는다. 자바스크립트는 요청의 결과로 페이지에 생기는 어떤 변화든 처리해 준다.
질의 문자열이나 포스트 데이터가 요청에 추가될 수 있으며, 요청은 ASP나 PHP 페이지, 혹은 다른 여느 서버 측 스크립트 페이지로 처리될 수 있다. 버튼이 양식을 제출하게(그래서 페이지 갱신을 요구하게) 하는 대신 온클릭(onClick) 이벤트가 자바스크립트 메쏘드를 요청할 수 있으며, 이는 XMLHTTPRequest 객체를 통해 포스트 요청을 초기화한다. 서버측 스크립트는 요청을 처리하고 XML 포매팅된 응답을 보내 준다.
당신의 웹 사이트가 시간마다 매출 현황을 보고 일일 뉴스를 본다고 가정한다. 이전 시간의 매출 수치는 정적인 것이지만, 현재 시간의 수치는 매 5분마다 업데이트된다. 가장 마지막 수치를 얻기 위해서는 사용자가 브라우저의 새로고침 버튼을 눌러야 한다. 이 갱신은 페이지의 대부분이 바뀌지 않음에도 불구하고 몇 초가 걸릴 것이다. 에이잭스가 있으면 예를 들어 문서 요청을 5분 타이머에 맞춰 둘 수 있으며, 서버 측 스크립트 페이지가 현재 시간의 매출 수치를 다시 계산해 줄 것이다. 이 시간의 데이터만이 브라우저로 돌아가기 때문에 사용자는 업데이트를 위해 ‘새로고침’을 누를 필요가 없으며, 웹 서버는 같은 수치를 반복해서 계산하느라 수고할 필요가 없게 된다. 업데이트되는 유일한 한 가지는 현재 시간의 매출 수치뿐이다.

툴 타임
어느 회사에서나 에이잭스를 바로 사용하기 시작할 수 있다. 에이잭스 웹 사이트를 개발하는 데 필요한 모든 것이 오늘날의 브라우저에 포함돼 있기 때문이다. 또한 BEA의 아쿠아로직 유저 인터랙션(AquaLogic User Interaction)과 같이 웹 사이트 개발에 에이잭스를 사용하기 위한 수많은 프레임워크들이 나와 있다.
아쿠아로직 유저 인터랙션에는 개발자 툴세트가 포함돼 있는데, BEA에서는 스크립팅 프레임워크라고 부르고 있는 것으로서 에이잭스 기반 애플리케이션 구축을 단순화해 주는 API 세트다. BEA의 툴은 웹 페이지를 ‘포틀릿(portlets)’으로 분할하며, 여기서 이들 각각의 포틀릿에는 독립적인 기능이 있고 서로 다른 백엔드 시스템에 연결될 수 있다. 즉 하나의 포틀릿은 CRM 시스템으로 가고, 다른 포틀릿은 CRM 시스템에서 선택된 계정과 연관된 문서를 이용해 갱신될 수 있다.
BEA는 또한 문서 공유 애플리케이션인 아쿠아로직 인터랙션 컬래버레이션(AquaLogic Interaction Collabo ration) 소프트웨어 같은 많은 웹 애플리케이션에서 에이잭스를 사용하고 있다. 이것은 왼쪽 페인(pane)과 폴더가 있는 아웃룩 형태의 모델로 꾸며져 있다. 왼쪽 페인에 있는 아이템을 클릭하면 오른쪽 페인만 갱신이 되고 오른쪽 클릭 메뉴도 또한 뜨는데, 이것은 에이잭스를 이용해 데스크탑 같은 행동을 하는 애플리케이션을 만들 수 있다는 것을 보여주는 또 다른 예다.
오라클은 에이잭스가 이름이 생기기도 이전인 1998년부터 에이잭스 프레임워크를 개발해 왔다. 오라클의 푸전(Fusion) 미들웨어 툴은 오라클 ADF 페이스(FAces)라는 풍부한 에이잭스 지원 위제트 세트를 사용하는데, 여기에는 스플리터, 슬라이더, 동적 그래프 및 막대도표 등이 포함돼 있다. 오픈 소스 소프트웨어를 이용하고 싶다면 서로 조화를 이루어 쌍방향 웹 사이트를 만들 수 있는 강력한 에이잭스 API를 만들어 주는 자바스크립트, HTML 및 CSS 파일이 포함된 DOJO 같은 툴이 있다.
XMLHTTPRequest 객체만큼 되는 유연성과 능력을 가진 기술은 몇 되지 않지만 적어도 한 가지 언급할 만한 것은 있는데, 바로 W3C의 HTML 아이프레임(iframe)으로, 모든 주요 브라우저들이 이것을 지원하고 있다. HTML 아이프레임은 하나의 페이지에서 여러 페이지를 보여주기 때문에, 아이프레임간에 기능성이 분할될 수 있다. 예를 들어 일정하게 업데이트되는 HTML 테이블은 그 자체의 아이프레임 안에 놓일 수 있기 때문에, 테이블이 업데이트되면 갱신되지만 나머지 페이지는 그렇지가 않다.
실제로 아이프레임은 에이잭스가 하는 것과 같은 일을 하는 데 효과적으로 사용될 수 있다. 하지만 아이프레임이 에이잭스처럼 작동하게 만드는 일은 쉽지만은 않다. 에이잭스가 보통 더 나은 옵션으로 취급되는데, 그 이유는 이것이 재활용이 가능한 표준 자바스크립트 파일을 보다 쉽게 만들기 때문이다.

주의해야 할 점들
에이잭스를 사용할 때는 XMLHTTPRequest 객체가 서로 다른 브라우저에서 서로 다르게 행동한다는 사실을 알아야 한다. 의도하는 모든 브라우저와 플랫폼에서 에이잭스 웹 사이트를 테스트해 보아야만 한다. 한 가지 잠재적인 문제는 주어진 URL에 대한 HTTP get 요청이 언제나 같은 HTML 페이지를 돌려보낸다는 것이다. 따라서 get 응답이 브라우저 캐시로부터가 아니라 http 서버로부터 오도록 하기 위해서는 다양한 http 헤더가 변경이 돼야만 한다(XMLHTTPRequest 객체의 setRequest Header 등의 기능을 통해).
그리고 에이잭스를 사용하면 HTML 페이지가 무거워진다는 사실을 명심해야 한다. 첫 페이지 로드는 서버와 클라이언트에게 더 많은 스트레스를 안겨줄 수 있기 때문에, 사이트의 모든 부문에 에이잭스를 사용하지 말 것이며, 특히 주어진 방문에서 약간의 기능성만 사용되는 곳이라면 더욱 주의해야 한다.
또한, IE에서의 마이크로소프트 XMLHTTPRequest 객체 이행은 ActiveX 객체며, 많은 기업들이 보안을 이유로 ActiveX의 기능을 정지시키고 있다는 것도 유념해야 한다.