[JavaScript 문법] 28일차: AJAX와 Fetch API

AJAX란?

AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 전체를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있도록 하는 비동기 기술입니다. 이를 통해 웹 애플리케이션의 속도와 사용성을 크게 향상시킬 수 있습니다.

XMLHttpRequest

XMLHttpRequest 객체는 AJAX 요청을 보내고 응답을 처리하는 데 사용됩니다. 이는 오래된 방식이지만 여전히 많은 프로젝트에서 사용되고 있습니다.

 

기본 사용법

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send();

예제: GET 요청

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

xhr.send();

예제: POST 요청

let xhr = new XMLHttpRequest();
let data = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1
});

xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 201) {
    let responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};

xhr.send(data);

Fetch API

Fetch API는 최신 브라우저에서 AJAX 요청을 보내고 응답을 처리하기 위한 보다 간편하고 강력한 방법을 제공합니다. Fetch API는 프로미스를 사용하여 비동기 작업을 처리합니다.

 

기본 사용법

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

예제: GET 요청

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

예제: POST 요청

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=UTF-8'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Fetch API의 장점과 단점

장점

1. 간결성: Fetch API는 코드가 간결하고 이해하기 쉽습니다.
2. 프로미스 사용: Fetch API는 프로미스를 사용하여 비동기 작업을 보다 쉽게 처리할 수 있습니다.
3. 더 많은 기능: Fetch API는 XMLHttpRequest보다 더 많은 기능을 제공합니다.

단점

1. 구형 브라우저 지원 부족: Fetch API는 구형 브라우저에서 지원되지 않습니다.
2. 기본적인 기능 부족: Fetch API는 XMLHttpRequest의 일부 기능(예: 진행 이벤트)들을 기본적으로 지원하지 않습니다.

AJAX와 Fetch API의 비교

특징	XMLHttpRequest	Fetch API
API 스타일	콜백 기반	프로미스 기반
코드 가독성	낮음	높음
브라우저 호환성	구형 브라우저 포함 대부분 지원	최신 브라우저에서 지원
기능	더 많은 기능 제공	일부 기본 기능 부족
사용 예제	복잡한 설정 필요	간결한 설정

결론

AJAX와 Fetch API는 비동기적으로 서버와 데이터를 주고받기 위한 두 가지 주요 방법입니다. XMLHttpRequest는 오래된 방식이지만 여전히 널리 사용되며, Fetch API는 최신 브라우저에서 더 간결하고 강력한 방법을 제공합니다. 이번 글에서는 XMLHttpRequest와 Fetch API의 기본 개념, 사용법, 장단점, 그리고 두 방법의 비교에 대해 배웠습니다. 다음 글에서는 에러 처리에 대해 알아보겠습니다.

다음 글에서 만나요!