[javascript] 자바스크립트에서 AJAX와 Fetch를 활용한 서버 통신 방법

22 Dec 2023

javascript

웹 애플리케이션을 개발할 때, 서버와의 데이터 통신은 매우 중요합니다. AJAX와 Fetch API는 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 도구들입니다.

AJAX란 무엇인가?

AJAX(Asynchronous JavaScript and XML)는 웹 페이지에서 서버와 데이터를 비동기적으로 교환하는 기술입니다. 이를 통해 페이지 리로드 없이도 데이터를 업데이트할 수 있습니다.

// AJAX를 사용한 GET 요청 예제
var xhr = new XMLHttpRequest();
xhr.open('GET', '/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('데이터를 불러오는 데 실패했습니다.');
  }
};
xhr.onerror = function() {
  console.log('요청에 실패했습니다.');
};
xhr.send();

Fetch API 소개

Fetch API는 AJAX의 대체제로, Promise 기반으로 좀 더 간결하고 강력한 기능을 제공합니다.

// Fetch API를 사용한 GET 요청 예제
fetch('/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('데이터를 불러오는 데 실패했습니다.');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log('요청에 실패했습니다.', error));

결론

서버와의 효율적이고 신속한 데이터 통신은 웹 애플리케이션의 핵심입니다. AJAX와 Fetch API는 둘 다 이를 가능하게 하는 강력한 도구들이며, 웹 개발자들은 이들을 효과적으로 사용하여 웹 애플리케이션의 성능을 향상시킬 수 있습니다.

더 자세한 내용은 MDN 웹 문서(AJAX 및 Fetch API)를 참고하시기 바랍니다.