AJAX란 무엇인가?

AJAX(Asynchronous JavaScript and XML)는 비동기적 웹 애플리케이션을 만들기 위해 사용하는 기법입니다.

이는 웹 페이지 전체를 새로 고침하지 않고도 서버로부터 데이터를 받아오거나 보낼 수 있도록 도와주며, 이를 통해 사용자 경험을 대폭 향상시킬 수 있습니다.

AJAX의 작동 원리

AJAX는 다음과 같은 과정을 통해 작동합니다:

1. 웹 페이지에서 JavaScript를 사용하여 XMLHttpRequest 객체를 생성합니다.
2. 이 객체를 통해 서버에 비동기적으로 요청을 보냅니다.
3. 서버에서 처리 후 응답을 보내면, JavaScript가 이를 받아서 웹 페이지에 동적으로 표시합니다.

XMLHttpRequest ?

XMLHttpRequest 객체는 웹 브라우저에서 서버로 비동기적으로 데이터를 전송하고 받을 수 있게 해주는 JavaScript 객체입니다.

이 객체를 사용하면 웹 페이지가 전체 페이지를 새로 고침하지 않고도 서버에 데이터를 요청하고 받을 수 있습니다.

다음과 같은 과정으로 작동합니다.

1. 객체 생성: 먼저 XMLHttpRequest 객체의 인스턴스를 생성합니다.
2. 요청 초기화: .open() 메서드를 사용하여 요청 유형(예: "GET", "POST"), URL, 그리고 비동기 여부를 설정합니다.
3. 이벤트 핸들러 설정: 요청의 상태 변화를 감지하고 응답을 처리할 수 있는 이벤트 핸들러를 설정합니다. onreadystatechange가 가장 일반적인 이벤트 핸들러입니다.
4. 요청 전송: .send() 메서드를 사용하여 서버로 요청을 전송합니다. 이 메서드에는 요청과 함께 전송할 데이터를 인자로 전달할 수 있습니다.
5. 응답 처리: 서버로부터 응답을 받으면, 이벤트 핸들러를 통해 응답을 처리합니다. 응답 데이터는 responseText 또는 responseXML 속성을 통해 접근할 수 있습니다.

예시: 간단한 AJAX 요청

function loadData() {
  // XMLHttpRequest 객체를 생성합니다.
  var xhr = new XMLHttpRequest();

  // onreadystatechange 이벤트 핸들러를 설정합니다. 요청의 상태가 변경될 때마다 호출됩니다.
  xhr.onreadystatechange = function() {
    // readyState가 4(요청이 완료되고 응답이 준비된 상태)이고,
    // sataus 200. 즉, 요청이 성공적으로 완료되어 응답 데이터가 준비된 경우를 체크합니다.
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 요청을 통해 받은 데이터(xhr.responseText)로 웹 페이지의 내용을 업데이트합니다.
      // 여기서는 "content"라는 ID를 가진 HTML 요소의 내용을 응답받은 텍스트로 설정합니다.
      document.getElementById("content").innerHTML = xhr.responseText;
    }
  };

  // XMLHttpRequest 객체를 사용하여 비동기적("true"로 설정)으로
  //'example.txt' 파일의 내용을 가져오기 위한 GET 요청을 초기화합니다.
  xhr.open("GET", "example.txt", true);

  // 초기화된 요청을 실제로 서버로 전송합니다. 이 단계에서 비로소 서버에 요청이 이루어지며,
  // 응답은 onreadystatechange 이벤트 핸들러를 통해 처리됩니다.
  xhr.send();
}

AJAX의 장점과 단점

AJAX 사용에는 다음과 같은 장점들이 있습니다:

• 페이지 새로 고침 없이 데이터를 불러올 수 있어 사용자 경험이 향상됩니다.
• 서버로부터 필요한 데이터만 받아와 트래픽을 줄일 수 있습니다.

하지만 몇 가지 단점도 존재합니다:

• 검색 엔진 최적화(SEO)에 부정적인 영향을 줄 수 있습니다.
• JavaScript가 비활성화된 상태에서는 작동하지 않습니다.

실제 사용 예시

웹 애플리케이션에서 사용자가 정보를 입력하고 "제출" 버튼을 클릭하면, 전통적인 방식은 페이지 전체를 새로 고쳐야 합니다.

하지만 AJAX를 사용하면 서버에 데이터를 비동기적으로 보내고 결과를 동적으로 처리할 수 있습니다.

이는 예를 들어, 이메일을 보낼 때 주소록에서 사용자 이름을 자동으로 완성하는 기능 등에 활용될 수 있습니다.

ajax와 관련된 Library는 SWR, React Query가 있습니다.