AJAX는 JavaScript를 통해 비동기적으로 서버와 데이터를 교환하는 기술 중 하나입니다. 이를 통해 서버로부터 JSON 형식의 데이터를 요청하고 처리할 수 있습니다. 이 글에서는 AJAX를 사용하여 JSON 데이터를 요청하는 방법에 대해 알아보겠습니다.

XMLHttpRequest 객체를 사용한 AJAX 요청

XMLHttpRequest 객체는 AJAX 요청을 생성하고 전송하는 데 사용됩니다. 다음은 XMLHttpRequest를 사용하여 JSON 데이터를 요청하는 예제입니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    // JSON 데이터 처리
  }
};
xhr.send();

위 예제에서는 xhr 변수를 사용하여 XMLHttpRequest 객체를 생성합니다. open 메서드를 사용하여 GET 요청을 설정하고 요청할 URL을 전달합니다. 두 번째 인자로는 요청을 비동기적으로 처리할지 여부를 true 또는 false로 설정합니다.

onreadystatechange 이벤트 핸들러를 등록하여 요청의 상태가 변경될 때마다 호출되는 콜백 함수를 정의합니다. readyState 값이 4이고 status 값이 200일 때, 요청이 완료되었고 응답이 성공적으로 도착한 상태입니다.

응답으로 받은 JSON 데이터는 responseText 속성을 통해 문자열로 반환됩니다. JSON.parse 함수를 사용하여 문자열을 JavaScript 객체로 변환할 수 있습니다. 이후에는 데이터를 처리하는 코드를 작성할 수 있습니다.

Fetch API를 사용한 AJAX 요청

Fetch API는 XMLHttpRequest 객체 대신에 사용할 수 있는 새로운 AJAX 요청 기술입니다. 이를 사용하면 더 간편하게 AJAX 요청을 처리할 수 있습니다. 다음은 Fetch API를 사용하여 JSON 데이터를 요청하는 예제입니다.

fetch('https://api.example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // JSON 데이터 처리
  })
  .catch(error => {
    // 오류 처리
  });

위 예제에서는 fetch 함수를 사용하여 URL을 전달하여 AJAX 요청을 생성합니다. 응답이 성공적으로 도착하면 then 메서드를 사용하여 JSON 데이터를 JavaScript 객체로 변환합니다. 그리고 데이터를 처리하는 코드를 작성할 수 있습니다.

만약 요청이 실패하면 catch 메서드를 사용하여 오류를 처리할 수 있습니다.

axios 라이브러리를 사용한 AJAX 요청

axios는 널리 사용되는 자바스크립트 HTTP 클라이언트 라이브러리로, AJAX 요청을 쉽게 처리할 수 있도록 도와줍니다. 이를 사용하면 코드가 간결해지고 에러 처리가 편리해집니다. 다음은 axios를 사용하여 JSON 데이터를 요청하는 예제입니다.

axios.get('https://api.example.com/data.json')
  .then(response => {
    const data = response.data;
    // JSON 데이터 처리
  })
  .catch(error => {
    // 오류 처리
  });

위 예제에서는 axios.get 함수를 사용하여 URL을 전달하여 GET 요청을 생성합니다. 응답이 성공적으로 도착하면 then 메서드를 사용하여 데이터를 처리할 수 있습니다.

만약 요청이 실패하면 catch 메서드를 사용하여 오류를 처리할 수 있습니다.

마치며

이 글에서는 자바스크립트에서 AJAX를 사용하여 JSON 데이터를 요청하는 방법에 대해 알아보았습니다. XMLHttpRequest를 사용하는 방법, Fetch API를 사용하는 방법 및 axios 라이브러리를 사용하는 방법을 살펴보았습니다. 기존의 XMLHttpRequest를 사용하는 방법 외에도 더욱 편리하고 간결한 Fetch API와 axios를 사용하는 것이 권장됩니다. 이러한 AJAX 요청을 통해 서버와의 데이터 교환을 원할하게 처리할 수 있습니다.