웹 개발 XHR

김지원·2022년 8월 19일

WebDevelop2

목록 보기

32/34

XHR

: XHR(XML Http Request) 혹은 Ajax(Asynchronous Javascript And XML) 이라 함.

XHR은 현재 페이지 변화없이 비동기적으로 특정 요청을 보내고 응답을 받기 위해 존재하는 기술이다.

XMLHttpReqeust 타입의 객체를 통해 접근한다.
const xhr = new XMLHttpRequest(); // 객체화

<body>
    <button class="button" id="requestButton">IP주소 확인하기</button>
    <span class="ip" id="ipValue">아직 확인하지 않았습니다.</span>
    <br>
    <input value="페이지가 변하지 않았다는 증거">
</body>

해당 Html으로 공부해보자.

정적 속성

[0] UNSET

: XMLHttpRequest 객체의 준비 상태 중 하나로, 객체화가 이루어진 직후 상태이다. 정수형으로 0으로 표시한다.

[1] OPENED

: XMLHttpRequest 객체에 대해 open() 메서드를 호출한 직후의 상태이다.

[2] HEADERS_RECEIVED

: XMLHttpRequest 객체에 대해 send() 메서드를 호출한 직후, 서버와의 핸드 셰이크(Hand-Shake)가 이루어진 상황이다.
8분 완료된 상황은 아니고 서로에 대해서 알고 있는 상황

[3] LOADING

: 요청에 대한 응답값을 받아오고 있는 상황.

물을 떠오고 있는 상황

[4] DONE

: 요청과 응답이 모두 종료된 상황

물을 떠와서 건내주면 종료

이 5개의 상황이 변할 때 함수를 onreadystatechange에 때려 넣는다.

비정적 속성

onreadystatechange

: XMLHttpRequest 객체의 상태가 변화했을 때 실행할 함수를 지정한다.

readyState

: XMLHttpRequest 객체의 준비 상태이다.

status

: XMLHTttpRequest 객체의 HTTP 상태 코드이다. (200,400,403, 404, 405,
500 등)

responseText

: XMLHttpRequest 객체가 가지고 있는 문자열 응답 결과 내용이다.

비정적 메서드

open(m, t)

: 전달된 m타입의 방식(Method)으로 t주소에 요청을 보낸다고 설정.
const requestButton = window.document.getElementById('requestButton');
requestButton.addEventListener('click', ()=> {
    const xhr = new XMLHttpRequest(); // 객체화
    xhr.open('GET', 'http://api.ipify.org/');
});
이렇게 쓴다고 요청이 나가는 것은 아니다.

send(f?)

: 준비된 HTTPXMLHttpRequest 객체에 대해 실제 요청을 전송한다. 이떄 f는 같이 전송할 데이터로, 없어도 상관없음

if (xhr.readyState === XMLHttpRequest.DONE) {}
if (xhr.readyState === 4) {} 
요청에 대한 응답이 끝났니? 라고 물어보는 것.

200 / 404 둘다 완료 상황임으로 DONE 가지고 이 두개중에 어떤 방식으로 끝났는지는 알 수 없다. 아래로 가자.

if (xhr.status >= 200 && xhr.status < 300)
우리가 보낸 요청이 정상적으로 돌아왔다면

이렇게 까지 작성했을 때 요청 보낸 적이 없기 떄문에 onreadystatechange 을 하더라도 아무런 일도 발생하지 않느다.
xhr.send();

xhr.send(); 가 onreadystatechange 하기 전에 먼저 실행이 된다.
이제 버튼을 누르게 되면 ip주소가 불러와지게 된다.

<srcipt>
const requestButton = window.document.getElementById('requestButton');
const ipValue = window.document.getElementById('ipValue');
requestButton.addEventListener('click', ()=> {
    ipValue,innerText = '잠시만 기다려 주세요...';
    const xhr = new XMLHttpRequest(); // 객체화
    xhr.open('GET', 'http://api.ipify.org/');
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) { // 요청에 대한 응답이 끝났니? 라고 물어본다.
            let ip;
            if (xhr.status >= 200 && xhr.status < 300) {
                const responseText = xhr.responseText;
                ip = responseText;
            } else {
                ip = `[${xhr.status}] IP 주소를 불러오지 못했습니다.`;
            }
            ipValue.innerText = ip;
        }
    };
    xhr.send();
});
</srcipt>

const xhr = new XMLHttpRequst();
xhr.open(메서드, 주소);
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
 	  if(xhr.status >= 200 && xhr.status < 300) {
  		  // 성공 로직
  	  } else {
        // 실패 로직
      }
   }
};
xhr.send();