[JavaScript] AJAX: 비동기 웹 통신의 핵심 기술

tacowasabii·2024년 10월 20일

목록 보기

14/15

오늘날의 웹 애플리케이션은 사용자와 빠르고 동적인 상호작용을 제공하기 위해 서버와 데이터를 주고받는 일이 매우 중요하다. 이때 등장하는 것이 바로 AJAX이다. AJAX는 페이지를 새로고침하지 않고도 서버와 데이터를 교환할 수 있도록 해주는 비동기 웹 통신의 핵심 기술이다. 이번 글에서는 AJAX의 개념, 동작 원리, 그리고 사용 예시에 대해 알아보겠다.

AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 애플리케이션에서 비동기적으로 서버와 데이터를 주고받는 방식을 의미한다. AJAX는 웹 페이지가 서버로부터 데이터를 요청하고 응답을 받을 때 페이지를 새로고침하지 않기 때문에, 더욱 빠르고 부드러운 사용자 경험을 제공한다.

AJAX의 주요 특징

비동기적 처리: AJAX는 서버와의 통신을 비동기적으로 처리하기 때문에, 요청을 보내는 동안 웹 페이지가 멈추지 않고 사용자가 다른 작업을 할 수 있다.
전체 페이지 새로고침 없이 데이터 갱신: 페이지의 특정 부분만 갱신할 수 있어 사용자에게 부드러운 인터페이스를 제공한다.
서버와의 실시간 데이터 교환: AJAX를 통해 서버에서 실시간 데이터를 받아와 화면에 즉시 반영할 수 있다.

AJAX의 동작 원리

AJAX의 동작 과정은 크게 세 가지 단계로 나눌 수 있다

서버에 요청을 보내기: 브라우저는 클라이언트(사용자)로부터 요청을 받아 서버로 보낸다.
서버에서 응답받기: 서버는 요청을 처리한 후 데이터를 클라이언트로 응답한다.
데이터 처리 및 화면 업데이트: 클라이언트는 받은 데이터를 처리하여 웹 페이지의 필요한 부분만 업데이트한다.

이 모든 과정은 페이지의 새로고침 없이 비동기적으로 이루어진다.

AJAX 사용 방법

AJAX는 전통적으로 XMLHttpRequest 객체를 통해 사용되었지만, 최근에는 더 간결하고 사용하기 쉬운 Fetch API가 많이 사용된다. 두 가지 방식을 모두 살펴보자.

1) XMLHttpRequest 사용 예시

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  }
};
xhr.send();

위 코드는 XMLHttpRequest 객체를 사용하여 서버에 GET 요청을 보내고, 서버로부터 받은 데이터를 처리하는 기본적인 AJAX 요청이다.

2) Fetch API 사용 예시

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));