XMLHttpRequest   XMLHttpRequest 객체

(2019-02-08)

XHR, XML HTTP Request

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 프로퍼티, XHR 메소드, XHR 이벤트 참조


[Ajax] 1. Ajax 2. XMLHttpRequest 객체 3. XHR 프로퍼티,메소드,이벤트 4. JSON

 
        최근수정     요약목록     참고문헌