[JavaScript] Ajax & XMLHttpRequest을 이용하여 서버 요청하기

Ajax(Asynchronous JavaScript and XML)

JavaScript 기반의 비동기적으로 데이터를 처리하는 기술
페이지 전체를 새로고침하지 않고 브라우저 상에서 사용자의 동작에 따라 웹 페이지의 일부분을 업데이트 할 수 있도록 한다.
Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.
 
1. 사용자의 이벤트 발생
2. JS가 XMLHttpRequest를 생성 후, 서버에게 요청 후 응답 받음
3. 반환 받은 데이터를 통해 특정 부분 업데이트
 
여기서 클라이언트와 서버는 JSON 형식의 데이터를 주고 받는다.
 

JSON이란?

클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다. 기존의 XML 데이터 포맷으로 통신하는 과정이 복잡하다고 느껴져서 더글라스 클락포드 라는 사람이 JSON을 만들었다고 한다. (감사합니다...)

{
  "name": "Lee",
  "age": 20,
  "alive": true,
  "hobby": ["traveling", "tennis"]
}

 
하지만 JSON 데이터를 클라이언트와 서버 간 주고 받기 위해서는 데이터를 직렬화/역직렬화를 해주어야 한다.
 

직렬화

클라이언트가 서버로 객체를 전송하기 위해 객체를 문자열화해야 한다. => 직렬화(serializing)
JSON.stringify 메서드 사용
 

역직렬화

서버로부터 받은 데이터는 문자열이기에 이를 클라이언트에서 사용할 수 있도록 문자열의 데이터를 객체화해야 한다. => 역직렬화(deserializing)
JSON.parse 메서드 사용
 

XMLHttpRequest란?

JavaScript를 통해 HTTP 요청을 하기 위해선 XMLHttpRequest 객체를 사용해야 한다.
XMLHttpRequest 객체는 HTTP 요청 전송과 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다.
 

XMLHttpRequest 객체 생성

// 생성자 함수를 통해 XMLHttpRequest 인스턴스(객체) 생성
const xhr = new XMLHttpRequest();

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

다음은 주로 많이 사용되는 메서드와 볼드체를 정리해봤다.

XMLHttpRequest 객체의 메서드

메서드	설명
open	HTTP 요청 초기화
send	HTTP 요청 전송
abort	이미 전송된 HTTP 요청 중단
setRequestHeader	특정 HTTP 요청 헤더의 값을 설정
getResponseHeader	특정 HTTP 요청 헤더의 값을 문자열로 반환

XMLHttpRequest 객체의 프로토타입 프로퍼티

프로토타입 프로퍼티	설명
readyState	HTTP 요청의 현재 상태를 나타내는 정수 UNSENT: 0 OPENED: 1 HEADERS_RECEIVED: 2 LOADING: 3 DONE: 4
status	HTTP 요청에 대한 응답 상태(HTTP 상태 코드)를 나타내는 정수 ex) 200, 500...
statusText	HTTP 요청에 대한 응답 메시지를 나타내는 문자열
responseType	HTTP 응답 타입 ex) document, json, text, blob, arraybuffer...
response	HTTP 요청에 대한 응답 body, responseType에 따라 타입이 다르다.
responseText	서버가 전송한 HTTP 요청에 대한 응답 문자열

XMLHttpRequest 객체의 이벤트 핸들러 프로퍼티

이벤트 핸들러 프로퍼티	설명
onreadystatechange	readyState 프로퍼티 값이 변경된 경우
onerror	HTTP 요청에 에러가 발생한 경우
onprogress	HTTP 요청에 대한 응답을 받는 도중 주기적으로 발생
onload	HTTP 요청이 성공적으로 완료한 경우

XMLHttpRequest 객체의 정적 프로퍼티

정적 프로퍼티	값	설명
DONE	4	서버 응답 완료

핵심 코드

// 1. Ajax API인 XMLHttpRequest() 인스턴스(객체) 생성
const xhr = new XMLHttpRequest();

console.log(xhr);

//2. 서버로부터의 응답이 완료되었는지 확인

// 로드되었을 경우 동작할 이벤트 로직을 함수 형태로 추가
xhr.onload = () => {
  // 객체가 가진 프로퍼티 기반으로 이벤트 추가
  // 요청 처리가 완료되었고, 상태 코드가 200일 경우
  if (xhr.readyState === xhr.DONE && xhr.status === 200) {
    const responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};

//3. 실제 요청을 준비하는 코드(open())

// 요청을 전송할 서버의 포인트
const REQUEST_URL = "https://jsonplaceholder.typicode.com/users/1";
xhr.open("GET", REQUEST_URL);

//4. 실제 요청 전송
xhr.send();