[javascript] Ajax - XMLHttpRequest와 기본 원리 편

이 글은 『자바스크립트 딥 다이브』를 공부하며 정리한 내용입니다.

---

Ajax란

Ajax(Asynchronous JavaScript and XML)은 자바스크립트를 사용해 비동기적으로 서버와 데이터를 주고받아 웹페이지를 동적으로 갱신하는 기술이다.

즉, 전체 페이지를 새로 불러오지 않고 변경이 필요한 부분만 갱신할 수 있게 한다.

Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.
이 객체는 HTTP 요청을 비동기적으로 전송하고, 응답을 받을 수 있는 다양한 메서드와 프로퍼티를 제공한다.

---

JSON

Ajax와 함께 자주 사용되는 데이터 포맷은 JSON(JavaScript Object Notation)이다.
클라이언트와 서버 간의 데이터를 교환하기 위한 가볍고 읽기 쉬운 텍스트 형식이다.

• JSON.stringify() : 객체나 배열을 JSON 문자열로 변환한다.
  서버로 데이터를 전송할 때 사용.
• JSON.parse() : JSON 문자열을 자바스크립트 객체로 변환한다.
  서버로부터 받은 데이터를 코드에서 사용하기 위해 필요.

---

XMLHttpRequest 기본 개념

XMLHttpRequest는 브라우저에서 자바스크립트를 통해 HTTP 요청을 전송할 수 있도록 하는 옛날 방식의 비동기 통신 객체이다.
현재는 대부분 fetch() API를 사용하지만, Ajax의 기본 원리를 이해하기 위해 알아두면 좋다.

HTTP 요청을 전송하는 경우 다음 순서를 따른다.

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

1. 객체 생성

const xhr = new XMLHttpRequest();

2. 요청 초기화

xhr.open('GET', '/users');

• 첫 번째 인수: HTTP 메서드 (GET, POST, PUT, DELETE 등)
• 두 번째 인수: 요청할 URL

HTTP 메서드
1. GET : 모든/특정 리소스 취득
2. POST : 리소스 생성
3. PUT : 리소스의 전체 교체
4. PATCH : 리소스의 일부 수정
5. DELETE : 모든/ 특정 리소스 삭제

3. 요청 전송

xhr.send(JSON.stringify({ id: 1 }));

• GET 요청은 데이터를 URL 쿼리로 전송.
• POST 요청은 send()의 인자로 데이터를 전달.

4. 응답 처리

xhr.onload = () => {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
  } else {
    console.error('요청 실패', xhr.status);
  }
};

---

XMLHpptRequest 객체의 프로퍼티와 메서드

책에서 중요하다고 표기한 내용만 기술하였다.

1. XMLHpptRequest 객체의 프로토타입 프로퍼티

1. readyState : HTTP 요청의 현재 상태를 나타내는 정수. 다음과 같은 XMLHpptRequest의 정적 프로퍼티를 값으로 갖는다.
   • UNSENT : 0
   • OPENED : 1
   • HEADERS_RECEIVED : 2
   • LOADING : 3
   • DONE : 4
2. status : HTTP 요청에 대한 응답 상태를 나타내는 정수
3. statusText : HPPT 요청에 대한 응답 메시지를 나타내는 문자열
   • 예) "OK"
4. responseType : HTTP 응답 타입
   • 예) document, json, text...
5. response : HTTP 요청에 대한 응답 몸체 (response body), responseType 타입에 따라 다르다.

2. XMLHpptRequest 객체의 이벤트 핸들러 프로퍼티

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

3. XMLHpptRequest 객체의 메서드

1. open : HTTP 요청 초기화
2. send : HTTP 요청 전송
3. abort : 이미 전송된 HTTP 요청 중단
4. setRequestHeader : 특정 HTTP 요청 헤더의 값을 설정

4. XMLHpptRequest 객체의 정적 프로퍼티

1. UNSENT(0) : open 메서드 호출 이전
2. OPENED(1) : open 메서드 호출 이후
3. HEADERS_RECEIVED(2) : send 메서드 호출 이후
4. LOADING(3) : 서버 응답 중(응답 데이터 미완성 상태)
5. DONE(4) : 서버 응답 완료

---

요약

• Ajax: 페이지 새로고침 없이 서버와 통신하는 비동기 방식.
• JSON: 서버-클라이언트 간 데이터 교환 포맷.
• XMLHttpRequest: Ajax의 기반이 되는 구 방식 Web API.
  - 실무에서는 fetch()나 Axios 같은 최신 API를 사용하는 것이 일반적이다.