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 중 하나이면 발생