XHR(XMLHttpRequest)

• 자바스크립트에서 제공하는 객체 중 하나로, 서버와 HTTP 요청을 비동기적으로 처리하는데 사용
• XHR객체를 사용하면 웹페이지가 새로 고치지 않고도 서버로부터 데이터를 가져와 서버로 데이터를 보낼 수 있음

1. XMLHttpRequest 객체 생성
자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 생성자 함수를 호출하여 생성

const xhr = new XMLHttpRequset();

XMLHttpRequset 객체는 브라우저에서 제공하는 Web API이므로 브라우저 환경에서만 정상적으로 실행

2. XHR 객체의 프로퍼티와 메서드

readyState - UNSET : 0 / OPENED : 1 / HEADERS_RECEIVED : 2 / LOADING : 3 / DONE : 4

status : HTTP 요청에 대한 응답 상태를 나타내는 정수 ex) 200

statusText : HTTP 요청에 대한 응답 메시지를 나타내는 문자열

responseType : HTTP 응답 타입

response : HTTP 요청에 대한 응답

HTTP 요청 전송

1. XMLHttpRequset.prototype.open 메서드로 HTTP 요청 초기화
2. 필요에 따라 XMLHttpRequset.prototype.setRequestHeader 메서드로 특정 HTTP 요청의 헤더 값을 설정
3. XMLHttpRequset.prototype.send 메서드로 HTTP 요청을 전송

const xhr = new XMLHttpRequset(); // 객체 생성

xhr.open('GET', '/user'); //HTTP 요청 초기화('GET', 'POST', 'PUT', 'PATCH', 'DELETE')

xhr.setRequestHeader('content-type', 'application/json'); 
// 필요에 따라 HTTP 요청의 헤더값 설정
//클라이언트가 서버로 전송할 데이터의 MIME 타입(파일변환) 지정

xhr.send(); // HTTP 요청 전송
//GET 요청 : 데이터를 URL의 일부분인 쿼리 문자열로 서버 전송
//POST 요청 : 데이터(페이로드)를 요청 몸체에 담아 전송

HTTP 응답 처리

서버가 전송한 응답을 처리하려면 XMR 객체가 발생시키는 이벤트를 캐치해야함

onreadystatechange : readyState 프로퍼티 값이 변경된 경우
onload : http 요청이 성공적으로 완료한 경우
onerror : http요청에 에러가 발생한 경우

• onreadystatechange

  const xhr = new XMLHttpRequset(); // 객체 생성
  
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1'); //HTTP 요청 초기화
  
  xhr.send(); // HTTP 요청 전송
  
  //onreadystatechange 이벤트는 readyState(http 요청의 현재 상태) 프로퍼티가 변경될 때마다 발생
  xhr.onreadystatechange = () => {
      // 서버 응답 완료되지 않으면 아무런 처리❌
      if(xhr.readyState !== XMLHttpRequset.DONE) return; 
      //서버 응답 완료 시
      if(xhr.status === 200){
          console.log(JSON.parse(xhr.response)); // {"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}
      }else{
          console.error('Error', xhr.status, xhr.statusText);
      }
  };

• onload
  load 이벤트는 http 요청이 성공적으로 완료된 경우만 발생하므로 DONE 확인할 필요 없음

  const xhr = new XMLHttpRequset(); // 객체 생성
  
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1'); //HTTP 요청 초기화
  
  xhr.send(); // HTTP 요청 전송
  
  //onreadystatechante 이벤트는 readyState(http 요청의 현재 상태) 프로퍼티가 변경될 때마다 발생
  xhr.onload = () => {
      if(xhr.status === 200){
          console.log(JSON.parse(xhr.response)); // {"userId": 1, "id": 1, "title": "delectus aut autem", "completed": false}
      }else{
          console.error('Error', xhr.status, xhr.statusText);
      }
  };