XHR

xhr을 사용하는 이유는 페이지의 변화 없이 외부 데이터 수신 즉, 요청을 받기 위해서 우리는 xhr을 사용한다. 그러면 우리가 해야 할 일은 무엇일까? xhr을 사용하려면 우리가 xhr을 설정해줘야 한다. 즉, 정의되지 않은 xhr을 사용하려면 아무것도 발생하지 않기 때문이다. 그렇다면 우리가 먼저 해줘야 되는 것은 그것은 아마 당연하게도 xhr 객체를 만들어 줘야 한다. 우리는 xhr을 let xhr = new XMLHttpRequest();를 통해서 객체를 만들 수 있다. 이렇게 만들어진 객체는 아무것도 모르는 상태이다. 사람으로 따지면 갓난아기인 셈이다. 그러면 갓난아기에 관해 생각해볼까? 배우지 않은 아기가 한글을 말하고 걷는 것을 할 수 있을까? 아기가 태어나자마자 바로 말하고 걷을 수 있다면 신화 속 이야기지 않을까? 그렇다. 아기는 학습을 통해 말을 할 수 있고 걸을 수 있다. 즉, xhr도 지금 갓 태어난 신생아라고 볼 수 있기 때문에 무언가 해주기 위해서 학습과정이 필요하다. 그 학습 과정을 해주는 것이 xhr.open 함수를 만들어 주는 것. 그렇다면 open에 들어가는 매개변수는 어떤 것일까? '방식'과 '주소'이다. 여기서 방식은 메서드이며 xhr의 방식은 get과 post, delete 등이 있다. 그리고 주소는 request를 보내고자 하는 주소이며 이러한 요청을 처리할 주소로 xhr을 준비시킨다. 그러면 이렇게 준비하면 우리는 무엇을 해야 되는 것일까? 다시 한번 갓난아기에 관해 생각해보자. 갓난아기가 걸을 수 있게 되는 것을 배우고 나면 무엇을 할 수 있고 말을 할 수 있는 것을 배우고 나면 무엇을 할 수 있을까? 걷고 말할 수 있게 된다. 즉, 준비단계를 마쳤으니 뭔가를 할 수 있게 되는 것이다. 이것을 xhr의 관점에서는 xhr.send()라고 볼 수 있다. 여기서 우리는 또 한 번 생각해보자. 아기가 걷고 말하고 두 개를 한 번에 동시에 할 수 있을까? 아기의 관점으로 바라보는 것이다. 물론 동시에 할 수는 있지만 말을 하고 그다음에 걷고 이렇게 뭔가를 하나 마치고 다음 것을 하게 되는 게 일반적이지 않을까? 이렇게 상태가 변화할 때마다 무언가 할 수 있는 것을 지정해주는 즉, 상태의 변화에 따라 이벤트를 호출해주는 함수 이것이 바로 xhr.onreadystatechange이며 여기 안에 들어가는 함수를 통해 우리는 이벤트를 지정할 수 있다. 들어가는 함수에 대해 더 알아보자면 readyState에 관해 대해 판단을 지정할 수 있다. xhr.readyState는 0 1 2 3 4로 나타내 지는데 0은 객체가 만들어졌을 때 1은 open이 됐을 때 2는 send가 됐을 때 3은 send를 호출한 후 서버에 요청한 결과를 받아 올 때 즉, 로딩할 때이며 4는 서버에 요청한 결과를 직접적으로 받은 상태이며 결과는 성공이거나 실패로 볼 수 있다. 그러고 나서 우리의 최종 서버의 결과 즉, status 200과 300 사이면 서버 상태가 성공이므로 성공을 구현하게 되는 것이고 else면 실패가 나타나게 된다. 그렇다면 이제 내용을 토대로 xhr을 사용해보자.

---

let xhr = new XMLHttpRequest();

xhr.open("방식","주소");

//xhr의 객체에 상태가 변할 때 마다 실행됨.
xhr.onreadystatechange = () => {
	//xhr.readyState === 4로도 표시할 수 있지만 
    	//send를 통해 서버에 요청한 결과를 직접적인 상태를 나타낼 수 있는 것이
    	//XMLHttpRequest.done이므로 4의 값을 나타낸다.
	if(xhr.readyState === XMLHttpRequest.done){
    	if(xhr.status >= 200 && xhr.status <300) {
        //성공 구현부
        } else {
        //실패 구현부
        }
    
    }
};

xhr.send();

---

피드백은 언제나 환영입니다.