자바스크립트 AJAX 요청과 응답 처리

10 Sep 2023

javascript

자바스크립트에서 AJAX란 Asynchronous JavaScript and XML의 약자로, 비동기적으로 서버와 데이터를 주고받는 기술을 나타냅니다. 이를 통해 웹 페이지의 일부분을 업데이트하거나 필요한 데이터를 동적으로 로드할 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 AJAX 요청을 보내고, 응답을 처리하는 방법에 대해 살펴보겠습니다.

AJAX 요청 보내기

자바스크립트에서 AJAX 요청을 보내기 위해서는 XMLHttpRequest 객체를 사용합니다. 다음은 간단한 GET 요청을 보내는 예제 코드입니다.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    let response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

위 코드에서 XMLHttpRequest 객체를 생성한 후, open() 메서드를 사용하여 요청을 설정합니다. 첫 번째 매개변수는 HTTP 요청 메서드(‘GET’, ‘POST’ 등)를 입력하고, 두 번째 매개변수에는 요청을 보낼 URL을 입력합니다. 세 번째 매개변수는 요청을 비동기적으로 처리할지 여부를 설정하며, 기본값은 true입니다.

onreadystatechange 이벤트는 요청의 상태가 변경될 때마다 발생하며, 요청이 완료되고 응답을 받았는지를 확인하는 로직을 추가할 수 있습니다. 위 코드에서는 상태 코드가 4이고 HTTP 상태 코드가 200일 때 응답을 처리하는 로직을 작성하였습니다.

응답 처리하기

응답은 XMLHttpRequest 객체의 responseText 속성을 통해 받을 수 있습니다. 일반적으로 JSON 형식으로 응답을 받기 때문에, JSON.parse() 메서드를 사용하여 JSON 문자열을 자바스크립트 객체로 변환합니다.

응답을 받은 후에는 필요한 로직을 수행할 수 있습니다. 예를 들어, 받은 데이터를 화면에 표시하거나 다른 자바스크립트 함수에 전달하여 처리할 수 있습니다.

비동기 코드 처리하기

AJAX 요청은 비동기적으로 처리되기 때문에, 응답이 도착하기 전에 다른 코드가 실행될 수 있습니다. 이를 해결하기 위해서는 콜백 함수를 사용하거나, Promise나 async/await와 같은 비동기 코드 처리 방식을 사용해야 합니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          let response = JSON.parse(xhr.responseText);
          resolve(response);
        } else {
          reject(xhr.status);
        }
      }
    };
    xhr.send();
  });
}

fetchData()
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

위 코드에서는 AJAX 요청을 프로미스로 감싸서 처리하고 있습니다. fetchData 함수는 XMLHttpRequest 객체를 생성하고 요청을 보내는 작업을 수행하며, 응답을 받으면 resolve() 메서드를 호출하여 프로미스가 이행됩니다. 요청이 실패할 경우에는 reject() 메서드를 호출하여 프로미스가 거부됩니다.

프로미스를 사용할 경우 then과 catch 메서드를 사용하여 비동기 코드를 처리할 수 있습니다. then 메서드는 프로미스가 이행될 때 호출되며, catch 메서드는 프로미스가 거부될 때 호출됩니다. 이를 통해 응답 데이터를 처리하거나 오류를 처리할 수 있습니다.

마무리

자바스크립트를 사용하여 AJAX 요청과 응답을 처리하는 방법에 대해 알아보았습니다. AJAX를 활용하면 웹 페이지를 더욱 동적으로 만들 수 있고, 서버와 데이터를 효율적으로 주고받을 수 있습니다.

AJAX 요청을 보내고 응답을 처리하는 방법을 익혀서 다양한 웹 애플리케이션을 개발하는데 활용해보세요.