[javascript] XMLHttpRequest 객체 호환성 구현

최신의 웹브라우저들은 자바스크립트 XMLHttpRequest 객체를 잘 지원합니다.

국내의 경우 공공기관 등을 통해 아직 인터넷 익스플로러 10/11 과 같은 구 웹브라우저가 적지 않게 사용되고 있습니다.

구 브라우저들은 표준 XMLHttpRequest 객체를 지원하지 않습니다.

특히 인터넷 익스플로러는 독자 규격의 비동기 객체를 사용하기 때문에 표준 자바스크립트 XMLHttpRequest 를 사용할 수 없습니다.

웹브라우저 호환성이 필요한 경우, 자바스크립트 코드로 비동기 통신을 한다면 이런 비호환성 문제는 해결을 해야 합니다.

짧은 함수를 구현해 인터넷 익스플로러 여부를 체크하고, 웹브라우저에 맞는 XMLHttpRequest 비동기 객체를 반환받아보겠습니다.

letisIE=false;
function getXMLHttpRequest(){
    letxhr=false;
    try{
        xhr=newXMLHttpRequest();
    }
    catch(err1){
        //인터넷익스플로러비동기객체생성체크
        try{
            xhr=newActiveXObject("Msxml2.XMLHTTP");
            isIE=true;
        }catch(err2){
            try{
                xhr=newActiveXObject("Microsoft.XMLHTTP");
                isIE=true;
            }catch(err3){
                xhr=false;
            }
        }
    }
    returnxhr;
}
letajax=getXMLHttpRequest();

isIE 는 전역 변수로 인터넷 익스플로러 여부를 체크하는 불리언 값입니다.

인터넷 익스플로러인 경우 XMLHttpRequest 객체 외에도 예외 처리를 하는 부분들이 다수 존재하게 되기 때문에 추가의 인터넷 익스플로러 확인 작업을 하지 않아도 되게 나중을 위한 값을 기록하는 용도입니다.

try ~ catch 로 예외처리를 구현해서 웹브라우저에 맞는 XMLHttpRequest 객체를 생성해 반환합니다.

인터넷 익스플로러는 다음처럼 액티브X 객체로부터 XMLHttpRequest 객체를 가져와야 합니다.

xhr = new ActiveXObject("Microsoft.XMLHTTP");

마지막 행에서 ajax 변수에 객체를 받아서 비동기 요청을 호출하면 됩니다.