[JavaScript] XHR (XML Http Request)

XHR 이란?

자바스크립트의 XMLHttpRequest 객체를 통해 구현 할 수 있다. AJAX 라고 부르기도 한다. 페이지 새로고침 없이 , 비동기적으로 서버에 요청을 보내고 응답을 받아오기 위해 사용한다.

 

구조

 

 

속성과 메서드, 이벤트

정적 속성
- UNSENT : XHR 객체의 readyState 속성 값으로 0과 같고, XHR 객체가 객체화된 후 아무런 동작을 하지 않은 초기 상태이다.
- OPENED : XHR 객체의 readyState 속성 값으로 1과 같고, open 메서드 호출 후의 상태이다.
- HEADERS_RECEIVED : XHR 객체의 readyState 속성 값으로 2과 같고, send 메서드 호출 후 서버와의 연결을 수립한 상태이다.
- LOADING : XHR 객체의 readyState 속성 값으로 3과 같고, 서버의 응답이 수신되기 시작한 상태이다.
- DONE : XHR 객체의 readyState 속성 값으로 4과 같고, XHR 통신이 성공 여부와 관계 없이 종료되었음을 의미한다.(통신 성공 여부는
status 속성 값이 200 이상 300 미만인지의 여부로 판단해야 한다.)


객체 속성
- readyState : XHR 객체의 대기 상태(숫자)이다.
- responseText : 서버가 응답으로 전송한 문자열 데이터이다.
- status : XHR 객체의 HTTP 상태 코드이다.
* 200 : OK . 정상상태 ( 200 이상 300 미만의 값을 정상 상태로 간주한다. )
* 400 : Bad Request . 서버가 요청하고 있는 데이터를 클라이언트가 누락하였거나 그 데이터의 형태가 잘못되었음을 의미한다.
* 404 : Not Found . 해당 경로에 대한 맵핑(엔드포인트)이 서버에 존재하지 않는다는 의미이다.
* 405 : Method Not Allowed . 경로는 존재하지만 해당 요청 방식(Method)으로 접근할 수 없다는 의미이다.
* 500 : Internal Server Error . 요청을 처리하는 도중 서버 내부에서 오류가 발생하였다는 의미이다.


객체 메서드
- abort( ) : send 메서드 호출 이후 요청에 대한 응답 대기를 취소한다.
- open(m, u) : 요청을 보낼 준비를 하기 위해 호출한다. 요청을 보낼 방식(Method)인 문자열을 m, 주소인 문자열을 u 에 전달한다.
- send(d) : 요청을 실질적으로 전송한다. 이 때 d 는 요청에 함께 보낼 데이터이며, 보낼 데이터가 없다면, 생략가능하다. 단 요청방식
  (open 메서드의 m 인자)이 GET 일 경우 데이터 인자( d ) 전달이 불가능하다.


객체 이벤트
- onabort : 응답 대기 상태에서 abort 메서드가 호출되었을 때 실행할 이벤트 함수
- onerror : 요청 도중 오류가 발생하였을 때 실행할 이벤트 함수
- onprogress : 서버로 부터 데이터를 수신 받을 때 마다 실행할 이벤트 함수
- onreadystatechange : XHR 객체의 readyState 속성 값이 변할 때 마다 실행할 이벤트 함수
- ontimeout : 응답 대기 시간이 지정한 제한 시간을 초과하엿을 때 실행할 이벤트 함수

 

 

 

실습

 

요청을 하기 위해 보낼 준비를 하는 메서드 open 부분의 저 주소는 현재 내 컴퓨터의 아이피 주소를 반환하는 주소이다.

xhr.readyState는 주로 0,1, 2, 3, 4를 리턴하는데, 이는 정적 속성 부분을 나타내는 숫자이다. 호출, 호출 수 수신 등등

xhr.status는 XHR 객체의 대기 상태인데, 200일 경우 요청 성공, 그 외에는 요청 실패이다.

xhr.responseText는 불러온 요청을 문자열로 반환된 상태이다. 

 

 

 

버튼을 누르고 네트워크에 가면, json 형식의 요청이 왔는데, 응답 부분을 누르면 오브젝트 형식의 값이 뜬다.

저 값을 문자열로 반환된 상태로 불러오는 것이 xhr.responseText이다. 이를 풀기 위해서는 JSON.parse( ) 메서드를 쓰면 된다.