XHR 이란 ?
Javascript에서 XMLHttpRequest 객체를 사용하여 서버에 동기 또는 비동기식 요청을 보낼 수 있으며, 요청에 대한 응답 정보를 웹 페이지에 로드할 수 있다.
즉, 웹 페이지를 다시 로드하지 않아도 웹 페이지의 일부를 변경할 수 있다.
XMLHttpRequest() 객체 사용 방법 요약
- XMLHttpRequest 객체 생성
- open() 메서드로 요청에 필요한 정보 설정
- send() 메서드로 서버에 요청 보내기
- 응답에 대한 콜백 함수 생성
XMLHttpRequest 객체 생성
new 키워드를 이용해 XMLHttpRequest 객체를 생성한다
const res = new XMLHttpRequest();open() 메서드로 요청에 필요한 정보 설정
open() 메서드로 요청에 필요한 정보를 설정한다
res.open(method , url , [async,user,password]);- method(필수) : HTTP 요청 메서드 (GET,POST,PUT,DELETE 등)
- url(필수) : 요청 보낼 URL 문자열 또는 URL 객체
- async (선택) : true인 경우 비동기식 , false인 경우 동기식 (default : true)
- user & password : 기본 HTTP 인증을 위한 로그인 및 비밀번호 (default : null)
setRequestHeader() 메서드를 이용해 Request Header에 데이터 설정이 가능하다
res.setRequestHeader(header,value)- header (필수) : 헤더 이름
- value (필수) : 헤더 이름과 매핑되는 값
send() 메서드로 요청 보내기
send() 메서드를 이용해 서버에 요청을 보낼 수 있다.
const res = new XMLHttpRequest();
res.open("GET", 'url');
res.setRequestHeader('header', 'value');
res.send();
res.onload = () => {
console.log("IT LOADED");
console.log(res.response);
console.log(res.status);
console.log(res.statusText);
}
res.onerror = () => {
console.log("IT ERROR");
}- onload : 요청에 대해 성공적으로 응답을 받은 경우 실행
- onerror : 요청에 대해 응답을 받지 못한 경우 실행
- status : HTTP 상태 코드
- statusText : HTTP 상태 메시지
- response : 요청에 대한 응답
정리 💡
일반적으로 XMLHttpRequest 를 직접적으로 사용하는 경우는 별로 없다. 사용이 어렵고 콜백 함수를 중첩으로 작성해야 하기 때문에 복잡성도 증가하기 때문이다. 따라서 통상적으로 axios 혹은 Ajax 같은 HttpRequest 라이브러리를 사용한다.
또한 XMLHttpRequest를 사용하는 것도 좋지만 발전된 형태의 Fetch API를 사용하는 것이 좋다.
