AJAX
기본 정보
- 명칭: AJAX
- 영문명: Asynchronous JavaScript and XML
- 한글명: 비동기 JavaScript 및 XML
- 분류: 웹 통신 기술
- 주요 용도: 페이지 새로고침 없이 서버와 데이터 통신
- 관련 주제: #AJAX #JavaScript #API #JSON #RESTAPI
개요
AJAX(Asynchronous JavaScript and XML)는 웹페이지를 새로고침하지 않고 서버와 비동기적으로 데이터를 주고받는 기술이다.
초기에는 XML 형식을 많이 사용했지만, 현재는 대부분 JSON 형식을 사용한다.
AJAX를 이용하면 게시글 작성, 댓글 등록, 로그인, 검색, 장바구니 추가 등 다양한 기능을 페이지 이동 없이 처리할 수 있다.
AJAX 구조
사용자
↓
브라우저
↓
JavaScript
↓
AJAX 요청
↓
REST API
↓
Database
↓
JSON 응답
↓
화면 일부 업데이트동작 과정
버튼 클릭
↓
AJAX 요청
↓
서버 처리
↓
Database 조회
↓
JSON 반환
↓
JavaScript 처리
↓
화면 변경페이지 전체를 다시 로드하지 않는다.
주요 특징
- 비동기 처리
- 빠른 사용자 경험
- 부분 화면 업데이트
- REST API 연동
- JSON 데이터 처리
- 서버 부하 감소
기존 방식과 비교
일반 웹
사용자
↓
서버 요청
↓
전체 HTML 생성
↓
페이지 새로고침AJAX
사용자
↓
AJAX 요청
↓
JSON 응답
↓
화면 일부 변경XMLHttpRequest
기존 AJAX 구현 방식이다.
const xhr = new XMLHttpRequest();
xhr.open(
"GET",
"/api/user"
);
xhr.send();현재는 fetch() 사용이 더 일반적이다.
Fetch API
fetch("/api/user")
.then(res => res.json())
.then(data => {
console.log(data);
});현대 JavaScript에서 가장 많이 사용하는 방식이다.
async / await
async function load() {
const response =
await fetch("/api/user");
const data =
await response.json();
}가독성이 높아 실무에서 많이 사용된다.
jQuery AJAX
$.ajax({
url: "/api/user",
method: "GET",
success: function(data){
console.log(data);
}
});레거시 프로젝트에서 많이 사용된다.
POST 요청
fetch("/api/login", {
method: "POST",
headers: {
"Content-Type":
"application/json"
},
body: JSON.stringify({
id: "admin"
})
});JSON 응답 예시
{
"success": true,
"message": "성공",
"data": {
"name": "구름"
}
}REST API와 관계
Browser
↓
AJAX
↓
REST API
↓
Database
↓
JSONAJAX는 REST API와 함께 가장 많이 사용된다.
활용 사례
- 로그인
- 회원가입
- 댓글 작성
- 게시글 등록
- 검색 자동완성
- 장바구니 추가
- 좋아요 기능
- 실시간 알림
실시간 검색 예시
입력
↓
AJAX 요청
↓
검색 API
↓
JSON 응답
↓
검색 결과 표시장점
- 페이지 새로고침 불필요
- 빠른 사용자 경험
- 서버 트래픽 감소
- 부분 업데이트 가능
- 모바일 앱과 유사한 UX 제공
단점
- JavaScript 의존
- 디버깅이 어려울 수 있음
- SEO에 불리할 수 있음
- 요청 관리가 복잡해질 수 있음
AJAX와 Fetch 비교
| AJAX(XMLHttpRequest) | Fetch API |
|---|---|
| 오래된 방식 | 최신 표준 |
| 문법이 복잡 | Promise 기반 |
| Callback 사용 | async/await 사용 가능 |
| 레거시 프로젝트 활용 | 신규 프로젝트 권장 |
AJAX와 WebSocket 비교
| AJAX | WebSocket |
|---|---|
| 요청-응답 방식 | 양방향 실시간 통신 |
| 필요할 때 요청 | 연결 유지 |
| 구현 간단 | 실시간 서비스에 적합 |
| 일반 웹 서비스 | 채팅·게임·주식 시세 |
실무 메모
실무에서는 다음과 같은 방식이 권장된다.
fetch()또는 Axios 사용async/await문법 사용- 응답 형식(
success,message,data) 표준화 - HTTP 상태 코드 활용
- 예외 처리(
try...catch) 구현 - JWT 또는 Session 인증 적용
- 로딩 UI 표시
- 중복 요청 방지
- 타임아웃 처리
- API 에러 로그 기록
AJAX와 함께 사용하는 기술
대표 개발 도구
- Chrome DevTools
- Postman
- Bruno
- Insomnia
- Visual Studio Code
관련 문서
출처
- MDN Web Docs - AJAX
- MDN Web Docs - XMLHttpRequest
- WHATWG Fetch Standard