[javascript] AJAX 요청으로 JSON 데이터 가져오기

15 Dec 2023

javascript

웹 애플리케이션을 개발하는 과정에서 서버로부터 JSON 형식의 데이터를 가져와야 하는 경우가 있습니다. 이를 위해 AJAX 요청을 사용하여 비동기적으로 데이터를 가져올 수 있습니다. 이 포스트에서는 JavaScript를 사용하여 AJAX 요청을 보내고 JSON 데이터를 가져오는 방법을 알아보겠습니다.

AJAX 요청 보내기

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // 데이터 활용
  }
};
xhr.send();

위의 코드에서는 XMLHttpRequest 객체를 사용하여 GET 메서드로 서버에 데이터를 요청합니다. 요청이 완료되면 onload 이벤트 핸들러를 통해 응답 데이터를 처리합니다.

Fetch API를 사용한 방법

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터 활용
  });

fetch 함수를 사용하면 좀 더 간단하게 AJAX 요청을 보낼 수 있습니다. 응답 객체의 json() 메서드를 사용하여 JSON 데이터를 가져올 수 있습니다.

JSON 데이터 활용하기

가져온 JSON 데이터를 활용하여 동적으로 콘텐츠를 업데이트하거나 다양한 작업을 수행할 수 있습니다. 예를 들어, 가져온 데이터를 반복문으로 처리하여 웹 페이지에 표시할 수도 있습니다.

이러한 방법을 사용하여 웹 애플리케이션에서 서버로부터 JSON 데이터를 효과적으로 가져올 수 있습니다. AJAX 요청을 통해 비동기적으로 데이터를 가져와서 웹 페이지를 동적으로 업데이트하고 데이터를 활용할 수 있습니다.

이렇게 함으로써 사용자 경험을 향상시키고 웹 애플리케이션의 기능을 확장할 수 있습니다.

참고 자료

이상으로 AJAX 요청으로 JSON 데이터를 가져오는 방법에 대해 알아보았습니다. 추가적으로 궁금한 사항이 있거나 다른 주제에 대해 더 알고 싶으시다면 언제든지 문의해 주세요.