자바스크립트 AJAX 시스템 개발

10 Sep 2023

javascript

AJAX(Asynchronous JavaScript and XML)는 웹 페이지에서 비동기적으로 서버와 통신하고 데이터를 업데이트하는 데 사용되는 기술입니다. 이 기술을 사용하면 웹 페이지를 새로 고치지 않고도 데이터를 동적으로 로드하고 표시할 수 있습니다. 자바스크립트를 사용하여 AJAX 시스템을 개발하는 방법을 알아보겠습니다.

1. XMLHttpRequest 객체 생성하기

AJAX 요청을 보내기 위해 먼저 XMLHttpRequest(XMLHttpRequest 2.0 버전 이후부터는 fetch API도 사용 가능) 객체를 생성해야 합니다. 이 객체는 웹 브라우저가 서버와 통신하는 데 사용됩니다. 다음은 createXHR 함수를 통해 XMLHttpRequest 객체를 생성하는 예제 코드입니다.

function createXHR() {
  if (window.XMLHttpRequest) {
    // 최신 브라우저에서는 XMLHttpRequest 객체를 바로 생성합니다.
    return new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    // 오래된 IE 브라우저를 위해 ActiveXObject를 사용합니다.
    return new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    throw new Error("AJAX를 지원하지 않는 브라우저입니다.");
  }
}

2. AJAX 요청 보내기

XMLHttpRequest 객체를 생성하고 나면, open 메소드와 send 메소드를 사용하여 서버로 요청을 보낼 수 있습니다. open 메소드를 사용하여 요청 메소드(GET, POST 등)와 요청 URL을 설정하고, send 메소드를 사용하여 요청을 보냅니다. 다음은 ajaxRequest 함수를 통해 AJAX 요청을 보내는 예제 코드입니다.

function ajaxRequest(method, url, callback) {
  var xhr = createXHR();
  xhr.open(method, url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 요청이 완료되고 응답 상태가 성공(200)인 경우에만 콜백 함수를 호출합니다.
      callback(xhr.responseText);
    }
  };
  xhr.send();
}

3. 응답 처리하기

AJAX 요청이 성공적으로 완료되면, 응답 데이터를 처리해야 합니다. 이를 위해 onreadystatechange 이벤트 핸들러를 등록하여 요청 후 응답 상태를 감지합니다. 응답 상태가 4이고 응답 상태 코드가 200일 때 응답 데이터를 처리할 수 있습니다. 다음은 응답 데이터를 처리하는 예제 코드입니다.

function handleResponse(responseText) {
  var data = JSON.parse(responseText);
  // 응답 데이터를 가공하고 화면에 표시하는 로직을 작성합니다.
  // ...
}

// AJAX 요청 보내기
ajaxRequest("GET", "https://api.example.com/data", handleResponse);

4. 에러 처리하기

AJAX 요청이 실패한 경우에 대비하여 에러 처리 로직을 추가하는 것이 좋습니다. onreadystatechange 이벤트 핸들러를 사용하여 요청 완료 후 응답 상태 코드를 체크하고, 에러가 발생한 경우에는 에러 처리 로직을 실행합니다. 다음은 에러 처리를 추가한 예제 코드입니다.

function handleResponse(responseText) {
  var data = JSON.parse(responseText);
  // 응답 데이터를 가공하고 화면에 표시하는 로직을 작성합니다.
  // ...
}

function handleErrorResponse() {
  // 에러 처리 로직을 작성합니다.
  // ...
}

function ajaxRequest(method, url, callback) {
  var xhr = createXHR();
  xhr.open(method, url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback(xhr.responseText);
      } else {
        handleErrorResponse();
      }
    }
  };
  xhr.send();
}

// AJAX 요청 보내기
ajaxRequest("GET", "https://api.example.com/data", handleResponse);

마무리

이제 자바스크립트를 사용하여 AJAX 시스템을 개발하는 방법에 대해 알아보았습니다. AJAX를 통해 비동기적으로 데이터를 로드하고 업데이트하면서 웹 페이지의 사용자 경험을 개선할 수 있습니다. 위에서 제시된 예제 코드를 바탕으로 자신만의 AJAX 시스템을 구축해 보세요!