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
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
  7.   정보기술(IT)
        1. 정보기술
    1.   전산기초
    2.   컴퓨터구조
    3.   프로그래밍
          1. 프로그램, 프로그래밍
          2. 프로그래밍 기법
      1.   프로그래밍 언어론
      2.   구조적 프로그래밍
      3.   객체지향 프로그래밍
      4.   자료표현코드
      5.   자료구조
      6.   알고리즘
      7.   시스템 소프트웨어
      8.   프로그래밍언어 종류
            1. 프로그래밍 언어
        1.   C
        2.   C++
        3.   자바(Java)
        4.   자바스크립트
              1. JavaScript
              2. JS 기초 문법
          1.   JS 변수,타입,논리식
          2.   JS 연산자
          3.   JS 함수
          4.   JS 객체
          5.   JS 배열/Map/Set
          6.   JS 활용
          7.   JS 웹문서 제어
                1. 웹문서 내 JS
                2. 동일 출처 정책
            1.   JS Window 객체
            2.   JS DOM 제어
            3.   JS 이벤트
            4.   Ajax
              1.   1. Ajax
                  2. XMLHttpRequest 객체
                  3. XHR 프로퍼티,메소드,이벤트
                  4. JSON
            5.   jQuery
        5.   PHP
        6.   파이썬
        7.   (기타 언어)
      9.   프로그래밍 기타일반
    4.   데이터베이스
    5.   소프트웨어 공학
    6.   운영체제
    7.   정보보호/보안
    8.   IT 기타기술
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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