XMLHttpRequest 객체

XMLHttpRequest 객체

비동기 통신을 위한 XMLHttpRequest 객체 사용방법을 적어보려한다.

지금까지 jQuery 플러그인의 $.ajax()로만 비동기 통신을 처리하다시피해서 XMLHttpRequest 객체를 사용하는 방법을 잊었다.

최근 다시 순수 Javascript문법으로 코드를 짜려고 노력하고 있다.

 XMLHttpRequest 객체 생성

가장먼저 비동기 통신을 위해서는 XMLHttpRequest객체를 사용해야하는데, 이 객체를 사용하기 위해서는 브라우저별로 객체 생성처리를 다르게 해야한다.

XMLHttpRequest는 브라우저를 통해 객체를 가져올 수 있는데, MS사의 IE 브라우저와 타 크롬, 파이어폭스, 오페라 등의 브라우저에서 제공하는 XMLRequest객체를 생성하는 방법이 다르다.

// 비동기 통신 처리를 위한 XMLHttpRequest 객체 구하기 함수
function getXMLHttpRequest() {
    // 브라우저가 IE일 경우 XMLHttpRequest 객체 구하기
    if(window.ActiveXObject)
    {
        try
        {
            return new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(e)
        {
            try
            {
                return new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(e2)
            {
                return null;
            }
        }
    }
    // IE외 브라우저에서 XMLHttpRequest 객체 구하기
    else if(window.XMLHttpRequest)
    {
        return new XMLHttpRequest();
    }
    else
    {
        return null;
    }
}

IE 브라우저는 "ActiveXObject()"로 객체를 생성할 수 있다. 심지어 IE 버전별로 객체를 생성하는 방법이 다르다. 대체 왜 그럴까...

그 외 브라우저는 "XMLHttpRequest()"로 객체를 생성할 수 있다.

 

 비동기 통신

XMLHttpRequest 객체를 생성하기 위한 함수를 정의했으니 이제 그 함수를 호출하고 비동기 통신을 처리해보자.

// 게시글 삭제 함수
function bbsDelete() {
    // 엘리먼트 요소를 ID를 식별자로하여 선택한다.
    var evt = document.getElementById('btn_delete');
    // 선택한 엘리먼트 요소에 클릭 이벤트 리스너를 등록하고 클릭 이벤트가 발생하면 익명함수가 실행된다.
    evt.addEventListener('click', function() {
        if(confirm('게시글을 삭제하시겠습니까?'))
        {
            // 서버로 비동기 요청을 보내기 위해서 XMLHttpRequest 객체를 생성한다.
            var httpRequest = getXMLHttpRequest();
            // XMLHttpRequest 객체 사용이 준비되면 익명함수를 작성한다. open()이 발생하고 send()가 발생할 때 이 함수가 실행된다.
            httpRequest.onreadystatechange = function() {
                // 1 = open()이 콜됨 / 2 = send()가 콜됨 헤더 사용이 가능한 상태 / 3 = responseText 데이터 다운로드
                if(httpRequest.readyState == 1 || httpRequest.readyState == 2 || httpRequest.readyState == 3)
                {
                    console.log(httpRequest.readyState);
                }
                // 4 = 처리 완료됨
                else if(httpRequest.readyState == 4)
                {
                    // 서버와 클라이언트간 비동기 통신이 완료되면 XMLHttpRequest객체의 status 속성을 통해 처리 상태를 확인할 수 있다.
                    // status가 200이면 통신완료된 상태
                    if(httpRequest.status == 200)
                    {
                        window.alert(httpRequest.responseText);
                        window.location.href = '/bbs/bbsList.do';
                    }
                    else
                    {
                        window.alert('처리 중 문제가 발생하였습니다. \n error: ' + httpRequest.status);
                    }
                }    
            };
            // 서버로 요청하기 위해 초기화한다.
            httpRequest.open('GET', '/bbs/bbsDelete.do?IDX='+idx, true);
            // 요청을 서버로 전달한다.
            httpRequest.send();
        }
    });
}

중요한건 순서인데 반드시 onreadystatechange 속성에 익명함수를 먼저 정의하고 그 후에 open(), send()를 순차적으로 수행해야한다.

open('Http Method', 'Server URL', '비동기 통신 유무')

Http Method에 GET 또는 POST를 정의하여 통신 방식을 정하고 통신 방식에 따라 Server URL에 쿼리스트링 방식으로 데이터를 전달한다.

* 만약 POST인 경우 서버로 전달할 데이터를 send()메소드에 인자로 등록하여 사용한다.

비동기 통신 유무는 true일 경우 비동기 통신, false일 경우 동기 통신 방식이다.