XHR(XMLHttpRequest)이란?

💡 XMLHttpRequest

브라우저는 주소창이나 HTML의 form 태그 또는 a태그를 통해 HTTP 요청 전송 기능을 기본 제공한다.
자바스크립트를 사용하여 HTTP요청을 전송하려면 XMLHttpRequest 객체를 사용 한다.

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

Web API인 XMLHttpRequest 객체는 HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다.

💡 HTTP

HTTP(;Hyper Text Transfer Protocol)는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규약을 일컫는다.

웹 문서간에 링크를 통해 연결할 수 있는 프로토콜이며, 문서 뿐 아니라 다음과 같은 여러 종류의 데이터를 폭 넓게 전송할 수 있다.

1. HTML, TEXT
2. Image, 음성, 영상, 파일
3. JSON, XML(API)
4. 거의 모든 형태의 데이터가 전송 가능

📑 XMLHttpRequest 객체 생성

XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성한다.
XMLHttpRequest 객체는 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행된다.

// XMLHttpRequest 객체 생성
const request = new XMLHttpRequest();
function onLoadListener(){
  console.log(request.responseText);
}
request.addEventListener("load", onLoadListener);
// HTTP 요청 초기화
request.open("GET", "http://test.com");
// HTTP 요청 전송
request.send();

위와 같이 짧은 코드의 경우 GET 메소드를 실행해서 결과 값을 받아올 수 있다.

위 코드에 test.com이 아닌 실제 api의 url주소를 넣어보고 나서,
chrome의 inspect창을 이용해서 XHR탭을 선택해주면 아래와 같이 정상적으로 GET 방식으로 request 요청을 확인할 수 있다.

나는 내 블로그 주소를 넣어서 확인해보았다.

📑 XHR을 Promise로 래핑하기

let request = obj => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', obj.url);   // HTTP 요청 초기화

        // HTTP 요청 성공 시(onload 이벤트 핸들러)
        xhr.onload = () =>{
            if(xhr.status === 200){
                console.log(xhr.response);
                resolve(xhr.response);
            }else{
                console.log(xhr.statusText);
                reject(xhr.statusText);
            }
        };
        xhr.send(); // HTTP 요청 전송
    });
}
request({url : "https://velog.io/@yeonhee314/posts"});

XMLHttpRequeest를 사용하여 비동기 HTTP GET요청을 보내는 request함수를 작성했다.
이 함수는 Promise를 반환한다.
Promise는 비동기 작업의 성공(resolve) 또는 실패(reject)을 처리할 수 있게 한다.

처음에 xhr.send(xhr.statusText);라고 사용했는데 수정했다.
xhr.send();는 서버로 요청하는 메서드인데, GET 요청에서는 보통 파라미터 없이 호출해야 한다.
왜냐하면 xhr.statusText는 서버의 응답 상태 메시지를 나타내므로, 요청을 보내기 전에 값이 존재하지 않아서 의미가 없다.

[참고한 글]
1. Promise로 XMLHttpRequest 래핑하기
2. XMLHttpRequest 로 return 값 받기 위해 promise 사용하기
3. XMLHttpRequest의 약속
4. XMLHttpRequest란?
5. 비동기, Promise, await, async 확실하게 이해하기
6.XHR(XMLHttpRequest)에 대해서 알아보도록 하겠습니다.
7. HTTP는 무엇일까요? - 기본 핵심 요약 총정리
8. MDN Using XMLHttpRequest