|
Ajax 란? Asynchronous JavaScript-x and XML
의 약자로 하나의 기술을 얘기하는 게 아니라 어떤 기술의 모음을 통칭하는 말이다. 그게 어떤 기술인가 하면 원 제목
그대로 자바스크립트와 XML의 조합이다. 대문자 A와 소문자 jax 로 써야 한단다. 한국말론 아약스 혹은
아작스라고 읽는다. (축구 구단 중에 아약스란 스펠링도 같은 구단이 있단다. 같은 스펠링이니 아약스가 맞겠지만,
아작스라고 읽는 이들이 많아서 그렇게도 불리운다.)
뭐든 그 역사를 살펴보면 이해하기가 쉬울 때가 많다. 이 Ajax 기술이 나오기 전의 웹이 발전해온 형태를
살펴보자.
웹 1.0 시대
사실 이런 말은 없었지만 앞으로 만들어질 차세대 인터넷에 대비시켜 이렇게 부른다. 말인즉슨 최근에 이렇게
부르기로 했다는 거다. 이 시기는 하이퍼링크(줄여서 링크)의 모음과 단순 HTML 파일의 나열이었다. 달리
정적 HTML 이라고도 불린다. 서버에 문서를 올릴 수 있는 권한을 가진 이가(홈페이지를 운영하는 사람)
어떤 내용에 관한 글을 올려놓으면 다수의 사람들은 그걸 보고 다니는 거다.
정보를 제공하는 쪽과 정보를 받아들이는 쪽 사이에 어떠한 관계가 성립되기 힘들다. 상호 작용이 어렵다는
뜻이다. 잘못된 내용이 있어도 저자에게 알려주기 힘들고, HTML 을 잘 모르는 사람은 관리하기도 힘들었다.
웹 1.5 시대
이 역시도 그냥 부르는 말이다.
1.0 시대에서 나타난 단점, 상호작용이 어렵다는 점을 보완하기 위해 PHP, ASP 같은 웹용 스크립트
언어와 MySQL 같은 오픈소스 DB가 나타나서 웹 상에서 상호 작용을 원활하게 할 수 있는 시대이다.
게시판 시스템이 잘 만들어진 예다.
글을 올리고 거기에 대해 답글이나 댓글을 달 수 있다. 쓰는 사람은 글 내용에만 집중할 수 있고, 보는
사람은 클릭만 하면 된다. 만만세다.
그런데 여기서 단점이 하나 생겨난다. 상호작용을 할 수 있게 되니까 많은 사람들이 몰리게 되고, 서버가
붐비게 되고, 결국 응답속도가 늦어지게 된다. 이 과정을 좀더 자세히 보면,
-
웹 브라우저(IE, Firefox, Opera 등)에서 웹 페이지 상의 링크를 클릭한다.
-
웹 서버는 요청(클릭한 것)을 받아들여서 웹용 스크립트 언어(PHP)와 디비(MySQL)를
이용하여 동적으로(실시간으로) 브라우저에게 보여줄 내용을 생성해낸다.
-
생성해낸 내용을 클라이언트(브라우저)에게로 보낸다.
-
브라우저는 응답을 받아서 해석한 뒤에 사용자에게 글자나 그림, 멀티미디어 형태로 보여준다.
과정을 가만히 보면 한가지 비효율적인 면이 있다. 게시판에서 많은 댓글이 달려 있는 경우를 생각해보자. 본
글이 있을 것이고 거기에 10개의 댓글이 달려있다고 하자. 내가 11번째 댓글을 달고 확인을 누르면 그 다음
화면은 더이상 볼 필요가 없다. 왜냐하면 이미 다 본 거기 때문에. 그럼에도 내가 확인을 누르면 본글부터
댓글까지 다시 요청을 하고 보여주는 과정을 거쳐야 한다. 즉, synchronous 과정인 것이다. 사용자가
요청하면 서버는 응답하고, 이 과정을 반복하는 것이다.
그런데 대부분의 경우 페이지의 모든 내용이 다시 바뀌어야 할 필요가 없을 때가 많다. 이럴때
Asynchronous 가 들어가는 거다. 다시 예를 들어보자. 모사이트의 선호작 시스템에 최근 이름순,
제목순, 새 글순으로 정렬하는 기능이 생겼다. 처음 선호작 보기를 누르면 디비에서 자신의 선호작 데이터를
순서대로 가져와 보여준다. 각종 정렬 버튼을 눌렀을 때는 똑같은 내용임에도 불구하고 순서가 틀리기 때문에
다시 디비에서 데이터를 가져와 정렬한다. 똑같은 디비 내용을 가져와 똑같은 형식으로 보여주는 데 단지 순서가
틀리다는 이유만으로 똑같은 과정을 반복해야 한다. 대역폭 낭비이고, 자원의 낭비다.
필요한 모든 데이터는 이미 브라우저(클라이언트 측)에 도착해 있는 상태다. 단지 브라우저에서 보이는 순서만
바꾸면 되는 거다. 이때 자바스크립트가 필요하다. 일단 도착한 데이터에 대한 정보를 가지고 있어야 정렬을 할
수 있다. 원래 브라우저의 기본 기능은 단순히 보여주기만 하는 것 뿐이었기 때문이다. 그럼 이제 서버와
통신을 하지 않아도 되기 때문에 그 시간만큼 더 빨리 사용자에게 정렬된 순서로 보여진다. (서버에서
정렬하든, 브라우저의 자바스크립트가 정렬하든 정렬하는데 드는 시간은 필요하다. 서버와의 통신이 없기 때문에
그만큼 더 빨라지는 것이고.) 이때 비동기적으로 서버와 통신을 하게 되며 비동기 통신에 필요한 게
XMLHttpRequest 이다.
다음 두 그림을 보면 도움이 될 것이다.
 http://pds2.egloos.com/pds/1/200511/15/79/b0050379_1318972.png',475,455,'1');">
 http://pds1.egloos.com/pds/1/200511/15/79/b0050379_13181832.png',475,598,'1');">
이 외에도 Ajax 는 많은 장점을 가지고 있다. 자세한 건 다음의 링크를 참조하라.
1.
http://www.adaptivepath.com/publications/essays/archives/000385.php
: Ajax 란 말을 처음으로 사용한 사람(Jesse James Garrett)이란다. 개념에 대해 잘 정리해 놓은
글이다. 위 그림도 여기서 가져온 거다.
2. 영어라서 보기 힘든 사람을 위해 이도운님이 번역해놓은 게 있다.
http://blog.naver.com/idoun21/80015281549
그림이 빠진 게 있어서
http://cafe.naver.com/ajaxstar.cafe?iframe-x_url=/ArticleRead.nhn%3Farticleid=1
여기를 보면 그림이 들어간 전체 내용이 있다.
3. 한글 위키피디아에도 잘 정리해 놓은 글이 있다.
http://ko.wikipedia.org/wiki/AJAX
4. 여기에 보면 Ajax 에 대한 많은 글의 링크가 모여있다.
http://www.tattertools.com/t_keyword.html?num=4139
5. 김중태 문화원에도 잘 설명된 글이 여러 개 있다. 웹 2.0 에 대한 설명도 있다. 여기서는 시맨틱 웹이라고
부른다.
http://www.dal.co.kr/chair/semanticweb/
웹 2.0 시대
위 김중태 문화원 링크에 가보면 자세한 설명이 있다. 웹을 의미론적으로 바로봐야 하기 때문에 Semantic
Web 이라고 부르는 게 낫다고 한다. 웹 1.0 시대는 사람이 노동하는 시대였다면, 웹 2.0 시대는
기계가 노동하는(즉 웹의 내용들이 자동화되어서 정리되고 검색가능하도록) 시대일 거라고 한다. 물론 2.0
시대는 아직 오지 않았고 많은 기업이나 사람들이 노력하고 있는 중이다.
예를 들자면, 웹에서 자바를 검색하면 Sun 에서 만든 프로그래밍 언어인 자바와 커피인 자바가 같이
나타난다. 그러나 두 개는 분명 다르다. 각각의 웹 내용에 프로그래밍 언어와 커피라는 눈에 보이지 않는
태그가 달려 있다면 어떨까? 그렇다면 쉽게 분류가 되고 보다 의미있게 찾는 사람에게 다가올 것이다.
Ajax의 단점
개발이 힘들다. 아직 적절한 도구도 없는데, 많은 자바스크립트가 필요하고 자바스크립트가 안 먹히는
경우(브라우저에서 꺼놨다든가 하는), 즉 예외 사항이 발생했을 때 처리하기가 곤란하다.
그래서 XForm 이나 XSLT 를 이용하는 게 더 낫다는 얘기도 있지만, 안타깝게도 이 기술은 브라우저에서
제대로 구현된 게 없다. 아직 사용하지 못한다는 것이다. 하지만 앞으로 계속 개발될테니 주의를 기울여야 할
것이다. XHTML 2.0 스펙에 XForm이 나올 것이다. 아마도. (기억에 의존하는 바람에...
^^;;)
MS에서 Ajax에 상응하는 아틀라스란 기술을 개발한다는 기사를 ZDnet에서 본 거 같은데 어찌 됐는 지
모르겠다.
도움 될 만한 링크
AJAX and PHP Form Processing :
http://www.jeffpipas.com/blog/archives/2005/07/ajax_and_php_fo.html
역시 Form에 관한 오픈 소스 :
http://www.formassembly.com/
open-source PHP5 web framework :
http://www.symfony-project.com/
출처:http://dharana.egloos.com/1933394
기타 참고 사이트
http://tong.nate.com/jiko78/7880859
http://mitglied.lycos.de/gerecter/index.php?pagetoread=AJAX
|
원본: 
