XHR 프로퍼티, XHR 메소드, XHR 이벤트

(2022-03-29)

1. XHR 객체프로퍼티

  ㅇ readyState : 통신 상태 (읽기 전용)
     - 통신 상태가 바뀌면, 이 프로퍼티 값이 바뀜
        . 이때, 웹브라우저는 이를 감지하여, readystatechange 이벤트를 발생시킴
     - readyState의 (값 : 내용)
        . 0 (UNSENT) : 초기화되지 않음 (open 메소드 호출 이전)
        . 1 (OPENED) : 로드 중 (open 메소드 호출 이후)
        . 2 (HEADERS_RECEIVED) : 로드 완료 (send 메소드 호출 이후, HTTP 헤더전송 받음)
        . 3 (LOADING) : 응답 수신 중 (응답 메세지 본문을 전송 받는 중)
        . 4 (DONE) : 수신 완료 (응답 완료됨)

  ㅇ onreadystatechange : 이벤트 처리기 (쓰기 가능)
     - 통신 상태가(readyState 값이) 변할 때 마다 호출되는 이벤트 처리기
        . 주로, 다음과 같은 작업을 수행
           .. 응답 결과 데이터에 따라, 웹페이지 내에 삽입/변경
        . 기타 다음과 같은 작업도 수행 가능
           .. 응답 내용의 성공적 수신 확인
           .. 서버 오류 표시
           .. 서버와의 통신 중 표시
     - 例 1) xhr.onreadystatechange = function() { ... };
     - 例 2) xhr.addEventListener("readystatechange", function() { ... });

  ㅇ 응답 내용 프로퍼티 : 응답 텍스트 또는 개체[JS] (읽기 전용)
     - response : 응답 내용을 다양한 형식으로 가져올 수 있음 (읽기 전용)
     - responseText : 응답 내용을 텍스트(문자열) 형식으로 가져 옴 (읽기 전용)
     - responseXML :  응답 내용을 XML 형식의 객체로 가져 옴 (읽기 전용)

  ㅇ 응답 타입 프로퍼티 : responseType (읽기 전용)
     - 응답 타입 종류
        . text : 텍스트 (기본값)
        . json : JSON 형식
        . arraybuffer : 형식화 배열
        . blob : Blob 객체
        . document : HTML의 document 객체

  ㅇ status : 요청에 대한 HTTP 상태 코드 (읽기 전용)
      . 200 : 요청 처리 성공
      . 401 : 인증 필요
      . 403 : 엑세스 거부됨
      . 404 : 요청 자원 존재 안함
      . 500 : 서버 내부 에러
      . 503 : 서버 이용 불가

  ㅇ statusText : 요청에 대한 상태 보충 메세지 (읽기 전용)

  ㅇ timeout : 요청에 걸리는 시간 (쓰기 가능)
  ㅇ ontimeout
  ㅇ withCredentials


2. XHR 객체메서드메서드
     - abort()
     - HTTP 응답 헤더 항목의 조회 : getAllResponseHeaders(), getResponseHeader(header)
     - open() : HTTP 요청을 형식에 맞게 초기화함
        . 例) xhr.open(method, url, [,async [,user [password]]]);
           .. method : HTTP 메소드 (GET,POST 등)
           .. url : 목적 URL에 대한, 상대 경로 주소
           .. async : 비동기 통신 여부 (기본값 true 이면, 비동기 통신. false 이면, 동기 통신)
           .. user : 인증시 사용자명
           .. password : 인증암호
     - send(data) : HTTP 요청을 전송함
        . HTTP 메소드가 GET 이면, 
           .. 따로 보낼 데이터가 없으면, null 로 설정
           .. 따로 보낼 데이터가 없으면, 쿼리 문자열로써 url 뒤 ? 이후에,
              "이름 = 값" 형태로 데이터를 보냄
        . HTTP 메소드가 POST 이면,
           .. 데이터를 "이름 = 값" 형태로 보냄
           .. 단, setRequestHeader 메소드Content-Type 헤더를 타입에 맞게 지정해야 함
     - setRequestHeader(header,value)
        . header : HTTP 헤더 항목
        . value : HTTP 헤더 항목의 값


3. XHR 객체이벤트

  ※ readystate/status 판정에 의하지 아니하여도,
     - 아래의 이벤트 발생 마다 그 처리를 달리 수행 가능

  ㅇ 요청 진행/성공 상황의 확인
     - loadstart : start 요청을 보낼시 
        . ("통신 시작"이라는 시작 메세지를 줄 때 유용)
     - progress : 데이터 송수신중
        . (보통, 50 ms 마다 발생하므로, "진행중"이라는 메세지를 줄 떄 유용)
     - load : 요청 성공하고, 응답을 가져올 수 있을시 (xhr.response 데이터 확인 가능시)
        . ("요청 성공 완료"라는 메세지를 줄 때 유용)

  ㅇ 요청 실패 상황의 확인
     - timeout : 요청 시간 초과시
     - abort : 요청 취소시
     - error : 요청 실패시 (네트워크 오류 등 발생시)

  ㅇ loadend : 성공/실패 관계없이 요청 완료시
     - 즉, load,timeout,abort,error 중 하나이면 발생

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


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"