ajax이란?

AJAX (Asynchronous JavaScript and XML)

개요

AJAX는 Asynchronous JavaScript and XML의 약자로, 자바스크립트를 사용하여 서버와 비동기적으로 데이터를 교환하고, 웹 페이지를 동적으로 업데이트하는 기술입니다. 이 기술을 사용함으로써, 웹 페이지 전체를 새로 고침하지 않고도 부분적으로 데이터를 업데이트할 수 있습니다.

작동 원리

AJAX는 웹 페이지가 로드된 후에도 서버에 데이터를 요청하거나 전송할 수 있습니다. 이는 XMLHttpRequest 객체를 통해 이루어지며, 사용자의 상호 작용에 따라 서버에 요청을 보내고 응답을 받을 수 있습니다. 이 응답은 보통 JSON, XML, HTML 형식의 데이터일 수 있으며, 이를 웹 페이지에 동적으로 통합하여 사용자 경험을 향상시킵니다.

장점

• 페이지 새로고침 없이 데이터 갱신: 사용자가 웹 페이지를 새로 고침하지 않고도 데이터를 업데이트하거나 검색 결과를 볼 수 있습니다.
• 향상된 사용자 경험: 웹 애플리케이션의 반응성이 높아져 사용자 경험이 개선됩니다.
• 서버 트래픽 감소: 전체 페이지를 다시 로드할 필요가 없기 때문에 서버에 가해지는 부하가 줄어듭니다.

단점

• 보안 취약점: 데이터를 비동기적으로 교환할 때 보안 문제가 발생할 수 있습니다.
• 브라우저 호환성 문제: 모든 브라우저에서 AJAX의 기능을 완벽하게 지원하지 않을 수 있습니다.
• SEO 문제: 동적으로 로드된 컨텐츠는 검색 엔진에 의해 적절히 인덱싱되지 않을 수 있습니다.

예시

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

위 예시는 XMLHttpRequest 객체를 사용하여 ‘ajax_info.txt’ 파일에서 데이터를 불러와서 ‘demo’라는 ID를 가진 HTML 요소에 내용을 동적으로 삽입하는 기본적인 AJAX 요청의 예입니다.