Harry's_Lab

프로그램을 개발하던 도중 10진수로 표현된 Unicode, 즉 &#으로 시작하여 10진수 Unicode가 있고 세미콜론(;)으로 끝나는 문자를 출력해야 할 상황이 생겼다. Javascript에서 문자열 변수 안에 있는 문자열은 '並ぶ'와 같았으며, 그냥 단순히 출력할 경우 코드 부분이 변환되지 않고 그대로 출력되는 문제점이 있었다.

10진 Unicode를 코드에 해당하는 실제 문자로 변환하기 위해서는 String.fromCharCode라는 Javascript 함수를 써야 한다. 그러나 이 함수는 문자 코드를 문자로 변환하는 역할만 할 뿐 문자 코드가 섞여 있는 문자열을 변환하는 기능은 없었다.

그래서 다음과 같은 함수를 만들었다.

function decodeDecUnicode(str) { var regExp=/&#([0-9]+);/gi; eval("var unicodeStr=\""+str.replace(regExp, "\"+String.fromCharCode(parseInt(\"$1\"))+\"")+"\";"); return unicodeStr; }

str에 변환하고자 하는 문자열을 넘기면 정규식을 이용해 십진 유니코드를 파싱한 뒤 이를 실제 문자로 치환하여 리턴한다.

IE와 비 IE 브라우저는 이벤트가 발생했을 때 이벤트에 대한 세부정보를 담고 있는 event 객체를 사용하는 방법에 있어서 많은 차이를 보인다. 가장 먼저, 그 전달 방법부터가 다르다. 다음은 브라우저 별 event 객체의 전달 방법을 나타내었다.

obj의 onclick 이벤트에 process() 함수를 할당

IE의 경우

function process()
{
        alert(event.srcElement.getAttribute("id"));
}

<div id="obj" onclick="process();"/>

비 IE 브라우저의 경우

function process(e)
{
        alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>

event 객체를 사용하는 방법이 다를 뿐만 아니라 event 객체의 속성 중 이벤트가 발생한 객체를 나타내는 속성의 이름도 각각 srcElement와 target으로 다르다. 이외에도 많은 속성 이름이 호환되지 않기 때문에 주의를 요한다.

따라서 IE와 비 IE 브라우저 모두에서 작동하는 코드를 작성하기 위해서는 다음과 같이 한다.

IE 및 비 IE 브라우저 모두에서 작동하는 소스

function process(e)
{
        if(event) alert(event.srcElement.getAttribute("id"));
        else alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>

Runtime시에 실시간으로 자바스크립트로 스타일시트를 변경하기 위해서는 두 가지 방법이 존재한다. 두 개의 스타일시트 클래스를 만들어 놓고 Object의 Class 속성을 변경하는 방법이 가장 많이 쓰이는 방법이나, 이는 변경의 폭이 매우 제한적이다. 또 다른 방법은 스타일시트 자체를 변경해 주는 것이다.
두 방법 모두 브라우저 간에 방법이 다르기 때문에 Cross Browsing 문제에 대해 신경을 써야 한다. 본 포스트에서는 두 번째 방법에 대해서만 설명한다.

개체의 width는 30으로, height은 15로 조절하고 싶을 때

IE의 경우
obj.style.cssText="width:30px; height:15px;";

비 IE 브라우저의 경우
obj.style.width="30px;";
obj.style.height="15px;";

IE가 좀 더 편한 듯 보이나, 위 예제 후 width를 제외한 height만 다시 변경할 경우를 보자.

개체의 height만 25로 조절하고 싶을 때

IE의 경우
obj.style.cssText="width:30px; height:25px;";

비 IE 브라우저의 경우
obj.style.height="25px;";

IE의 경우 height 속성만 적어주면 width 속성이 초기화되기 때문에 두 속성을 모두 적어주어야 하지만 비 IE 브라우저의 경우 속성별로 조절을 해 줄 수 있기 때문에 스타일을 자주 변경할 경우에는 비 IE 브라우저가 더 편하다.

IE와 비IE 브라우저 간 차이를 보이는 Stylesheet 중 하나가 투명도에 관련된 Stylesheet이다. 일반적으로 투명도를 조절할 때 스타일시트를 다음과 같이 써 준다.

opacity:0.80; filter:alpha(opacity=0.80);

사실 이 코드 자체가 브라우저 간 호환성을 고려한 코드이다. 왜냐하면, opacity라는 속성은 비IE 브라우저에서만 작동하고, filter라는 속성은 IE에서만 작동하기 때문이다. 또한 Stylesheet는 정의되지 않는 속성 이름이 있어도 오류를 내지 않고 무시하고 넘어가기 때문에 이와 같이 써 주어도 무방한 것이다.

하지만 자바스크립트로 투명도를 조절해야 할 때에는 어차피 스타일시트를 자바스크립트로 조작하는 방법이 브라우저간 차이가 있기 때문에 각각에 맞는 스타일만 써 주어도 될 것이다. 다음과 같다.

if(IE) obj.style.cssText="filter:alpha(opacity=0.80);";
else obj.style.opacity="0.80;";

컴퓨터에서 Cross 라는 말이 붙으면 호환이 된다는 의미이다. Cross-Language라고 하면 언어 간 호환이 되는 패키지나 클래스를 일컫고, Cross-Platform이라고 하면 플랫폼간 호환이 가능한 것을 말한다. 마찬가지로, Cross-Browsing이라는 브라우저간 호환이 되도록 하는 것을 일컫는다.

Apec Cyber Academy의 과제 중 하나로 학교와 고장, 팀원을 소개하는 웹 페이지를 작성하게 되었다. 그런데 여기서 제시한 '잘 만들어진 페이지'의 기준 중 하나가 '모든 브라우저에서 정상적으로 작동한다'이다. 즉, Cross-Browsing이 얼마나 잘 되었느냐가 채점 시 반영된다는 것이었다. 때문에 페이지 하나를 만들면서도 Cross-Browsing 문제에 굉장히 예민해질 수밖에 없었다.

많은 사람들이 아직까지 Cross-Browsing에 대해 많은 지식이나 개념을 갖지 못하고 있는 것이 사실이다. Cross-Browsing은 브라우저를 크게 Microsoft Internet Explorer와 그 이외의 브라우저, 두 개로 나누었을 때 둘 간의 호환이 많은 부분 되지 않기 때문에 이를 해결해 주는 것이다. 역시 문제는 MS IE이다. IE 7로 넘어 오면서 상당 부분 개선된 것은 사실이나 아직 Opera나 Firefox의 표준 준수율을 따라가기에는 그 거리가 굉장히 멀다. 시장 지배력은 가장 큰 브라우저로서 페이지 제작과 이용의 편의를 위해 MS는 각성하고 하루 뻘리 표준 준수율을 높여야 할 것이다.

필자가 페이지를 작성하면서 두 브라우저간 소스를 다르게 작성한 부분은 다음과 같다.

호환성 확보 항목

• Width & Height의 영역 차이
  • IE는 Width와 Height으로 정해진 범위 내에 Padding이 포함되지만, 이외의 브라우저는 Padding이 Width와 Height의 밖에 있다. 엄밀히 따진다면 IE가 옳지 못한 렌더링이다.
• 투명도 관련 스타일의 차이
  • IE의 경우 투명도 값을 filter로 조절하지만, 이외의 브라우저의 경우 투명도 값을 opacity로 조절한다.
• Javascript로 Stylesheet를 조절하는 방법의 차이
  • IE의 경우 object.style.cssText="width:100%;"와 같이 스타일을 변경할 수 있지만, 이외의 브라우저의 경우 object.style.width="100%;"와 같이 한다.
• Event 객체의 전달 방법의 차이
  • IE의 경우 이벤트가 발생했을 때 호출된 함수에서 자유롭게 브라우저 내장객체인 event를 사용할 수 있지만, 이외의 브라우저의 경우 이벤트 발생 시점에서 함수에 매개변수로 event객체를 넘겨 주어야 함수 내부에서 이를 참조할 수 있다.
• Class 속성 이름의 차이
  • IE의 경우 className이라는 속성 이름을 통해 객체의 Class 이름에 접근할 수 있지만, 이외의 브라우저는 class라는 속성 이름으로 접근해야 한다.
• 동적 이벤트 할당 방법의 차이
  • IE의 경우 onclick 속성값에 함수 인스턴스를 할당하면 되지만, 비 IE 브라우저의 경우 setAttribute 함수를 이용해야 한다.

필자는 10월 1일부터 Apec에서 주최하고 대만 교육부에서 주관하는 Apec Cyber Academy(이하 ACA)에 참가한다. 물론 국제대회이고, 상급은 1등상이 대만 교육부장관상일 만큼 꽤 큰 대회이고, 올해가 6회 대회로, 역사가 짧은 대회도 아니다.

이 대회에 참가하기 위해서는 팀을 구성해야 하는데, 올해부터 팀 구성에 한 가지 관문이 생겼다. 바로 Survivor Online이라는 게임을 통과해야 하는 것이다. 게임이라고는 하지만 게임이라기보다는 퀴즈에 가까운 컨텐츠로, 인터넷 개인정보 보호(Safe)와 정보 불법 도용 및 복제 방지(Honest)의 두 가지 주제에 대한 인식 검사 정도로 보면 된다. 쉬워 보일 수 있으나, 퀴즈를 푸는 도중 한 문제라도 틀리면 처음으로 돌아가는데다가 문제마다 플래시 애니메이션이 있어서 시간이 상당히 소요되기 때문에 통과하기가 매우 힘든 것이 사실이다.

그래서 어떻게 편법을 써서 이를 통과할 방법이 없을까를 고민했다. 가장 먼저 생각해 본 것은, 맨 마지막 페이지에서 지금까지 맞은 문제의 개수와 틀린 문제의 개수를 집계하여 이를 이용해 통과 여부를 결정할 테니, 그 중간의 맞은 문제 개수 전달 과정을 잡아 내어 조작하면 될 것이라는 것이었다. 그래서 혹시 Form 내부의 Input을 Hidden으로 해 놓고 이에 숨겨 놓지는 않았나 검사해 보았다. 하지만 소스 코드는 너무나 깨끗했고, 어디에서도 맞은 문제의 개수가 저장되어 있는 Form을 찾을 수는 없었다.

그래서 일단 성실히 문제를 풀어 나가서 맨 마지막 페이지의 주소를 알아내었다. 수고롭게도, 주소 표시줄의 주소를 변경시키지 않고 페이지만 이동하도록 설계된 사이트여서 페이지 이동시 주소는 상태표시줄에 로딩 메시지가 잠깐 뜰 때 이를 캡쳐하여 볼 수밖에 없었다. 알아낸 주소는, /lwf/so/intro_safe_q.asp?t=1&s=20이었다. 그런데, 의외의 수확이 있었다. 바로 주소 뒤에 get 형식으로 인자 두 개가 따라오는 것을 볼 수 있었기 때문이었다.

t는 어떤 역할을 하는지는 전혀 유추가 되지 않았기 때문에 신경 쓰지 않기로 하고 s라는 변수의 기능만 알아내면 될 터였다. 그 때 상황이 필자가 10문제 중 2문제를 맞히고 마지막 페이지에 도착한 상태였고, 이를 이용해 s를 유추해 내면 대략 100점 만점의 점수(score)를 나타내는 변수라고 생각할 수 있었다.

그리하여 즉시 /lwf/so/intro_safe_q.asp?t=1&s=100 이라는 주소로 접속을 해 보았더니 여전히 'Try Again' 메시지가 떴다.

혹시나 하여 t를 0으로 주어 접속을 해 보았다. 그랬더니...

한 문제라도 틀렸을 때 나오던 Try Again 메시지는 없어지고 반가운 Pass 메시지가 떴다.

물론 서버상 정보에도 나는 이 문제를 모두 통과한 것으로 기록되어 있다. 국제 대회에서 이러한 문제가 발생한 이유는 페이지 설계에서 보안을 무시했던 탓이다. POST나 GET이나 그게 그거겠지 하는 생각이나 세션 관리의 허술, 자바스크립트의 지나친 노출 등이 모두 사이트 설계의 헛점이다. 이 사이트의 경우 세션 등으로 처리해야 할 데이터를 GET으로 넘겨줌으로써 이를 사용자가 너무나 쉽게 조작할 수 있게 했다는 것이다. 퀴즈이니까 이런 문제들이 그냥 넘어갈 수 있지, 만약 개인정보가 이러한 방식으로 날아다닌다면 심각한 문제가 될 것이다.

이러한 예를 통해서 자신이 페이지 설계시에는 이러한 점들을 최대한 고려하여 이렇게 '어이없게' 뚫리는 일이 없도록 하자.

(덕분에 우리 팀원들은 문제를 풀지 않고 원터치로 모든 문제를 패스할 수 있게 되었다.)

AJAX를 이용해 서버와 통신하는 방법을 알아보자.
통신할 데이터는 XML의 형태로 주고 받는다.

소스코드 살펴보기

일단 다음 소스를 보고 스스로 분석해보자. 자바스크립트에 대한 어느 정도의 지식만 있다면 쉽게 분석할 수 있을 것이다.

GetServerTime.html (Language : javascript)

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2. <HTML>
3.  
4.     <HEAD>
5.         <TITLE> AJAX </TITLE>
6.  
7.         <script language="javascript">
8.             var xhr; //XML Http Request Object
9.             var url="time.php";
10.  
11.             function createXHR()
12.             {
13.                 if(window.ActiveXObject)
14.                     xhr=new ActiveXObject("Microsoft.XMLHTTP");
15.                 else if(window.XMLHttpRequest)
16.                     xhr=new XMLHttpRequest();
17.                 else
18.                     return null;
19.             }
20.  
21.             function startAjax()
22.             {
23.                 createXHR();
24.                 if(xhr==null) return;
25.  
26.                 xhr.open("GET", url, true);
27.                 xhr.onreadystatechange=CallBack;
28.                 xhr.send(null);
29.             }
30.  
31.             function CallBack()
32.             {
33.                 if(xhr.readystate==4)
34.                 {
35.                     if(xhr.status==200)
36.                     {
37.                         var result=xhr.responseXML;
38.                         document.title=result.getElementsByTagName("time")[0].firstChild.data;
39.  
40.                         setTimeout(Again, 1000);
41.                     }
42.                 }
43.             }
44.  
45.             function Again()
46.             {
47.                 xhr.open("GET", url, true);
48.                 xhr.onreadystatechange=CallBack;
49.                 xhr.send(null);
50.             }
51.         </script>
52.     </HEAD>
53.  
54.     <BODY onload="javascript:startAjax();">
55.     </BODY>
56.  
57. </HTML>

time.php (Language : php)

1. <?php
2.     header ("Content-Type: text/xml; charset=euc-kr");
3.     echo '<?xml version="1.0" encoding="euc-kr" ?>';
4.     echo '<time>';
5.     echo date ("G:i:s");
6.     echo '</time>';
7. ?>

GetServerTime.html에서 XMLHttpRequest 객체를 이용하여 time.php에 비동기적으로 접속하여 계속적으로 서버 시간을 알아오는 소스이다.

가장 중요한 것은 XMLHttpRequest 객체이다. 이 객체는 서버와의 비동기통신을 할 수 있도록 제공되는 객체이다.

XMLHttpRequest 객체 생성하기

객체의 생성은 11~19라인이다.

createXHR (Language : javascript)

11. function createXHR()
12. {
13.     if(window.ActiveXObject)
14.         xhr=new ActiveXObject("Microsoft.XMLHTTP");
15.     else if(window.XMLHttpRequest)
16.         xhr=new XMLHttpRequest();
17.     else
18.         return null;
19. }

IE의 지원이 불완전한 관계로 브라우저의 종류에 따라 생성 방법을 다르게 하야 함에 유의하라. 특별한 이유가 없는 한 위의 소스코드는 변경될 일이 없으므로 아예 외워 버리는 것도 좋을 것이다.

서버와 본격적으로 통신하기

서버와의 통신을 본격적으로 시작하는 StartAjax 함수를 보자.

startAjax (Language : javascript)

21. function startAjax()
22. {
23.     createXHR();
24.     if(xhr==null) return;
25.  
26.     xhr.open("GET", url, true);
27.     xhr.onreadystatechange=CallBack;
28.     xhr.send(null);
29. }

23라인에서 createXHR() 함수를 호출하여 XHR 객체를 생성한다. 생성된 객체는 전역 변수인 xhr에 저장된다. 이 때 xhr이 null이라면 생성에 실패한 것이므로 통신을 종료한다(24라인).

26라인에서는 xhr의 연결을 설정하는 open() 함수를 볼 수 있다. open() 함수에는 세 개의 인자가 전달되는데, 각각은 다음과 같다.

XMLHttpRequest::open(string method, string url, boolean asynch, string username, string password);

method
통신의 방법을 설정한다. "POST"와 "GET", "PUT" 중 하나를 넘겨줄 수 있는데, "POST"의 경우 실제 http 자체에 내용을 넣어 전달하는 것이고, "GET"의 경우 '?' 기호와 '&' 기호를 이용하여 주소에 여러 변수의 값을 담아 넘겨주는 방법이다. "PUT"의 경우 거의 쓰이지는 않는 방법이다.

url
통신할 파일의 주소를 적어준다. 절대 경로와 상대 경로 둘 다 상관 없지만 주의할 점은 같은 서버 내에 있어야 접근이 허가된다는 것이다.

asynch
통신의 동기/비동기 여부를 결정한다. true일 경우 비동기 통신, false일 경우 동기 통신이 된다. 기본값은 true, 즉 비동기 통신이다. AJAX의 큰 장점 중 하나가 비동기 통신이므로 주로 true로 사용한다.

username, password
해당 페이지에서 username과 password를 요구한다면 이 인자를 통해 username과 password를 전달한다.

27라인에서는 콜백 함수를 설정하고 있다. 콜백 함수란, 직접 호출하지 않아도 특정 이벤트에 자동으로 호출되는 함수를 말한다. onreadystatechange라는 이벤트에 CallBack()이라는 함수를 할당함으로써 onreadystatechange 이벤트가 발생할 경우 자동으로 CallBack() 함수가 호출된다.

28라인의 send() 함수는 실질적으로 통신을 하는 함수이다. 인자로는 전달할 데이터를 넣어주는데, "GET" 방식에서는 null을, "POST" 방식에서는 전달할 데이터를 넣어주면 된다.

서버에서 응답하기

이렇게 하여 서버로 요청이 넘어가면 서버에서는 time.php 파일을 열어 응답을 한다. 응답은 일반 웹 페이지를 뿌리는 것과 똑같이 하면 된다. 즉, php로 응답을 할 경우 echo로 뿌려 준 모든 소스코드가 응답이 된다.

time.php에서는 GetServerTime.html에서 요청을 전달받고 바로 응답을 한다. header 함수의 경우 응답 http의 헤더를 설정하는 부분인데, 꼭 응답의 헤더에서 Content-Type, 즉 mime을 text/xml로 설정해야 클라이언트에서 XML 데이터로 받아 처리할 수 있다. 그렇지 않을 경우 XML 데이터임에도 불구하고 XML로 인식을 하지 못하게 된다.

ReadyState

XMLHttpRequest 객체를 사용하는 모든 과정에서 이 객체의 속성 중 하나인 readystate가 계속 변하게 되며, 변할 때마다 onreadystatechange라는 이벤트를 발생시킨다. readystate는 다음과 같이 5가지의 값을 가질 수 있다.

0 객체는 생성되었으나 open 함수는 호출되지 않음
1 open 함수는 호출되었으나 send 함수는 호출되지 않음
2 send 함수는 호출되었으나 아직 서버로부터 응답이 오지 않음
3 서버로부터 응답이 일부만 도착함
4 서버로부터 모든 응답이 도착함

즉 실제로 응답을 처리해야 하는 시점은 readystate가 4인 때이다.

onreadystatechange 이벤트의 콜백 함수로 CallBack() 함수를 설정했으니 readystate가 0~4로 바뀔 때마다 CallBack() 함수가 호출된다. CallBack() 함수에서는 매번 readystate의 값을 검사하여 4일 경우에만 응답을 처리하면 된다.

하지만 readystate가 4인 경우에도 올바르지 않은 응답이 올 수 있다. 가령, 접근 권한이 없어 접근하지 못했을 때에도 readystate는 4가 될 수 있다. 이 때에는 XMLHttpRequest의 status 속성을 검사하면 된다. status는 성공적인 응답이 왔을 때에 200으로 설정되므로 이를 검사한다.

응답 처리하기

이렇게 readystate==4 && status==200의 조건을 만족했을 경우 서버로부터 성공적인 응답이 도착한 것이므로 xhr에는 응답이 저장된다. 이 응답은 두 가지 방법으로 접근할 수 있다.

첫 번째 방법은 xhr.responseText로 접근하는 것이다. 서버에서 XML 데이터가 아닌 Text 데이터를 리턴했을 경우 사용한다. XML을 리턴했더라도 이를 Text의 형태로 받고 싶다면 이를 이용한다.

두 번째 방법은 xhr.responseXML로 접근하는 것이다. 이 방법은 응답의 Content-type이 text/xml인 경우에만 성공적으로 처리된다. 이 방법은 DOM Object의 형태로 XML 문서에 접근할 수 있어 매우 편하다. 또한 AJAX 자체가 본래 XML을 사용하도록 만들어 진 것이므로 주로 이 방법을 사용하게 된다.

DOMDocument

DOMDocument란, XML 데이터를 효과적으로 제어/조작하기 위하여 고안된 객체이다. XML 데이터를 통째로 읽어 메모리에 트리의 형태로 저장해 놓고 다음의 명령어들을 통해 검색/추가/제거/수정 등의 작업을 할 수 있다. element라는 DOM Object가 존재한다고 가정하고 설명한다.

접근
element.childNodes : element의 모든 자식 노드를 배열로 반환한다.
element.firstChild : element의 첫 번째 자식 노드를 반환한다.
element.lastChild : element의 마지막 자식 노드를 반환한다.
element.parentNode : element의 부모 노드를 반환한다.
element.nextSibling : element의 다음 형제 노드를 반환한다.
element.previousSibling : element의 이전 형제 노드를 반환한다.
element.nodeValue(=data) : element의 값을 반환한다.
element.hasChildNodes(); : element가 자식노드를 가지면 true, 가지지 않으면 false를 반환한다.
element.getAttribute(name); : element의 attribute 중 이름이 name인 attribute의 값을 반환한다.

검색
element.getElementsByTagName(tagname); : 이름이 tagname인 모든 노드를 배열의 형태로 반환한다.
element.getElementById(tagID); : ID가 tagID인 노드를 반환한다.

추가
document.createElement(tagname); : tagname의 이름으로 새로운 노드를 생성한다.
document.createTextNode(text); : text의 값으로 새로운 텍스트 노드를 생성한다.
element.appendChild(child); : child를 맨 마지막 자식 노드 뒤에 추가한다.
element.insertBefore(new, target); : new를 target 바로 앞에 추가한다.

제거
element.removeChild(child); : element의 자식 노드 중 child를 삭제한다.

변경
element.replaceChild(new, old); : element의 자식 노드 중 old를 new로 대체한다.
element.setAttribute(name, value); : element의 속성 중 이름이 name인 속성의 값을 value로 설정한다.
element.removeAttribute(name); : element의 속성 중 이름이 name인 속성을 삭제한다.

마무리

기본적으로 서버와 통신하는 방법을 알아보았다. 사실 위의 소스코드를 그대로 실행하면 시간이 바뀌지 않는다는 것을 알 수 있다. 이는 인터넷 임시 파일이 생성되어 분명 페이지가 바뀌었음에도 불구하고 컴퓨터에 저장된 임시 파일을 읽어들여서 바뀌지 않은 내용을 보여주기 때문이다. 이 때에는 요청하는 주소를 계속 변화시키기 위하여 주소에 랜덤값을 같이 넘겨 주는 것이 좋다.
예를 들어 다음과 같다.

url="time.php?key=" + Math.random();

위와 같이 하면 매번 다른 주소로 요청이 넘어가기 때문에 저장된 임시 페이지를 읽어오지 않아서 매번 다른 값을 볼 수 있다.

AJAX는 Asynchronous JAvascript & XML의 약자로, 말 그대로 자바스크립트와 XML을 이용하여 서버와 비동기적으로 통신하는 것을 일컫는다. 이를 이용하면 좀 더 다이나믹한 웹 페이지를 꾸밀 수 있게 된다.

일반적으로, 서버와 통신하기 위해서는 한 번의 페이지 이동을 거쳐야 한다. 왜냐 하면 서버측 프로그램은 페이지가 바뀔 때 호출이 되고, 이 때 서버의 정보를 얻어올 수 있기 때문이다. 물론 HTML등의 단순한 문서는 서버측의 프로그램이 필요 없을 수도 있겠지만, DB에 Access하는 페이지의 경우 일반적으로는 한 번의 작업을 할 때마다 페이지를 이동하여 서버측 프로그램을 호출해야 한다.

하지만, AJAX를 이용하면 서버 작업 시 페이지 이동이 불필요하게 되어서 사용자로 하여금 훨씬 편하게 사이트를 이용할 수 있게 한다.

AJAX를 이용한 대표적인 사이트를 꼽으라면 구글 맵스 를 들 수 있을 것이다. 이는 프로그램으로 나와 있던 Google Earth를 웹 상으로 옮겨놓은 것이라고 생각하면 된다.

처음 보는 사람이라면 '이거 뭐 다른데서 서비스하는 지도랑 똑같잖아?'라고 생각할 수도 있다. 하지만 분명히 큰 차이점이 있다. 다른 곳은 이용할 때 ActiveX 플러그인을 설치할 것을 요구한다. 하지만 구글 맵스는 어떠한 설치도 필요없다. 이것이 구글 맵스의 가장 큰 장점인 것이며, AJAX의 장점을 여실히 보여주는 예이다.

ActiveX가 없는 순수한 웹페이지인데도 페이지 전환이 없이 깔끔하게 지도를 표시하고 있다.

AJAX를 이용하면 어떤 것이 가능한 것인지 충분히 볼 수 있었다고 생각된다.

AJAX의 핵심요소는 XMLHttpRequest와 DOM이다.

XMLHttpRequest : 페이지 전환 없이 서버로 Http를 이용하여 정보를 전달하고 받아오는 자바스크립트 객체이다. 본래 IE가 처음 지원하였으나 현재는 대부분의 브라우저가 지원하고 있다.
DOM : XML 데이터를 관리하는 객체이다. XML 자료가 주어지면 몇 가지 함수를 통해 파싱, 추가, 삭제, 수정 등을 자유롭게 할 수 있도록 도와준다.

기본적인 원리를 간단히 설명하자면, XMLHttpRequest라는 객체에 여러 가지 정보를 담고 서버로 이를 전송한다. 그러면 서버가 이를 받아 처리를 한 후 그 결과값을 다시 클라이언트로 전송한다. 클라이언트는 서버에서 받아온 결과값을 이용하여 실시간으로 페이지를 갱신하게 된다.