Ajax란?
Ajax는 Asynchronous JavaScript and XML
자바스크립트를 이용해 웹 페이지를 새로고침하지 않고 서버와 통신할 수 있게 해주는 기술.
어떻게 동작할까?
사용자가 동작 실행
➡️ JavaScript가 서버에 요청
➡️ 서버가 응답 반환
➡️ 받은 데이터를 이용해 웹페이지 일부만 업데이트
Ajax의 주요 구성요소
| HTML / CSS | 웹 페이지의 구조와 스타일을 구성한다. |
| DOM (Document Object Model) | 자바스크립트가 HTML 요소를 동적으로 조작할 수 있도록 도와준다. |
| JavaScript | Ajax의 중심. 서버 요청을 보내고, 받은 데이터를 처리한다. |
| XMLHttpRequest | 브라우저에서 서버와 데이터를 주고받는 API이다. |
| JSON / XML / 텍스트 등 | 서버와 주고받는 데이터 형식. 요즘은 대부분 JSON 사용한다. |
| 이벤트 (Event) | 버튼 클릭, 스크롤 등 사용자 동작을 트리거로 Ajax 요청을 보낸다. |
AJAX를 사용하는 이유
| 장점 | 설명 |
| 전체 페이지 새로고침 없이 일부만 업데이트 | 필요한 부분만 바꿔서 빠르고 부드러운 사용자 경험 제공 |
| 페이지 로드 후에도 서버와 통신 가능 | 동적으로 데이터를 가져오고, 업데이트 가능 |
| 백그라운드 통신 가능 | 사용자가 인식하지 못하는 사이에 서버 요청 처리 |
| 비동기 처리로 속도 향상 | 응답을 기다리지 않고 다음 작업 수행 가능 |
| 서버 자원과 트래픽 절약 | 전체 페이지가 아니라 필요한 데이터만 요청 |
⚠️ Ajax의 한계
- 히스토리 관리가 되지 않고, 페이지간 이동 없는 통신 방법으로 보안 상의 문제가 생길 수 있음.
- 연속으로 데이터 요청 -> 서버 부하 증가
- 디버깅 어려움
- 서버 푸시가 불가 => 클라이언트가 요청해야 함.
클라이언트 풀링 방식: 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식
서버 푸시 방식 : 사용자가 요청하지 않아도 서버가 알아서 특정 정보를 제공하는 것을 의미.
대표적으로 앱에서 자동으로 보내는 푸시 알림이 있음.
요약
AJAX는 HTML, DOM, JavaScript, 서버 통신 API(XMLHttpRequest 등)를 함께 활용해 새로고침 없이 동적으로 웹 페이지를 갱신하는 기술 방식입니다.
'개발자 면접 노트' 카테고리의 다른 글
| Kotlin과 같은 등급은 Java인가 Spring인가? (3) | 2025.06.25 |
|---|---|
| Spring - 의존성 주입(DI)의 종류 (0) | 2025.06.25 |
| Spring - 의존성 주입(DI) (0) | 2025.06.25 |
| 동기(Synchronous)와 비동기(Asynchronous)의 차이점 (0) | 2025.06.24 |
| 백엔드 vs 프론트엔드 (1) | 2025.06.24 |