통신할 데이터는 XML의 형태로 주고 받는다.
소스코드 살펴보기
일단 다음 소스를 보고 스스로 분석해보자. 자바스크립트에 대한 어느 정도의 지식만 있다면 쉽게 분석할 수 있을 것이다. GetServerTime.html에서 XMLHttpRequest 객체를 이용하여 time.php에 비동기적으로 접속하여 계속적으로 서버 시간을 알아오는 소스이다.
가장 중요한 것은 XMLHttpRequest 객체이다. 이 객체는 서버와의 비동기통신을 할 수 있도록 제공되는 객체이다.
XMLHttpRequest 객체 생성하기
객체의 생성은 11~19라인이다.IE의 지원이 불완전한 관계로 브라우저의 종류에 따라 생성 방법을 다르게 하야 함에 유의하라. 특별한 이유가 없는 한 위의 소스코드는 변경될 일이 없으므로 아예 외워 버리는 것도 좋을 것이다.
서버와 본격적으로 통신하기
서버와의 통신을 본격적으로 시작하는 StartAjax 함수를 보자.
23라인에서 createXHR() 함수를 호출하여 XHR 객체를 생성한다. 생성된 객체는 전역 변수인 xhr에 저장된다. 이 때 xhr이 null이라면 생성에 실패한 것이므로 통신을 종료한다(24라인).
26라인에서는 xhr의 연결을 설정하는 open() 함수를 볼 수 있다. open() 함수에는 세 개의 인자가 전달되는데, 각각은 다음과 같다.
method27라인에서는 콜백 함수를 설정하고 있다. 콜백 함수란, 직접 호출하지 않아도 특정 이벤트에 자동으로 호출되는 함수를 말한다. onreadystatechange라는 이벤트에 CallBack()이라는 함수를 할당함으로써 onreadystatechange 이벤트가 발생할 경우 자동으로 CallBack() 함수가 호출된다.
통신의 방법을 설정한다. "POST"와 "GET", "PUT" 중 하나를 넘겨줄 수 있는데, "POST"의 경우 실제 http 자체에 내용을 넣어 전달하는 것이고, "GET"의 경우 '?' 기호와 '&' 기호를 이용하여 주소에 여러 변수의 값을 담아 넘겨주는 방법이다. "PUT"의 경우 거의 쓰이지는 않는 방법이다.
url
통신할 파일의 주소를 적어준다. 절대 경로와 상대 경로 둘 다 상관 없지만 주의할 점은 같은 서버 내에 있어야 접근이 허가된다는 것이다.
asynch
통신의 동기/비동기 여부를 결정한다. true일 경우 비동기 통신, false일 경우 동기 통신이 된다. 기본값은 true, 즉 비동기 통신이다. AJAX의 큰 장점 중 하나가 비동기 통신이므로 주로 true로 사용한다.
username, password
해당 페이지에서 username과 password를 요구한다면 이 인자를 통해 username과 password를 전달한다.
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 함수는 호출되지 않음즉 실제로 응답을 처리해야 하는 시점은 readystate가 4인 때이다.
1 open 함수는 호출되었으나 send 함수는 호출되지 않음
2 send 함수는 호출되었으나 아직 서버로부터 응답이 오지 않음
3 서버로부터 응답이 일부만 도착함
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();
위와 같이 하면 매번 다른 주소로 요청이 넘어가기 때문에 저장된 임시 페이지를 읽어오지 않아서 매번 다른 값을 볼 수 있다.
2008년 1월 19일 이후 작성된 모든 글에 대해서 퍼가는 것을 금지합니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
퍼가고자 하시는 분은 링크를 달아 주시기 바랍니다.
댓글을 달아 주세요