XMLHttpRequest 객체

웹브라우저의 주요 API 중 하나. 서버에서 데이터를 요청하는 데 사용하며, 페이지 새로고침 없이 업데이트가 가능합니다. (서버에서 데이터 요청, 수신은 페이지 로드 후, 백그라운드에서 서버로 데이터 보내기에 사용)

 

일반적인 JS 에서의 XMLHttpRequest 객체의 사용 방식

 

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

// 객체가 변경되면 실행할 것
xhttp.onreadystatechange = function() {
	// 4와 200이면 응답이 준비된 것
    if (this.readyState == 4 && this.status == 200) {
       // 요청한 데이터를 문자열로 반환
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};

// 서버에 비동기식 요청 전송
xhttp.open("GET", "filename", true);
xhttp.send();

 

readyState 의 반환값

0 : 객체 생성
1 : open() 메소드 실행 성공
2 : 모든 요청에 대한 응답 도착
3 : 요청 데이터 처리중
4 : 데이터 처리 완료 후 응답 준비 단계

 

status 반환값

200 : 서버에 문서가 존재
404 : 서버에 문서가 존재x

 

참고로, responseText 프로퍼티는 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환합니다. responseXML프로퍼티는 응답으로 받은 데이터를 XML DOM 객체로 반환합니다.