한빛출판네트워크

제공: 한빛미디어 네트워크 기사
저자: 브루스 W. 페리 / 김명신 역
출처: [ Ajax Hacks: 읽고 이해하고 바로 쓴다 ] Chapter 1.

사람들이 인터넷을 월드 와이드 웨이트(world wide wait)라고 부르던 웹의 구석기 시대를 기억하실 것입니다. 그로부터 시간이 많이 흘렀지만 지금도 몇몇 애플리케이션은 그 시대로부터 그다지 많이 변하지 않았습니다. 여전히 폼 값을 채우고, 클릭하고, 웹 페이지가 사라지면 기다리고, 페이지 전체가 새로고침되고, 잘못 입력했으면 다시 고치고, 클릭하고, 기다리고, 기다리고... 우리는이러한 악순환에 아주 익숙합니다.

최근의 수많은 웹 사이트들(특히 최근에 개발된 훌륭한 기술들이 적용된 사이트들)은 이용자들의 요구를 더 빨리 처리하도록 바뀌고 있습니다. 기존에는 사용자가 클릭할 때마다 매번 페이지 전체가 사라지고, 서버 쪽 응답이 온전히 끝난 후에야 페이지가 다시 나타났습니다. 하지만 요즘 만들어지는 일부 새로운 애플리케이션들은 페이지 전체를 새로고침하지 않고 필요한 부분만 바로바로 고치는 형태로 동작해 빠른 처리속도를 보이고 있습니다.

예를 들어 여러분이 구글 맵을 사용해 봤다면 마치 자신의 컴퓨터에 모든 맵이 저장돼 있는 것처럼 작동하는 모습에 감명받았을 것입니다. 만약 이 지도가 드래그를 할 때마다 페이지가 사라진 다음 서버에서 응답이 온 후에야 전체 페이지가 나타난다면 누가 사용하려고 할까요. 이런 애플리케이션은 너무 굼떠서 아무도 쓰지 않을 것입니다. 그렇다면 이러한 요구를 만족시키는 마술같은 기술은 무엇일까요?

마루용 왁스가 아니다

널리 알려진 기술의 조합과 근사한 자바스크립트 툴이 스마트하고 강력한 웹 애플리케이션 모델의 기본이 됩니다. 많은 기술들이 조합됐지만 복잡한 이니셜로 불리지 않습니다. 단지 Ajax라고 불립니다. Ajax는 Asynchronous JavaScript and XML을 의미합니다.

Ajax는 마루용 왁스나 디저트용 토핑 재료, 또는 레몬향의 클리닝 제품이 아닙니다. Ajax는 이미 개발자나 디자이너들에게 친숙하고 다양한 표준 기술들의 조합입니다.

• 자바스크립트
웹 페이지에 동적 스크립팅을 가능하게 하는 프로그래밍 언어입니다. 자바스크립트는 웹 페이지에 삽입돼 여러 멋진 기능들을 구현합니다(이를‘클라이언트 사이드 스크립팅’이라고 부릅니다). 이 기술은 웹 자체만큼이나 오래된 기술입니다.

• XMLHttpRequest
API를 제공하는 자바스크립트 객체로서 서버와 HTTP 프로토콜로 통신(connect)할 수 있습니다. 대부분의 Ajax 마술은 이 객체로 이루어지며, 대부분의 웹 브라우저들(모질라 파이어폭스, 인터넷 익스플로러 6, 사파리 1.3, 2.0, 오페라 7.6)은 이 객체를 지원합니다. Ajax의 비동기(asynchronous)적 특성은 바로 이 객체의 특성 덕분입니다.

• XML(eXtensible Markup Language)
다른 언어(Language)를 정의하기 위해 고안된 언어입니다. XMLHttpRequest 객체는 서버로부터 받는 데이터의 형태로 일반 텍스트뿐만 아니라 표준 XML도 처리할 수 있습니다.

• HTML과 CSS(Cascading Style Sheets)
이용자가 보는 웹 페이지를 제어하는 언어입니다. 웹 개발자는 자바스크립트를 이용해 HTML 엘리먼트들과 CSS 스타일을 동적으로 변화시킬 수 있습니다.

• DOM(Document Object Model)
DOM은 XML 파일을 나타내는 모델이나 웹 페이지에서 동적으로 운용될 수 있는 객체들의 집합 모델입니다. 웹 페이지 뷰는 루트 노드, 부모, 자식 노드, 브랜치 등으로 이루어진 트리 구조를 이루고 있습니다. 각 HTML 엘리먼트들은 자바스크립트로 접근 가능한 노드(또는 브랜치)입니다. 앞으로 이 책에서는 정말 많은 DOM 프로그래밍 기법들을 보게 될 것입니다.

• XSLT(eXtensible Stylesheet Language and Transformation)
데이터를 수신하는 클라이언트 쪽에 XML 정보를 원하는대로 표시하기 위한 템플릿 기술입니다.

Ajax는 새로운 기술이 아니라 오래 전부터 있어 온 기술들입니다. 일례로, 마이크로소프트는 인터넷 익스플로러 5.0에서 이미 HTTP 요청을 할 수 있는 자바스크립트 객체(XMLHTTP 객체로 종종 불립니다)를 포함시켰습니다(이 글을 쓰는 시점에서 IE 버전은 6, 7 베타까지 나와 있습니다).

Ajax를 이용한 새로운 웹 애플리케이션들의 범람으로 이 기술을 사용하는 그룹은 새로운 웹 모델로 변형됐습니다. “Web 2.0”은 Ajax와 Rich Internet Application(애플리케이션의 대부분의 기능들이 클라이언트 사이드에서 수행되기 때문에 RIA라고 불립니다)을 아우르는 차세대 웹을 지칭하는 말로, 구글 맵이나 구글 메일, 협업 패키지인 짐브라(Zimbra), 개인화된 검색 엔진인 롤요(Rollyo, http://www.rollyo.com), 인터랙티브한 스위스 맵(http://map.search.ch/index.en.html) 등이 모두 Web 2.0 애플리케이션들입니다. Ajax 애플리케이션의 숫자는 빠르게 증가하고 있습니다. 그 일부를 다음의 위키피디아 페이지에서 찾을 수 있습니다.

http://en.wikipedia.org/wiki/List_of_websites_using_Ajax

적절히 사용함

물론 Ajax가 모든 곳에 적합한 건 아닙니다. 웹 페이지가 모두 다운로드된 다음에도 동적으로 페이지를 변경시킬 수 있는 Ajax 기술은 많은 사용자들에게 친숙한 즐겨찾기 기능에 방해가 될 수도 있습니다. 예를 들어 보고 있는 웹 페이지에서 동적으로 변경된 부분은 URL로 링크될 수 없습니다. 그러므로 동적으로 변경된 페이지에 대한 링크를 누군가에게 보내거나 저장해 둘 수 없습니다( “Ajax 애플리케이션에서 브라우저의 <뒤로> 버튼 고정하기”[Hack #68] , “RSH를 사용해 <즐겨찾기>와 <뒤로> 버튼 제어하기”[Hack #69]에서 이와 관련된 해결책을 제시합니다).

본 책에 기술된 수많은 Ajax 팁들은 친숙한 웹 폼(Form) 요소들인 select 리스트, textarea, text 필드, 라디오 버튼들의 동작과 이들 데이터를 전송하는 방법(백그라운드 전송)에 많은 변화를 가져다 줄 것입니다. 잊어서 안 될 것은 Ajax를 이용해 변화시킨 요소들의 동작이 유용해야 하며, 사용자들에게 혼란을 유발하거나 불편을 줘서는 안된다는 것입니다.

XMLHttpRequest

본 책의 많은 핵들의 중심에는 XMLHttpRequest 객체가 있습니다. 이 객체는 이미 언급한대로 사용자가 애플리케이션의 다른 부분들을 사용하는 동안 서버로부터 필요한 데이터를 가져올 수 있습니다. 이 객체는 API를 가지고 있는데, 우리는 이 장에서 이 API를 정리해 볼 것입니다.

“브라우저 호환성 식별하기”[Hack #1] 는 자바스크립트로 요청 객체를 세팅하는 것을 다룹니다. 일단 객체가 초기화되면, 이 객체는 여러분이 자신의 핵에서 사용할 수 있는 여러 속성과 메소드를 가지게 됩니다.

--------------------------------------------------------------------------------------
▒ 초보팁 ▒
일반적으로 객체에 속하는 함수를 메소드라고 부릅니다. XMLHttpRequest 객체의 메소드들에는
open( ), send( ), abort( ) 등이 있습니다.
--------------------------------------------------------------------------------------

다음에 나오는 XMLHttpRequest 객체의 속성(property)들은 대부분의 웹 브라우저(IE 5.0 이상, 사파리 1.3, 2.0, 넷스케이프 7, 오페라 7.6 이상 최신 버전)에서 지원됩니다. 모질라 파이어폭스에서는 기본적으로 아래의 속성들을 지원하면서*각주 다른 웹 브라우저에서 지원하지 않는 추가적인 속성과 메소드를 지원합니다.

onreadystatechange :
    이 속성에 정의되는 콜백 함수는 readyState가 변경될 때마다 호출됩니다.

readyState : 숫자
    0 : uninitialized(open( ) 메소드가 호출되지 않은 상태)
    1 : loading(send( ) 메소드가 호출되지 않은 상태)
    2 : loaded(send( ) 메소드가 호출된 상태. header와 status 사용 가능)
    3 : interactive(reponseText에 부분적인 데이터가 저장됨)
    4 : completed

responseText : 문자열
    반환된 일반 텍스트 문자열

responseXML : DOM 객체
    반환된 XML

status : 응답 상태 코드
    200(Okay), 404(Not Found) 등                                

statusText : 문자열
    HTTP 응답 상태를 나타내는 문자열

메소드는 다음을 지원합니다.

abort() : 반환 값 void
    HTTP 요청을 취소시킵니다.

getAllResponseHeaders() : 문자열 반환
    모든 헤더 정보를 반환합니다( “HTTP 응답 심화 학습하기”[Hack #9] 참조).

getResponseHeader(string header) : 문자열 반환
    특정 헤더 값을 반환합니다.

open(string method,string url,boolean asynch) : 반환 값 void
    HTTP 요청과 동기/비동기 통신에 따른 필요사항을 준비합니다.

send(string) : 반환 값 void
    HTTP 요청을 합니다.

setRequestHeader(string header,string value) : 반환 값 void
    요청 헤더를 설정합니다. 반드시 open( ) 메소드를 호출한 다음 사용합니다.