[Javascript] XMLHttpRequest 기초 이해하기

📝 XMLHttpRequest란?

XMLHttpRequest는 서버와 상호작용하기 위해 사용되는 것으로 전체 페이지의 새로 고침 없이도 URL을 통해 데이터를 전송하거나 받아 올 수 있다.

📌 XMLHttpRequest 사용법

객체 생성

1) const xhr = new XMLHttpRequest();

요청 전송

2) xhr.open('GET', '/posts');

• open()은 XMLHttpRequest의 내장 함수
• open()을 통해 HTTP 요청 방식(첫번째 매개변수)과 요청 URL(두번째 매개변수)을 정의

  < HTTP 요청 방식 >

  1. GET : 리소스 요청
  2. POST : 리소스 생성
  3. PUT : 리소스 수정
  4. PATCH : 리소스 일부 수정
  5. DELETE : 리소스 삭제

3) xhr.setRequestHeader('content-type', 'application/json');

• 클라이언트에서 서버로 HTTP요청을 하기 전에 요청에 맞는 헤더 값을 설정
• 일반적으로 요청할 때 서버로 전송하는 데이터의 타입을 선언하기 위한 용도로 사용

4) xhr.send(JSON.stringify(data));

• 서버로 전송할 데이터가 있다면 send() 함수에 매개변수로 데이터를 전달
• 데이터가 오브젝트라면 JSON.stringify를 통해 문자열 형태로 변경해서 전송
• 전달된 데이터는 request의 body에 담겨서 전송
• GET으로 요청할 경우 send()의 매개변수로 데이터를 전달해도 전송이 안됨

응답 처리

5) xhr.onload = () => {
	if(xhr.status === 200) { 
		const res = JSON.parse(xhr.response); 
        console.log(res); 
    } else {
  		console.error(xhr.status, xhr.statusText);
    }
  }

• 응답데이터를 JSON.parse 함수의 JSON 객체로 변경
• error가 발생할 시 console.error(xhr.status, xhr.statusText)로 응답 상태와 응답메시지를 확인

  < 응답 상태 코드 : status code(200 ~ 500) >

  • 200번대 성공
  • 400 클라이언트 요청 잘못했을 때
  • 500 서버에서 에러발생

---

참고자료

• XMLHttpRequest
• [javascript] XMLHttpRequest
• mozilla.XMLHttpRequest