XMLHttpRequest(XHR) 객체는 Internet Explore5에서 ActiveX 컴포넌트 형식으로 가장 먼저 제공되었기때문에, 모질라와 사파리 웹브라우저에서 이 객체를 도입하기전까지 사실 많은 개발자들이 XMLHttpRequest 객체의 사용을 꺼려했다.
XHR은 W3C 표준이 아니기때문에 브라우저마다 작동방식에 있어서 다소나마 차이가 존재했었지만 현재 대부분의 브라우저들은 XHR 기능을 서로 비슷하게 구현하고 있다. 현존하는 브라우저들 중에서 XHR을 지원하지 않는 브라우저는 거의 없을정도로 대부분의 브라우저들은 현재 XHR 을 지원하고 있다.
ajax 구현의 시작은 XHR 객체의 생성에서 시작한다.
XHR 은 W3C 의 표준이 아니므로, 인터넷익스플로어에서는 ActiveX Component 형식으로 구현되었고, 그 밖에 다른 브라우저들(FireFox, Safari, Opera)은 native javascript 객체로 구현되었다. 이런 차이점을 고려해서 XHR 객체를 얻어오는 자바스크립트 코드를 다음과 같이 작성할 수 있다.
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
window.ActiveXObject 는 ActiveXObject를 지원하는 브라우저라면 오브젝트를 리턴하고 그렇지 않다면 null를 리턴하게 된다. 따라서 오브젝트가 존재하면 if 구문은 true 를 반환하고 xmlHttp 값은 ActiveXObject 객체가 할당되어진다. if 구문이 false 를 반환하면 else if 구분으로 이동하여 xmlHttp 값은 navtive javascript 객체가 할당될 것이다.
따라서 위 코드를 이용하면 브라우저가 다르더라도 하나의 메소드로 XHR 객체를 생성하여 사용할 수 있다.
그런데 왜 자바스크립트일까? 비슷한 놈으로 VBScrpt도 있는데 말이다. 여기서 cross-browser(브라우저가 달라도 실행했을때 에러없이 같은 결과가 나오도록 구현해야 하는 코딩 방식)를 고려해 봐야 한다. Ajax 에서 조차 IE 에서는 잘 구동되고 나머지 브라우저에서는 안되는 태고적 코딩방식에서는 이제 벗어나보자. 자바스크립트는 현존하는 거의 모든 브라우저에서 지원받고 있는 스크립팅 언어이다. 그리고 자바스크립트(Netscape 사에서 만들었음)는 자바(JAVA, 썬에서 만든 언어)와는 전혀 다르다. 자바스크립트에 대해서 간단하게 참고할 것이 있다면http://www.crockford.com/javascript/javascript.html 이 싸이트에 한번 들어가보자.
이번에는 XHR 오브젝트에는 어떤 메소드가 있는지 살펴보자.
void open(string method, string url, boolean asynch, string username, string password): 요청을 초기화한다. 파라미터중에서 method, url 두개만 필수항목이고 나머지는 선택항목이다. method 는 POST, GET, PUT 3가지중 하나를 사용하면 되며, url 은 요청하고자 하는 서버의 url 이다. asynch 는 요청이 비동기인지 여부를 판단하는 항목이다. 입력하지 않으면 디폴트로 true 가 설정되어 요청은 비동기로 처리된다. false 로 설정하면 요청은 동기로 처리되기 때문에 서버에서 응답을 받을때까지 프로세스는 기다리게 된다. 사실 XHR 을 사용하는 가장 큰 이점중의 하나인 비동기 처리를 위해서는 asynch 항목을 true 로 설정해서 사용해야 한다. false 를 설정한다면 XHR 을 사용하는 이점이 그만큼 줄어든다.
void send(content): 실질적으로 요청을 서버로 보낸다. 요청이 비동기이면 이 메소드는 바로 리턴되지만 요청이 동기이면 서버에서 응답을 받을때까지 계속 대기한다. content 는 선택사항이며, DOM 객체(XML 객체)이거나 input stream, string 값으로 설정할 수 있으며 HttpRequest body 의 한 부분으로 서버로 전달된다.content 에 값을 넘기려면 open() 메소드는 반드시 POST 로 설정해야 하며, GET 방식으로 요청하려면 null 을 설정하면 된다.
open(), send() 메소드가 가장 많이 사용되는 메소드들이다. 나머지 메소드에 대해서도 알아보자.
void setRequestHeader(string header, string value) : header 에 해당하는 value 값으로 HttpRequest 헤더에 값을 설정하는 메소드로써, 반드시 open() 메소드 다음에 위치해야 한다.
void abort(): 요청을 중지한다.
string getAllResponseHeaders(): 요청에 대응되는 응답의 헤더정보를 리턴한다. 즉, Content-Length, Date, URI 등을 포함하는 헤더정보를 string 형식으로 반환한다.
string getResponseHeader(string header): 응답의 헤더정보중에서 header 에 대응되는 값을 string 형식으로 반환한다.
이번에는 XHR 의 속성중에서 중요한 몇가지를 알아본다.
onreadystatechange: 자바스크립트 콜백함수(funtion pointer)를 저장한다. 콜백함수는 readyState 값이 변할때 마다 호출된다. 요청이 서버로 보내지면 readyState 는 5가지 숫자값으로 계속 변화가 일어나게 된다.
readyState: 요청의 상태를 의미한다.(0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete)
responseText: 서버의 응답을 string 형식으로 나타낸다. 단순 text를 innerHTML 속성으로 표현하기에는 알맞지만 논리적으로 파싱하거나 동적으로 페이지 컨텐츠를 생성하기는 힘들다.
responseXML: 서버의 응답을 XML 로 나타낸다. 이 속성은 DOM 객체로 파싱할 수 있다.
status: 서버로부터의 HTTP 상태코드이다.(예 200(OK), 404(NOT Found), 202(결과 값이 없을 때)등등)
statusText: HTTP 상태코드에 대한 텍스트 값이다.(예 OK, NOT Found 등등)
이번에는 아주 간단한 예제를 실행해 보자. 아래 코드를 실행해 보려면 simpleRequest.html 이름의 html 파일로 만든 후에 반드시 웹서버에서 실행해야 한다.소스는 다운받아서 실행해 볼 수도 있다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
alert("The server replied with: " + xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>
</form>
</body>
</html>
<2-1 simpleRequest.html>
Hello from the server!
<2-2 simpleResponse.xml 의 내용>
위 코드를 실행해 보면 알겠지만 url 대신 <2-2> 와 같은 내용을 담고 있는 simpleResponse.xml 파일을 요청한다. 되도록 단순하게 XHR 의 구동원리를 이해하는 목적에서 서버에 요청을 하고 응답을 받는것 처럼 꾸몄을 뿐이다. 위 예제의 구동순서는 아래와 같다.
<2-3 Start Basic Asynchronous Request 버튼>
첫째, 사용자가 그림 <2-3> 버튼을 클릭하면 이벤트가 발생해서 startRequest() 메소드가 실행된다.
둘째, XHR 객체가 생성되고 handleStateChange() 콜백함수가 XHR 객체의 onreadystatechange 속성에 저장된다.
셋째, GET/비동기 방식으로 서버에 요청을 보내는데, 이때 XHR 객체는 서버의 simpleResponse.xml 파일을 요구한다.
넷째, 서버는 Ajax 클라이언트의 요청 url 인 simpleResponse.xml 을 찾아서 읽은 후에 string 형식으로 XHR 객체로 보낸다.
다섯째, 콜백메소드는 XHR 의 state 가 변할때 실행되므로 readyState=4 이고 stat=200 일때 결과값을 브라우저에 보낸다. 결과 화면은 아래 그림과 같다.
<2-4 simpleRequest.html 결과>
직접 실행해보면 알겠지만 Internet Explore 및 FireFox 에서 같은 결과값을 얻는다.
이번장에서 마지막으로 살펴볼 것은 Ajax 의 보안문제이다.XHR 객체는 요청할 수 있는 서버의 리소스 url 에 제한이 걸려있다. 즉, 접근 할 수 있는 서버 리소스 url 은 XHR 객체가 존재하는 도메인에 있어야 한다는 의미다. 다른 말로 바꾸면XHR 객체와 서버 프로그램은 같은 도메인에 있어야만 한다.그렇다면 XHR 객체가 자기가 속해있는 도메인이 아닌 그 밖에 있는 서버의 url 을 호출하면 어떻게 될까? 이것은 브라우저 마다 차이가 있다. IE 의 경우에는 alert 창을 띄우면서 보안 위해요소가 있으니 계속 진행할 것인지 아닌지를 사용자가 판단할 수 있게 되어있고, FireFox 의 경우는 에러를 보여주며 요청자체를 브라우저에서 차단해 버린다.
Ajax 구동방식이 일반적인 웹의 방식과는 많이 다르고 또한 그 내부로직을 이해하는데 어려움이 있을 수도 있다. 하지만 XHR 의 주요 메소드와 주요 속성을 이해하는 데는 이글을 통해서 보다 쉽게 접근할 수 있으리라 기대해 본다.
http://levin01.tistory.com/766
