- AJAX 구현 - XMLHttpRequest 객체 생성하기
- read: 2212 date: 07.06.04
- http://ez2web.com/blog/92
-
AJAX 의 비동기 요청 구현을 위한 핵심 기술의 근간은 바로 JAVASCRIPT 입니다.
그중에서도 XMLHttpRequest 객체가 있었기에 이를 구현할 수 있었습니다.
이를 통해 페이지 단위의 요청 없이도 그때 그때 필요한 요청과 응답을 받을 수 있게 된거죠.
그렇다면 실제로 해당 객체를 어떻게 생성할지에 대한 이야기를 본격적으로 해보겠습니다.
실제로 XMLHttpRequest 객체는 ECMASCRIPT 표준에서 지원하고 있는 내용은 아닙니다.
MS의 IE5 버젼부터 개발되어 사용되기 시작한 비표준 객체 중 하나 입니다.
그러나 다른 브라우저들도 구현 방식은 서로 조금씩 다르지만 이를 지원하고 있으며
구글 맵을 통해 AJAX가 대중적으로 사용되기 시작하면서 더 많은 브라우저들이 지원하고 있으며
현재는 일반적으로 사용되고 있는 대부분의 브라우저가 지원하는 기능이 되었습니다.
조금 뒤늦은 감이 없지않아 있지만 w3c 에서도 Working-Draft 가 진행중이라 합니다.
자 그러면 이제부터 본격적으로 실제 구현과 관련된 이야기를 해보겠습니다.
XMLHttpRequest 객체는 IE 에서 조차도 표준 객체가 아닌 activeX 객체중 하나였습니다.
즉 해당 객체를 생성하기 위해서는 아래와 같이 activeXObject 메소드를 사용하여야 합니다.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
그러나 이와는 달리 FireFox 나 Opera 등 에서는 window 의 내장객체로 지원을 하고 있습니다.
xmlhttp = new XMLHttpRequest();
따라서 위와 같이 사용법이 서로 다르기 때문에 브라우저에 맞게 이를 생성해야만 합니다.
참고로 IE7 부터는 이전의 방법은 물론 window의 내장객체 방식으로도 생성이 가능해졌습니다.
그렇다면 크로스 브라우징 가능한 XMLHttpRequest 객체를 어떻게 생성해야 할까요??
아래 보여드릴 소스 코드들은 IE6 이상, FF 1.5 이상, Opera 9.0 이상에서 테스트 된 내용입니다.
function getObjXMLHTTP(){ var xmlhttp = false; if(window.ActiveXObject){ try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2) { xmlhttp = false; } } }else if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = false; } return xmlhttp; }
위에 작성된 코드들에 대해 간략하게 부연 설명을 드리자면
getObjXMLHTTP() 함수는 XMLHttpRequest 객체를 생성하여 그 자체를 반환 합니다.
그러나 만약 해당 객체를 지원하지 않는 브라우저라면 false 를 반환하게 됩니다.
이때 var xmlhttp 와 같이 로컬 변수를 선언하여 객체를 생성함으로써
비동기 요청이 중복될 경우에도 객체가 중첩되어 사라지는것을 막을 수 있습니다.
우선 객체 생성을 위해 브라우저에서 어떠한 방식을 지원하고 있는지를 확인합니다.
만약 activeX 객체로 이를 지원하는 브라우저라면 new ActiveXObject() 메소드를 통해
window 내장객체로 지원하는 경우라면 new XMLHttpRequest() 객체로 이를 생성합니다.
실제로 IE7 은 후자의 경우도 정상적으로 지원하지만 IE 계열의 경우 전자의 방식으로
그외의 브라우저 에서는 후자의 방식을 사용하여 객체를 생성하도록 하였습니다.
차후에 IE7 사용자가 주류가 된다면 후자를 먼저 실행하는것이 좋은 방법이 될듯 합니다.
그리고 IE 에서도 사용자 환경에 따라 사용가능한 해당 객체명이 다를 수 있기 때문에
try ~ catch 구문을 사용하여 가급적 최신의 버젼의 객체를 사용할 수 있도록 했습니다.
MS 제품별로 지원 가능한 XML 파서 정보 는 해당 페이지를 참고하시기 바라며
일반적인 사용자의 IE 에서 사용될 수 있는 파서는 위에 사용한 2가지 입니다.
Msxml2.XMLHTTP(msxml3.dll)이 보다 최신의 버젼이며 Microsoft.XMLHTTP(msxml.dll)에 비해
기능 및 성능상의 장점이 있으므로 가급적 최신 버젼을 사용하는것이 좋습니다.
다음에는 이렇게 생성된 XMLHttpRequest 객체를 사용하여
데이터를 비동기로 주고 받을수 있도록 하는 AJAX 객체를 작성해 보도록 하겠습니다.
참고로 아래는 각 브라우저별로 지원하고 있는 xmlHttpRequest 객체에 대한 레퍼런스 정보이며
모질라 역시 MS의 IXMLHttpRequest 객체를 모방하는 것을 그 지향점으로 하고 있다고 합니다.
- AJAX 구현 javascript XMLHttpRequest cross browsing
포스트 본문
포스트 관련 키워드
댓글/트랙백
이글의 트랙백 주소: http://ez2web.com/blog/tb.asp?seqPost=92 입니다.UTF-8 인코딩 트랙백의 경우 데이터가 깨져 보이지만 24시간 이내에 정상적으로 수정 합니다.
시간이 지나도 정상적으로 트택백이 남겨지지 않으면 댓글로 남겨주세요 ㅜㅜ;