잠재적으로 데이터베이스나 외부 서버에서 정보를 가져와 웹 애플리케이션에 동적으로 표시하기 위해서는 AJAX를 사용해야합니다. AJAX를 사용하면 비동기식으로 서버에 데이터를 요청하고 응답을 처리할 수 있습니다. JSON은 JavaScript Object Notation의 약자로, 데이터를 표현하기 위한 간단하고 가벼운 형식입니다. 이번 글에서는 자바스크립트에서 AJAX를 사용하여 JSON 데이터를 요청하는 방법에 대해 알아보겠습니다.

1. XMLHttpRequest 객체 생성

AJAX를 위해서는 XMLHttpRequest 객체를 생성해야합니다. 이 객체를 사용하여 서버에 요청을 보내고 응답을 받을 수 있습니다. XMLHttpRequest 객체는 모든 현대 브라우저에서 기본적으로 제공됩니다. 아래 코드는 XMLHttpRequest 객체를 생성하는 방법입니다.

let xhr = new XMLHttpRequest();

2. 요청 설정

XMLHttpRequest 객체를 생성한 후, 서버에 보낼 요청을 설정해야합니다. 요청 설정은 open 메소드를 사용하여 수행할 수 있습니다. 아래 코드는 GET 방식으로 서버에 요청을 보내는 예제입니다.

xhr.open('GET', 'https://api.example.com/data', true);

위의 예제에서 첫 번째 매개변수는 요청의 유형(GET, POST 등)을 나타내고, 두 번째 매개변수는 요청을 보낼 URL을 나타냅니다. 세 번째 매개변수는 비동기식으로 요청을 처리할지 여부를 나타냅니다. true로 설정하면 비동기식으로 처리하고, false로 설정하면 동기식으로 처리됩니다.

3. 응답 처리

서버로 요청을 보내고 나면, 서버에서 응답이 돌아올 때까지 기다려야합니다. 응답을 처리하기 위해서는 onreadystatechange 이벤트 리스너를 사용해야합니다. 아래 코드는 응답을 처리하는 예제입니다.

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let response = JSON.parse(xhr.responseText);
    // 응답 데이터를 처리하는 코드
  }
};

이벤트 리스너에 등록한 함수는 readyState와 status를 검사하여 요청이 완료되고 성공적으로 응답이 돌아온 경우에만 실행됩니다. readyState 값이 4이고 status 값이 200인 경우가 응답이 돌아온 경우입니다.

4. 요청 전송

서버에 설정한 요청을 실제로 보내기 위해서는 send 메소드를 호출해야합니다. 아래 코드는 요청을 보내는 예제입니다.

xhr.send();

요청을 보낼 데이터가 있는 경우에는 send 메소드에 데이터를 전달할 수 있습니다. 이렇게 보낸 요청은 비동기식으로 처리됩니다.

이제 자바스크립트에서 AJAX를 사용하여 JSON 데이터를 요청하는 방법에 대해 알게되었습니다. 이를 통해 정보를 동적으로 가져와 웹 애플리케이션에서 사용할 수 있습니다. AJAX와 JSON을 활용하면 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.