[JS] AJAX(Asynchronous JavaScript and XML)

AJAX

AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지를 리로드하지 않고도 서버에 데이터를 비동기적으로 요청하거나 전송하는 기술이다. AJAX를 사용하면 페이지의 일부만을 업데이트할 수 있으므로 사용자 경험을 향상시키고 서버에 대한 부하를 줄일 수 있다.

AJAX 동작

1. 웹 페이지에서 이벤트가 발생(예: 버튼 클릭).
2. JavaScript가 XMLHttpRequest 객체를 생성.
3. XMLHttpRequest 객체는 서버에 요청.
4. 서버는 요청을 처리하고 결과를 반환.
5. JavaScript가 응답을 처리하고 필요한 경우 웹 페이지의 일부분을 업데이트.

XMLHttpRequest 객체는 AJAX의 핵심적인 부분으로, HTTP 요청을 생성, 전송하고 응답을 받아오는 기능이 포함되어 있다.

AJAX에서 "XML"이라는 이름이 들어갔지만 실제로 AJAX에서 데이터 형식은 꼭 XML일 필요가 없다. JSON(JavaScript Object Notation) 형식이 더 널리 사용되며, HTML 및 일반 텍스트 등 다른 형식도 가능하다.

💡 XML(eXtensible Markup Language)은 데이터를 저장하고 전송하는 데 사용되는 마크업 언어입니다. XML은 HTML과 유사한 구조를 가지고 있지만, HTML이 데이터를 웹에서 보여주는 데 중점을 두는 반면, XML은 데이터를 저장하고 전송하는 것에 초점을 맞추고 있습니다.

AJAX 예제

AJAX를 이용한 간단한 예제로, 서버에서 텍스트 데이터를 가져와 웹 페이지에 표시하는 것을 생각해볼 수 있다.
이 예제에서는 JavaScript의 fetch 함수를 사용한다. fetch는 XMLHttpRequest의 최신 버전이다.

<!--html-->
<button onclick="loadData()">Load Data</button>
<div id="output"></div>

function loadData() {
  fetch('data.txt') // 서버에 위치한 텍스트 파일
    .then(response => response.text()) // 응답을 텍스트로 변환
    .then(data => {
      document.getElementById('output').innerHTML = data; // 데이터를 웹 페이지에 출력
    })
    .catch(error => console.error('Error:', error)); // 에러 처리
}

위의 코드에서 loadData 함수는 'data.txt'라는 파일을 서버에서 비동기적으로 요청한다. 데이터가 성공적으로 로드되면, 그 내용은 'output'이라는 id를 가진