AJAX(Asynchronous JavaScript and XML)는 웹 페이지의 일부를 새로고침 없이 동적으로 업데이트하는 기술입니다. 이를 통해 사용자가 웹 페이지와 상호 작용하면 서버 사이드 스크립트를 호출하여 데이터를 가져오거나 업데이트할 수 있습니다. 자바스크립트와 서버 사이드 스크립트를 연동하여 AJAX를 구현하는 방법에 대해 알아보겠습니다.

AJAX 요청 전송하기

AJAX 요청을 전송하기 위해 XMLHttpRequest 객체를 사용합니다. 아래는 GET 방식으로 AJAX 요청을 전송하는 예시 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 서버로부터 받은 데이터(response)를 처리하는 로직 작성
  }
};
xhr.send();

위 코드에서 xhr.open() 메서드를 통해 요청 방식(GET), 요청할 URL, 비동기 여부(true)를 설정합니다. 그리고 xhr.onreadystatechange 콜백 함수를 사용하여 서버로부터 응답을 받았을 때 처리할 로직을 작성합니다. 마지막으로 xhr.send() 메서드를 호출하여 요청을 전송합니다.

서버 사이드 스크립트와 연동하기

AJAX 요청을 받아 처리하는 서버 사이드 스크립트는 요청을 처리하고 필요한 데이터를 반환해야 합니다. 대부분의 경우 이는 웹 애플리케이션의 백엔드 코드에서 처리됩니다. 자바스크립트와 연동하여 AJAX 요청을 처리하는 간단한 예시 코드를 살펴보겠습니다.

// Node.js + Express 예시

// Express 애플리케이션 생성
var express = require('express');
var app = express();

// GET 요청에 대한 핸들러 등록
app.get('/api/data', function(req, res) {
  // 데이터 처리 로직 작성
  var data = { key: 'value' };
  
  // JSON 형식으로 데이터 반환
  res.json(data);
});

// 서버 시작
app.listen(3000, function() {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

위 코드는 Node.js와 Express 프레임워크를 사용하여 간단한 서버를 구축하는 예시입니다. /api/data 경로로 들어오는 GET 요청에 대해 핸들러 함수를 등록하고, 필요한 데이터를 처리 후 JSON 형식으로 반환합니다.

AJAX 응답 처리하기

AJAX 요청의 응답은 xhr.onreadystatechange 콜백 함수 내에서 처리됩니다. 응답을 받았을 때 필요한 로직을 작성하여 서버로부터 받은 데이터를 활용할 수 있습니다.

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 서버로부터 받은 데이터(response)를 처리하는 로직 작성
    console.log(response.key); // 'value' 출력
  }
};

위 코드에서 응답 상태 (xhr.readyState) 가 XMLHttpRequest.DONE 이고 상태 코드 (xhr.status) 가 200 이면 응답이 성공적으로 도착한 것입니다. 이후 xhr.responseText 속성을 통해 서버로부터 받은 응답 데이터에 접근할 수 있습니다.

마무리

이제 자바스크립트와 서버 사이드 스크립트를 연동하여 AJAX를 구현하는 방법에 대해 알아보았습니다. AJAX를 이용하면 웹 페이지의 동적 업데이트가 가능해지며, 사용자 인터랙션에 따라 서버와 통신하여 데이터를 가져오거나 업데이트할 수 있습니다. 이를 활용하여 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다.