[JavaScript] XMLHttpRequest 사용하기

■ XMLHttpRequest 란? 

웹 페이지에서 서버와 통신을 하여 데이터를 요청 및 응답받기 위한 객체입니다. 이 객체를 사용하면 웹 페이지 전체를 다시 로딩하지 않고, 일부분만을 갱신할 수 있습니다. 

 

 

■ XMLHttpRequest 주요 프로퍼티

1. readyState

XMLHttpRequest 객체의 현재 상태를 나타냅니다. 객체의 값은 다음과 같이 변화합니다.

값	의미	설명
0	UNSENT	XMLHttpRequest 객체가 생성된 상태
1	OPENED	open() 메소드가 호출된 상태
2	HEADERS_RECEIVED	send() 메소드 호출 후, 서버에 요청한 결과의 Header를 수신한 상태
3	LOADING	send() 메소드 호출 후, 서버에 요청한 결과를 받는 중인 상태
4	DONE	서버에 요청한 결과를 받은 상태

 

2. status

서버의 문서 상태를 나타냅니다.

값	설명
200	서버에 문서 존재
404	서버에 문서 미존재
0	네트워크 에러

 

3. responseText

서버에 요청하여 응답받은 데이터를 문자열로 저장합니다.

 

4. responseXML

서버에 요청하여 응답받은 데이터를 XML DOM 객체에 저장합니다.

 

 

■ 사용예제 

// XMLHttpRequest 객체 생성
var request = new XMLHttpRequest();       

// onreadystatechange 이벤트 핸들러에 함수 설정
request.onreadystatechange = function() { 

    // 서버상에 문서가 존재하고, 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었을 때
    if(this.status == 200 && this.readyState == this.DONE) 
    {
        // 요청한 데이터를 문자열로 반환
        console.log( request.responseText );            
    }

};

// 비동기식 요청 (세번째 인수 => true)
request.open("GET", "http://localhost:8000/admin/test/1234", true);
request.send();