[JavaScript] XMLHttpRequest 란

XMLHttpRequest 란 무엇인가?

우리가 서버와 통신을 하기 위해서는 AJAX를 이용해서 정보를 받아옵니다. 

 

이 AJAX의 대표적인 API가 몇가지 있습니다.

 

대표적으로는 XMLHttpRequest, fetch API , jQuery 라이브러리의 ajax, axios 가 있는데,

그 중에서 가장 모체가 되는 XHLHttpRequest 에 대해서 알아보도록 하겠습니다.

 

XHLHttpRequest 특징

서두에서 XMLHttpRequest은 AJAX 통신을 하기 위한 API라고 하였는데요,

 

이 XMLHttpRequest가 있기 전에는 form을 이용해서 정보를 요청하고 응답받은 데이터와 함께 페이지를 다시 불러와야하는 비효율적인 면이 있었다고 합니다.

 

이러한 점을 보완하기 위해서 첫 AJAX API 로 XMLHttpRequest 가 생성하게 되었던 것이죠. jQuery 의 ajax와 fetch API는 그 이후에 생겨난 API입니다.

 

이 XMLHttpRequest 를 사용하면 페이지 전체를 새로고침하지 않고 원하는 데이터만 갱신하는 것이 가능해진다는 장점이 있습니다.

 

또한 이로 인해서 정보를 받아올 때 더 빠른 속도로 로딩할 수 있습니다.

 

XHLHttpRequest 예제

let httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = alertContents
httpRequest.open('POST', 'my_URL', true); 
// 첫번째 인자로 method
// 두번쨰 인자로 url
// 세번째 인자는 비동기처리 옵션 결정, 기본은 true

httpRequest.setRequestHeader('Content-Type', 'application/json');
//헤더를 설정합니다

httpRequest.send(); 
//send메소드의 인자로 보내려고 하는 데이터를 넣어줍니다.


function alertContents() { 
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
        let res = httpRequest.responseText;
        res= JSON.parse(res);
        
        console.log(res)

      } else {
        alert('request에 뭔가 문제가 있어요.');
      }
    }
}

onreadystatechange

onreadystatechange에 readystate 가 변경될때마다 호출되는 이벤트 핸들러를 등록할 수 있습니다.

onreadystatechange에 콜백함수를 등록하면, 통신 성공 혹은 실패로 통신상태가 변경될 때마다 XMLHttpRequest의 readystate가 변경되고 이를 감지해서 콜백함수를 실행시킬 수가 있습니다.

MDN에 의하면, onreadystatechange 이외의 부가적인 이벤트 핸들러가 다양한 브라우저에서 구현되었다고 설명하고 있습니다.

open

open메소드는 요청을 초기화 시켜 새롭게 형성된 request를 만듭니다.

setRequestHeader

HTTP 요청헤더의 값을 설정합니다. XMLHttpRequest 객체 하여 open 메서드와 send 메서드 사이에서 설정해야합니다.

send

요청을 전송합니다.