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

(2019-02-08)
1. XHR 객체프로퍼티프로퍼티
     - readyState : 통신 상태 (읽기 전용)
        . 통신 상태가 바뀌면,
           .. 이 프로퍼티 값이 바뀌고, 
           .. 이때, 웹브라우저는 이를 감지하여, readystatechange 이벤트를 발생시킴
        . readyState의 (값 : 내용)
           .. 0 (UNSENT) : 초기화되지 않음 (open 메소드 미 호출)
           .. 1 (OPENED) : 로드 중 (open 메소드 호출됨)
           .. 2 (HEADERS_RECEIVED) : 로드 완료 (HTTP 헤더전송 받음)
           .. 3 (LOADING) : 응답 수신 중 (응답 메세지 본문을 전송 받는 중)
           .. 4 (DONE) : 수신 완료 (응답 완료됨)
     - onreadystatechange : 이벤트 처리기 (쓰기 가능)
        . 통신 상태가(readyState 값이) 변할 때 마다 호출되는 이벤트 처리기
        . 기타 다음과 같은 작업도 함께 수행 가능
           .. 응답 내용의 성공적 수신 확인
           .. 서버 오류 표시
           .. 서버와의 통신 중 표시

     - 응답 내용 프로퍼티 : response, responseText, responseXML (읽기 전용)
        . response : 응답 내용을 다양한 형식으로 가져올 수 있음 (읽기 전용)
        . responseText : 응답 내용을 텍스트(문자열) 형식으로 가져 옴 (읽기 전용)
        . responseXML :  응답 내용을 XML 형식의 객체로 가져 옴 (읽기 전용)
     - 응답 타입 프로퍼티 : responseType (읽기 전용)
        . 응답 타입 종류
           .. text : 텍스트 (기본값)
           .. json : JSON 형식
           .. arraybuffer : 형식화 배열
           .. blob : BLOB 객체
           .. document : HTML의 document 객체

     - status : 요청에 대한 HTTP 상태 코드 (읽기 전용)
     - 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 객체이벤트

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

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

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


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

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