[Javascript] AJAX 통신 방식 - XHR, Fetch API, AXIOS

AJAX( Asychronous Javascript And XML)

AJAX( Asychronous Javascript And XML)는 Javascript가 백엔드 서버(Flask)와 통신하는 방법 중 하나이다.

AJAX 통신은 비동기 통신이기 때문에 서로 다른 요청을 하더라도 응답을 대기하지 않아도 된다. 따라서 페이지를 리로드하지 않아도 HTML에 데이터를 받아오거나 업로드할 수 있는 것이다. 브라우저 전체가 아닌 일부만 수정할 때 AJAX 통신을 사용한다.

 

---

AJAX 통신을 구현하는 방법은 XHR, fetch API, AXIOS 등이 있다.

 

1. XHR (XMLHttpRequest)

XHR은 AJAX의 가장 기본적인 구현 방식으로, 브라우저에 내장된 객체를 사용하기 때문에 모든 브라우저에서 지원된다. 다만 비교적 구문이 복잡하여 구현하기 어려워 잘 사용하지 않는 추세다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200 || xhr.status === 201) {
            console.log(xhr.responseText);
        } else {
            console.error(xhr.responseText);
        }
    }
};
xhr.open('GET', 'https://api.example.com/data');
xhr.send();

 

2. Fetch API

Fetch API는 Promise 기반의 내장 API이다. Promise를 기반으로 하기 때문에 로직을 추가하고 처리하기 쉬우며 따로 설치가 필요하지 않다. 다만 fetch API를 지원하지 않는 브라우저가 존재하여 AXIOS에 비해 브라우저 호환성이 떨어지고 AXIOS보다 지원되는 기능이 적다.

 

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

 

3. AXIOS

AXIOS는 Promise 기반의 자바스크립트 서드 파티 라이브러리로 따로 설치해야 한다. 브라우저로부터 XHR를 만들기 때문에 브라우저 호환성이 뛰어나다. 또한 자동 JSON 변환, 요청 취소와 타임아웃 설정 등의 다양한 기능이 제공되어 사용하기 쉽다.

 

axios.get('https://api.example.com/data')
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.log(error);
  });