AJAX 기본중의 기본 xmlhttprequest 예제로 배워보는 XMLHttpRequest객체
Ajax 구현의 시작은 XHR 객체의 생성에서 시작한다. XHR 은 W3C 의 표준이 아니므로 , 인터넷 익스플로러에서는 ActiveX Component 형식으로 구현되었고, 그 밖에 다른 브라우저들 (Fire Fox , 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를 지원하는 브라우저라면 오브젝트를 리턴하고 그렇지 않다면 nul를 리턴하게 된다. 따라서 오브젝트가 존재하면 if 구문은 true를 반환하고 xmlHttp값은 ActiveXObject 객체가 할당되어진다. If 구문이 falst 를 반환하면 else if 구문으로 이동하여 xmlHttp 값은 native javascript 객체가 할당될 것이다. 따라서 위 코드를 이용하면 브라우저가 다르더라도 하나의 메소드로 XHR객체를 생성하여 사용할 수 있다.
이번에는 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을 사용하는 이점이 그만큼 줄어든다.
XHR 객체는 요청할 수 있는 서버의 리소스 url에 제한이 걸려있다 XHR 객체는 요청할 수 있는 서버의 리소스 url에 제한이 걸려있다. 즉 접근 할 수 있는 서버 리소스 url은 XHR객체가 존재하는 도메인에 있어야 한다는 의미다. 다른 말로 바꾸면 XHR객체와 서버 프로그램은 같은 도메인에 있어야만 한다. 그렇다면 XHR객체가 자기가 속해있는 도메인이 아닌 그 밖에 있는 서버의 url을 호출하면 어떻게 될까? 이것은 브라우저 마다 차이가 있다 IE의 경우에는 alert창을 띄우면서 보안 위해요소가 있으니 계속 진행할 것인지 아닌지를 사용자가 판단할 수 있게 되어있고, FireFox의 경우는 에러를 보여주며 요청자체를 브라우저에서 차단해 버린다. Ajax 구동방식이 일반적인 웹의 방식과는 많이 다르고 또한 그 내부로직을 이해하는데 어려움이 있을 수도 있다. 하지만 XHR의 주요 메소드와 주요 속성을 이해하고 쉽게 접근할수 있을것이다.