AJAX

AJAX

AJAX란 '비동기식 자바스크립트와 XML'의 약자입니다. 이는 전체 페이지를 새로 고치지 않고도 페이지 내용을 업데이트할 수 있는 웹 페이지를 만드는 기술입니다. 자바스크립트를 사용하여 서버에 비동기식 요청을 보내고 페이지 내용을 동적으로 업데이트함으로써 이를 구현합니다.

AJAX를 사용하면 데이터를 서버에서 가져와 페이지를 전체적으로 새로 고치지 않고도 페이지를 업데이트할 수 있으므로 더 빠르고 더 매끄러운 사용자 경험을 제공할 수 있습니다. 요즘에는 JSON이 데이터 형식으로 더 많이 사용되어 AJAX 기반 애플리케이션에서 클라이언트와 서버 간 데이터를 교환하는 데 사용됩니다.

ajax 예시

예를 들어, 웹 페이지에 코멘트를 추가하는 기능이 있다고 가정해봅시다. 일반적으로 사용자는 코멘트를 작성하고 "제출" 버튼을 클릭합니다. 그러면 전체 페이지가 새로고침되고 새로운 코멘트가 표시됩니다.

그러나 AJAX를 사용하면 전체 페이지를 새로 고치지 않고도 새로운 코멘트를 추가할 수 있습니다. 사용자가 "제출" 버튼을 클릭하면, 자바스크립트가 서버에 비동기식으로 요청을 보내서 데이터를 가져옵니다. 그런 다음, 자바스크립트는 페이지의 일부를 업데이트하여 새로운 코멘트를 추가합니다. 이렇게하면 새로운 코멘트가 페이지에 바로 표시되고, 사용자는 페이지 전체를 새로 고침하지 않아도 됩니다.

다른 예시로는, 사용자가 검색어를 입력하고, 자동완성 기능이 제공되는 검색 엔진이 있다고 가정해봅시다. 이 경우, 자바스크립트를 사용하여 사용자가 검색어를 입력할 때마다 서버에 요청을 보내고, 검색어와 일치하는 결과를 가져와서 페이지에 동적으로 업데이트할 수 있습니다. 이를 통해 사용자는 검색어를 입력할 때마다 자동완성 기능을 통해 빠르게 검색 결과를 확인할 수 있습니다.

// when the form is submitted, send an AJAX request to add the new comment
document.getElementById('comment-form').addEventListener('submit', function(event) {
  // prevent the default form submission
  event.preventDefault();

  // get the input value and clear the input field
  var commentText = document.getElementById('comment-input').value;
  document.getElementById('comment-input').value = '';

  // create a new XMLHttpRequest object
  var xhr = new XMLHttpRequest();

  // set up the request
  xhr.open('POST', '/add_comment');

  // set up the request headers
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // set up the request body
  var requestBody = 'comment=' + encodeURIComponent(commentText);

  // handle the response
  xhr.onload = function() {
    if (xhr.status === 200) {
      // when the request is successful, add the new comment to the list
      var newComment = document.createElement('li');
      newComment.textContent = JSON.parse(xhr.responseText).comment;
      document.getElementById('comment-list').appendChild(newComment);
    } else {
      alert('Failed to add comment');
    }
  };

  // handle network errors
  xhr.onerror = function() {
    alert('Network error');
  };

  // send the request
  xhr.send(requestBody);
});

// when the page loads, send an AJAX request to get the initial comments
var xhr = new XMLHttpRequest();
xhr.open('GET', '/get_comments');

xhr.onload = function() {
  if (xhr.status === 200) {
    // when the request is successful, add the initial comments to the list
    var comments = JSON.parse(xhr.responseText).comments;

    for (var i = 0; i < comments.length; i++) {
      var comment = document.createElement('li');
      comment.textContent = comments[i];
      document.getElementById('comment-list').appendChild(comment);
    }
  } else {
    alert('Failed to get comments');
  }
};

xhr.onerror = function() {
  alert('Network error');
};

xhr.send();