AJAX 통신이란?

AJAX란?

AJAX (Asynchronous JavaScript And XML)는
웹 페이지를 새로 고침 하지 않고도 서버와 데이터를 비동기적으로 주고받을 수 있는 기술
AJAX는 특정 기술이 아니라 여러 웹 기술의 조합을 의미함

구성 요소

• JavaScript: 요청을 만들고 응답을 처리함
• XMLHttpRequest 객체 (혹은 최신 fetch): 실제 HTTP 요청을 보냄
• HTML/CSS: 사용자 UI 구성
• (선택적) XML, JSON: 주고받는 데이터 형식

 

AJAX 통신 방법

AJAX 요청은 아래와 같은 다양한 방식으로 구현할 수 있습니다.

XMLHttpRequest (구 방식)

var xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

 

fetch() (현대적 방식, ES6 이상)

fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

 

$.ajax() (jQuery 방식)

$.ajax({
  url: "/api/data",
  method: "GET",
  dataType: "json",
  success: function (data) {
    console.log(data);
  },
  error: function (xhr, status, error) {
    console.error(error);
  }
});

 

AJAX의 특징

항목	설명
비동기성	전체 페이지를 새로고침하지 않고 서버와 통신 가능
빠른 사용자 경험	필요한 데이터만 부분적으로 갱신 가능
요청 및 응답 형식 자유	JSON, XML, HTML, Plain text 등 다양한 데이터 주고받기 가능
다양한 요청 방식	GET, POST, PUT, DELETE 등 지원
UI와 데이터 분리	클라이언트 로직과 서버 데이터를 분리하여 효율적인 개발 가능

 

장점

빠른 응답성	페이지 전체를 새로 로딩하지 않아 속도 향상
사용자 경험 향상	매끄러운 UI 제공 (예: 무한 스크롤, 자동 저장 등)
리소스 절약	필요한 데이터만 요청하여 서버 및 네트워크 비용 절감
동적 페이지 구현	페이지를 유연하게 갱신 가능

 

 

단점

SEO 어려움	클라이언트 렌더링 중심은 검색 엔진이 크롤링하기 어려움
디버깅 어려움	네트워크 상태나 응답 문제 시 디버깅이 어려움
브라우저 호환성	구형 브라우저에서 XMLHttpRequest나 fetch 지원 제한
보안 이슈	클라이언트에서 직접 API 요청 → CSRF, CORS 이슈에 민감

 

정리

AJAX 언제 쓸까?

• 자동 저장, 검색 자동완성, 무한스크롤 등 부분 업데이트가 필요한 UI
• REST API를 사용하는 SPA(Single Page Application)
• 서버로부터 비동기적으로 데이터 받아서 갱신하는 대시보드, 채팅 앱 등