![[자바스크립트(Java Script)]11.AJAX와 서버 분산 구조에 대한 정리](https://image.inblog.dev?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3D%255B%25EC%259E%2590%25EB%25B0%2594%25EC%258A%25A4%25ED%2581%25AC%25EB%25A6%25BD%25ED%258A%25B8%28Java%2520Script%29%255D11.AJAX%25EC%2599%2580%2520%25EC%2584%259C%25EB%25B2%2584%2520%25EB%25B6%2584%25EC%2582%25B0%2520%25EA%25B5%25AC%25EC%25A1%25B0%25EC%2597%2590%2520%25EB%258C%2580%25ED%2595%259C%2520%25EC%25A0%2595%25EB%25A6%25AC%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3Dsson17&w=2048&q=75)
1. AJAX란?
AJAX는 Asynchronous JavaScript and XML의 약자로, 웹 페이지가 전체를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있도록 해주는 비동기 통신 기법이다. 일반적으로 JSON을 사용하여 데이터를 주고받으며, 동적인 웹 애플리케이션을 만들 때 필수적으로 사용된다.

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를 구축하면 여러 플랫폼에서 동일한 데이터를 가져와 사용할 수 있다.


Share article