[자바스크립트(Java Script)]11.AJAX와 서버 분산 구조에 대한 정리

손영민's avatar
Apr 14, 2025
[자바스크립트(Java Script)]11.AJAX와 서버 분산 구조에 대한 정리

1. AJAX란?

AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지가 전체를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있도록 해주는 비동기 통신 기법이다. 일반적으로 JSON을 사용하여 데이터를 주고받으며, 동적인 웹 애플리케이션을 만들 때 필수적으로 사용된다.
notion image

2. AJAX 동작 방식

AJAX의 기본적인 동작 흐름은 다음과 같다.

1) 초기 요청

  • 사용자가 웹 페이지를 요청하면 브라우저가 GET 요청을 서버에 보낸다.
  • 서버는 HTML을 반환하고 브라우저는 이를 렌더링한다.

2) 클라이언트에서 AJAX 요청

  • 특정 이벤트(예: 버튼 클릭)가 발생하면 JavaScript가 AJAX 요청을 생성하여 서버로 전송한다.
  • 이때, 전체 페이지가 아닌 필요한 데이터만 요청한다.

3) 서버에서 데이터 응답

  • 서버는 JSON 또는 XML 형식으로 데이터를 반환한다.
  • 클라이언트는 응답을 받아 DOM을 변경하여 화면을 갱신한다.
 

3. AJAX의 특징

1) 부분 리로드 가능

  • 전체 페이지를 다시 로드하지 않고 서버에서 데이터를 비동기적으로 주고받을 수 있습니다
  • 사용자 경험(UX)이 향상되며 페이지 전환 없이 콘텐츠 업데이트가 가능합니다
  • 서버 부하 감소 및 대역폭 절약이 가능합니다 (필요한 데이터만 교환)

2) AJAX를 반드시 사용해야 하는 경우

  • 실시간 데이터 업데이트: 주식 차트, 채팅 애플리케이션, 실시간 알림 시스템

3) AJAX와 서버 다양성

  • AJAX는 웹 브라우저뿐만 아니라 다양한 클라이언트 환경(iOS, Android 등)에서도 활용 가능하다.
즉, 단일 서버 API를 구축하면 여러 플랫폼에서 동일한 데이터를 가져와 사용할 수 있다.
 
notion image
 
 
 
 
 
notion image
 
 
Share article

sson17