[javascript] JAX를 사용한 웹 애플리케이션의 새로운 기능 추가

11 Dec 2023

javascript

JAX(JavaScript와 XML)는 웹 애플리케이션에서 비동기적으로 서버와 통신하기 위한 기술입니다. 이 기술을 사용하여 웹 애플리케이션에 새로운 기능을 추가할 수 있습니다. 여기에는 JAX를 사용하여 데이터를 동적으로 로드하거나 사용자 입력을 처리하고 결과를 업데이트하는 방법에 대한 예시가 포함되어 있습니다.

1. 데이터 동적 로드

function loadUserData() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var userData = JSON.parse(xhr.responseText);
        // 사용자 데이터를 처리하고 화면에 표시
      } else {
        // 에러 처리
      }
    }
  };
  xhr.open('GET', 'user-data-endpoint', true);
  xhr.send();
}

위의 예시에서는 loadUserData 함수를 사용하여 서버에서 사용자 데이터를 가져오는 방법을 보여줍니다. XMLHttpRequest를 사용하여 비동기적으로 데이터를 로드하고, 로드가 완료되면 화면에 데이터를 표시하거나 에러를 처리할 수 있습니다.

2. 사용자 입력 처리

document.getElementById('submit-button').addEventListener('click', function() {
  var userInput = document.getElementById('user-input').value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var responseData = JSON.parse(xhr.responseText);
        // 결과 데이터를 처리하고 화면에 업데이트
      } else {
        // 에러 처리
      }
    }
  };
  xhr.open('POST', 'user-input-endpoint', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.send(JSON.stringify({ input: userInput }));
});

위의 예시에서는 사용자가 입력한 데이터를 서버로 보내고, 서버의 응답에 따라 화면을 업데이트하는 방법을 보여줍니다. addEventListener를 사용하여 사용자가 버튼을 클릭했을 때 데이터를 보내고 응답을 처리할 수 있습니다.

이러한 방법을 사용하여 JAX를 활용하면 웹 애플리케이션에 새로운 기능을 추가할 수 있습니다. JAX를 사용하면 사용자 경험을 향상시키고, 더 매끄러운 상호작용을 제공할 수 있습니다.

1. 데이터 동적 로드

2. 사용자 입력 처리

참고 자료