1. XMLHttpRequest (XHR) 객체
ㅇ 비동기 통신을 담당하는 자바스크립트 객체 임
- (동기 통신도, 사용 드물지만, 가능)
ㅇ XHR 객체의 역할
- 원격에 데이터를 요청하여 그 결과를 받아오며,
. 페이지 전체를 받지 않고도, 특정 URL로부터 페이지 일부에 만 필요한,
. 비교적 소량의 데이터 수신 가능
- DOM을 조작하며,
. 응답 결과 데이터에 따라, 웹페이지 내에 삽입/변경하는 등
2. XMLHttpRequest (XHR) 객체의 기본 사용법
ㅇ 기본 처리 흐름
- ① XMLHttpRequest 객체를 생성
. 例) var xhr = new XMLHttpRequest();
- ② 서버와의 처리 방법을 등록
. open 메서드 : 요청을 초기화
. 例) xhr.open(method, url);
- ③ 응답시, 이에 반응/처리하여야 할 이벤트 핸들러 작성
. 例) xhr.onreadystatechange = function() { ... };
- ④ 필요시, 요청 헤더를 설정
. setRequestHeader 메소드에 의한 Content-Type 설정 등
. 例) xhr.setRequestHeader("Content-Type","text/plain");
- ⑤ 요청을 전송하고, 통신을 시작함
. send 메서드 : 요청 전송 및 통신 시작
. 例) xhr.send(공백 또는 null 또는 data);
ㅇ XHR 객체의 생성 방법
- XMLHttpRequest 생성자를 통해, native XHR 객체를 생성함
- 例) var xhr = new XMLHttpRequest();
ㅇ XHR 객체에 이벤트 리스너 등록 방법
- 例 1) xhr.onreadystatechange = function() { ... };
- 例 2) xhr.addEventListener("readystatechange", function() { ... });
3. XHR 코드 작성 例
var xhr = new XMLHttpRequest();
xhr.open('GET','http://www.ktword.co.kr/ajax_test');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) { // (수신 완료, XMLHttpRequest.DONE : 4)
if (xhr.status === 200) { // (통신 성공)
console.log(xhr.responseText);
} else {
console.log('서버 에러 발생');
}
} else { // 통신 완료 전
console.log('통신중...');
}
}
xhr.send();
4. [참고사항]
ㅇ ☞ XHR 프로퍼티 참조
- readyState, response, responseText, responseType, responseXML, status, statusText,
timeout, withCredentials, onreadystatechange, ontimeout
ㅇ ☞ XHR 메소드 참조
- abort(), getAllResponseHeaders(), getResponseHeader(header), open(), send(data),
setRequestHeader(header,value)
ㅇ ☞ XHR 이벤트 참조
- 이벤트 유형 : abort, error, load, loadend, loadstart, progress, timeout 등
- 이벤트 핸들러 프로퍼티
. onreadystatechange, onloadstart, onprogress, onabort, onerror, onload, ontimeout,
onloadend