[javascript] 서버에서 비동기로 데이터를 받아오는 방법

11 Dec 2023

javascript

서버에서 비동기적으로 데이터를 받아오는 방법에는 여러 가지가 있습니다. 이를 위해 가장 널리 사용되는 방법은 AJAX 요청과 Fetch API를 활용하는 것입니다.

AJAX 요청

AJAX(Asynchronous JavaScript and XML)는 비동기적으로 서버와 통신하기 위한 기술입니다. 아래는 AJAX를 사용하여 서버로부터 데이터를 받아오는 간단한 예제입니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      // 데이터 활용
    } else {
      // 오류 처리
    }
  }
};
xhr.send();

Fetch API

Fetch API는 더 간결하고 강력한 방법으로 서버에서 데이터를 받아올 수 있습니다.

fetch('https://example.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    // 데이터 활용
  })
  .catch(error => {
    // 오류 처리
  });

이렇게 서버에서 비동기로 데이터를 받아오는 것은 모던 웹 애플리케이션 개발에서 중요한 부분이며, 이러한 기술을 활용하면 사용자 경험을 향상시킬 수 있습니다.

참고 문헌: