AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 동적으로 업데이트하기 위해 사용되는 기술이다. 이 기술은 웹 브라우저와 서버 간에 비동기적으로 데이터를 교환하여 페이지의 전체 새로고침 없이 부분적인 업데이트를 가능하게 한다. 이는 사용자 경험을 향상시키고 네트워크 트래픽을 줄일 수 있다.

AJAX를 구현하기 위해서는 JavaScript를 사용해야 한다. 아래 예제 코드를 통해 AJAX 요청을 보내고 응답을 처리하는 방법을 살펴보자.

// AJAX 요청 보내기
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 응답이 도착하면 처리할 작업
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

// AJAX 요청에 데이터 포스트하기
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 응답이 도착하면 처리할 작업
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
var data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data));

위의 코드는 AJAX 요청을 보내는 가장 일반적인 방법을 보여준다. XMLHttpRequest 객체를 사용하여 요청을 만들고, open() 메서드로 요청의 종류(GET, POST), URL, 그리고 동기 또는 비동기로 전송할지 여부를 설정한다. 그리고 요청에 대한 응답이 도착했을 때 처리할 작업을 설정하는데, 이를 위해 onreadystatechange 이벤트 핸들러를 등록한다. 마지막으로 send() 메서드를 호출하여 요청을 서버로 보낸다.

응답이 도착하면 onreadystatechange 이벤트 핸들러가 호출되고, 서버의 응답 상태를 체크하여 성공적인 응답이 도착했을 때 처리할 작업을 수행한다. 응답은 일반적으로 JSON 형식으로 오고, JSON.parse() 함수를 사용하여 파싱한 후 데이터를 이용할 수 있다.

AJAX는 자바스크립트를 사용한 비동기 데이터 통신을 가능하게 하는 강력한 기술이다. 많은 웹 애플리케이션에서 사용되고 있으며, 기존의 동기적인 웹 애플리케이션과는 다른 사용자 경험을 제공한다. AJAX를 잘 활용하면 더욱 동적이고 반응적인 웹 페이지를 만들 수 있다.