제이쿼리를 최대한 사용하지 않으려고 노력하고 있는 와중에 네트워크 요청을 해야 할 일이 생겨, 그리고 원래 사용하던 방식이 CORS에 자꾸 위배되는 바람에 가장 기본적인 JavaScript API 중에 사용할만한 것을 찾기 시작했다.
물론 XHR보다 상위 대체제인 Fetch API가 있긴하지만, 몇번 사용해본 경험도 있기도 하고 이번엔 다른것도 공부하면서 사용해볼겸 XHR을 선택해 사용해보기로 했다.
XHR이란?
- XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용된다.
- 페이지의 새로고침 없이 URL에서 데이터를 가져올 수 있다.
- AJAX 프로그래밍에 많이 사용된다.
즉, 비동기적으로 데이터를 주고 받을 수 있다는 의미. 제이쿼리에서의 ajax와 비슷하다 생각하면 될 것 같다.
XHR의 특징
이름에 XML이 들어가 XML만 가져올 수 있다 생각할 수 있지만 XMLHttpRequest는 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있다.
사용법
var xhr = new XMLHttpRequest();
// 형식타입은 "GET", "POST", "PUT", "DELETE"
// 비동기 여부는 bool 타입이며 true가 비동기, false가 동기 형식이며 default값는 true이다.
xhr.open('GET', url, 비동기여부(bool) );
//헤더에는 특정 api를 사용시 명세되어 있는 값들로 설정해준다.
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));
가장 기본적인 사용방법을 적어둔 코드이며 상황에 맞게 헤더를 추가하거나 결과값을 수정하면 된다.
크롬의 개발자 도구 - 네트워크 탭에서도 받은 값, 보낸 위치 등 상세한 정보를 확인할 수 있다.
출처
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest