AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약어로, 자바스크립트를 사용하여 비동기적으로 데이터를 요청하고 응답을 처리하는 기술입니다. AJAX를 통해 웹 페이지에서 서버와 통신을 할 수 있으며, 페이지의 새로고침 없이 데이터를 업데이트할 수 있습니다.

요청 보내기

AJAX 요청을 보내기 위해서는 XMLHttpRequest 객체를 사용합니다. 이 객체를 사용하여 서버에 요청을 보내고 응답을 받아올 수 있습니다. 아래는 간단한 예제 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // 요청 메서드와 URL 설정
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    } else {
      console.error('Error: ' + xhr.status);
    }
  }
};
xhr.send(); // 요청 보내기

위의 예제 코드는 GET 요청을 보내는 방법을 보여줍니다. open 메서드를 사용하여 요청 메서드와 URL을 설정하고, onreadystatechange 이벤트 핸들러를 등록하여 상태 변화를 감지합니다. send 메서드를 호출하여 요청을 보냅니다.

응답 처리하기

서버로부터 받은 응답은 onreadystatechange 이벤트 핸들러에서 처리할 수 있습니다. 응답의 상태 변화에 따라 원하는 동작을 정의할 수 있습니다. 위의 예제 코드에서는 상태 변화가 XMLHttpRequest.DONE일 때 응답을 처리하고, status를 확인하여 성공 여부를 판단하고 응답 데이터를 파싱하여 출력합니다.

비동기 처리 및 콜백 함수

AJAX 요청은 비동기적으로 처리되기 때문에 순차적인 코드 실행을 막지 않습니다. 이러한 특성을 활용하여, 서버 응답을 받은 후 원하는 작업을 수행할 수 있습니다. 아래는 비동기 처리와 콜백 함수를 사용한 예제 코드입니다.

function fetchData(callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        callback(null, response);
      } else {
        callback('Error: ' + xhr.status);
      }
    }
  };
  xhr.send();
}

fetchData(function(error, data) {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

위의 예제 코드에서는 fetchData 함수를 정의하고, 서버로부터 데이터를 가져오는 AJAX 요청을 보냅니다. callback 인자를 받아 요청이 완료된 이후에 실행할 콜백 함수를 정의하고, callback 함수 내에서 응답을 처리합니다.

이렇게 비동기 처리와 콜백 함수를 활용하면, AJAX 요청과 응답 처리를 좀 더 유연하게 다룰 수 있습니다.

AJAX를 사용하여 자바스크립트에서 서버와 통신하고 응답을 처리하는 방법에 대해 알아보았습니다. 이를 활용하여 웹 애플리케이션을 개발할 때 자유롭게 데이터를 요청하고 업데이트할 수 있습니다.