XHR(XMLHttpRequest)에 대해서 알아보도록 하겠습니다.

Javascript를 디버깅하다가 보게 되는 Chrome의 console창에 보게 되면

Network탭이 있습니다.

여기서 XHR만 따로 선택해서 볼 수 있는데요.

오늘은 이 XHR에 대해 정리해 보도록 하겠습니다.

1. XHR

XHR은 XMLHttpReuqest의 약자인데요.

Ajax와 같이 페이지를 리프레쉬하지 않고서도 서버와 데이터를 받아오는 등의 인터랙션을 하기위해서 사용합니다.

1-1. xhr의 간단한 구현

xhr은 구현도 매우 간단한데요.

아래와 같이 짧은 코드면 get메소드를 실행해서 결과값을 받아올 수 있습니다.

const request = new XMLHttpRequest();

function onLoadListener(){

console.log(request.responseText);

}

request.addEventListener("load", onLoadListener);

request.open("GET", "http://test.com");

request.send();

test.com이 아닌 실제 api의 url주소를 넣어보고 나서,

chrome의 inspect창을 이용해서, 

XHR탭을 선택해 주면, 아래와 같이 정상적으로 get방식으로 request가 정상적으로 간것을 확인할 수 있습니다.

1-2. readyState을 이용한 구현

XHR의 readyState는 다음과 같이 구분할 수 있는데요.

이 상태에 따라서 구현을 해 볼 수 있습니다.

3부터는 데이터가 들어오고 있는 것입니다.

0	UNSENT	아직 open()은 호출 않되었고, client만 생성된 상태입니다.
1	OPENED	open()메소드가 호출되었음을 의미합니다.
2	HEADERS_RECEIVED	send()가 호출되었다는 의미입니다.  이 상태에서는 headers나 status값에 접근이 가능합니다.
3	LOADING	로딩되고 있음. responseText에 데이터가 들어오고 있음을 의미합니다.
4	DONE	말 그대로 실행이 완료됨을 의미

var resText;

const xhr = new XMLHttpRequest(),

method = "GET",

url = "http://test.com";

xhr.open(method, url, true);

xhr.onreadystatechange = function () {

console.log('xhr.readyState', xhr.readyState);  

if(xhr.readyState > 2) {

newTextReceived =  

xhr.responseText.  

substring(lastSize);  

lastSize =  

xhr.responseText.length;  

callback(newTextReceived);

}

if(xhr.readyState === 4 && xhr.status === 200) {

    console.log(xhr.responseText);

xhr.responseText.substring(resText);

  }

};

xhr.send();

관련해서 좀 더 깊은 정보는 MDN의 문서에서 찾아 볼 수 있는데요.

아래링크를 참조해 주시면 됩니다.

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest