XMLHttpRequest   XMLHttpRequest 객체

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