[JavaScript] XMLHttpRequest 정리

📝 객체 생성

const xhr = new XMLHttpRequest();

• 브라우저 환경에서만 정상적으로 작동되며, node.js 환경에서는 제공되지 않음

---

📝 요청 전송

📌 open( ) 함수

• 클라이언트(브라우저)에서 서버로 요청을 보내기 위해서는 HTTP Method, 요청 URL을 정의하는 것부터 시작함.

• 내장 함수인 open( )을 이용.

xhr.open(HTTP Method, URL 정의, 비동기 여부(기본값 true));

✔ HTTP Method (HTTP 요청 방식)

• GET : 리소스 요청 (조회)
• POST : 리소스 생성
• PUT : 리소스 수정
• PATCH : 리소스 일부 수정
• DELETE : 리소스 삭제

---

📌 setRequestHeader( ) 함수

• 요청 헤더 값 설정
• 일반적으로 요청할 때 서버로 전송하는 데이터의 타입을 선언하기 위한 용도로 많이 쓰임

xhr.setRequestHeader('content-type', content-type 값);

✔ content-type 값 종류

• application/json : json 데이터 전송
• text/plain : 텍스트 데이터 전송
• multipart/form-data : 파일 전송

---

📌 send( ) 함수

• 요청에 필요한 정의가 끝나면 최종적으로 send() 함수를 통해 요청을 보내게 됨
• 서버로 전송할 데이터가 있다면 매개변수로 데이터를 전달

xhr.send(문자열);

✔ JSON.stringify( ) 함수

• 오브젝트 데이터를 문자열 형태로 변경하는 함수

---

📝 응답 처리

• XMLHttpRequest 객체가 발생시키는 이벤트를 통해 서버가 전송한 응답을 처리할 수 있음

---