자바스크립트는 웹 애플리케이션 개발에서 핵심적인 역할을 담당하는 프로그래밍 언어입니다. 웹 서비스를 개발하기 위해서는 클라이언트와 서버 간의 데이터 통신이 필요한데, XMLHTTPRequest 객체를 사용하여 이를 구현할 수 있습니다.

XMLHTTPRequest란?

XMLHTTPRequest는 자바스크립트에서 제공하는 객체로, 웹 브라우저와 서버 간의 데이터를 비동기적으로 주고 받을 수 있게 해줍니다. 이를 통해 웹 애플리케이션은 서버에 요청을 보내고, 응답을 받아와 동적으로 내용을 갱신할 수 있습니다.

XMLHTTPRequest는 아래와 같이 자바스크립트로 생성할 수 있습니다.

var xhttp = new XMLHttpRequest();

XMLHTTPRequest를 사용한 데이터 요청과 응답 처리

데이터 요청을 보낼 때는 open 메소드와 send 메소드를 사용합니다.

xhttp.open("GET", "https://api.example.com/data", true);
xhttp.send();

위 예제에서는 GET 메소드를 사용하여 “https://api.example.com/data” 주소로 요청을 보내고 있습니다. 요청이 비동기적으로 처리되어야 하므로 마지막 파라미터로 true 값을 전달합니다.

응답을 받아오기 위해서는 onreadystatechange 이벤트 핸들러를 등록합니다. 이 핸들러는 XMLHttpRequest 객체의 상태가 변경될 때마다 호출되며, readyState 속성을 통해 현재 상태를 확인할 수 있습니다.

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 응답이 도착하고 상태 코드가 200인 경우 처리할 로직
    var response = JSON.parse(this.responseText);
    // 응답 데이터를 활용한 로직 구현
  }
};

위 예제에서는 상태 코드가 200인 경우에만 응답 데이터를 처리하는 로직을 작성하고 있습니다. 응답 데이터는 responseText 속성을 통해 접근할 수 있습니다. JSON 데이터인 경우 JSON.parse 메소드를 사용하여 객체로 변환해야 합니다.

XMLHTTPRequest를 활용한 예제

아래는 XMLHTTPRequest를 사용하여 간단한 웹 서비스를 개발하는 예제입니다.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(this.responseText);
    displayData(response);
  }
};
xhttp.open("GET", "https://api.example.com/data", true);
xhttp.send();

function displayData(data) {
  var container = document.getElementById("data-container");
  container.innerHTML = "";
  for (var i = 0; i < data.length; i++) {
    var item = document.createElement("li");
    item.textContent = data[i].title;
    container.appendChild(item);
  }
}

위 예제에서는 외부 API에서 데이터를 가져와 HTML에 동적으로 표시하는 기능을 구현하였습니다. 데이터를 받아온 후 displayData 함수를 호출하여 HTML 요소를 생성하고 데이터를 표시합니다. 이렇게 활용하면 사용자가 웹 페이지를 업데이트하지 않아도 실시간으로 데이터를 갱신할 수 있습니다.

자바스크립트 웹 서비스 개발에서 XMLHTTPRequest는 데이터 통신에 핵심적인 역할을 담당합니다. 비동기적으로 데이터를 주고 받을 수 있어 웹 애플리케이션의 사용자 경험을 향상시킬 수 있습니다. XMLHTTPRequest를 활용하여 다양한 기능을 구현해보세요!