AJAX가 뭐고, 왜 필요할까
기존의 웹페이지는 서버에 요청을 보내고 응답을 받으면, 페이지 전체를 다시 로드하는 경우가 많았다.
예를 들어 사용자가 어떤 버튼을 눌러 데이터를 조회하거나, 검색을 수행하거나,
새로운 내용을 불러올 때마다 화면 전체가 다시 그려지는 방식이다.
이런 방식은 구조가 단순하다는 장점은 있지만,
사용자 입장에서는 화면이 깜빡이거나 흐름이 끊기는 느낌을 줄 수 있다.
이런 불편함을 줄이기 위해 등장한 방식이 AJAX다.
AJAX는 Asynchronous JavaScript And XML의 약자로,
자바스크립트를 사용해 서버와 비동기적으로 데이터를 주고받는 방식을 의미한다.
여기서 중요한 키워드는 “비동기”다.
비동기 요청은 요청을 보낸 뒤 응답이 올 때까지 화면 전체를 멈추게 하지 않고,
다른 작업을 계속 진행할 수 있게 해준다.
그래서 사용자는 페이지를 새로고침하지 않아도 필요한 데이터만 서버에서 받아와 화면 일부를 갱신할 수 있다.
예를 들어 댓글 목록을 새로 불러오거나, 검색 자동완성을 띄우거나, 좋아요 버튼을 눌렀을 때 숫자만 바뀌는 기능은
대부분 이런 비동기 통신 방식으로 구현된다.
XHR은 자바스크립트에서 AJAX 요청을 보낼 때 사용하는 대표적인 도구다
AJAX 요청을 실제로 보내기 위해 자바스크립트에서는 여러 도구를 사용할 수 있는데,
그중 전통적이고 대표적인 것이 XMLHttpRequest, 줄여서 XHR이다.
이름만 보면 XML만 다룰 것처럼 보이지만, 실제로는 그렇지 않다.
처음 XHR과 AJAX라는 개념이 등장했을 때는
데이터 전송 포맷으로 XML이 많이 사용되었기 때문에 이런 이름이 붙었다.
하지만 오늘날 웹 개발에서는 XML보다 JSON을 훨씬 더 많이 사용한다.
이름은 그대로 남아 있지만, 실제 사용 방식은 많이 달라진 셈이다.
XHR은 자바스크립트 코드 안에서 서버로 HTTP 요청을 보내고,
서버가 응답한 결과를 받아 처리할 수 있게 해주는 객체다.
즉, 브라우저 안에서 자바스크립트가 직접 서버와 통신할 수 있도록 해주는 창구라고 볼 수 있다.
이를 통해 개발자는 사용자가 페이지를 떠나지 않은 상태에서도 필요한 시점에 데이터를 가져오거나 전송할 수 있다.
XHR 예제 코드
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function onReadyStateChange(event) {
if (ajaxRequest.readyState === XMLHttpRequest.DONE) {
if (ajaxRequest.status === 200) {
console.log(ajaxRequest.responseText);
} else {
console.error('request failed');
}
}
}
const ajaxRequest = new XMLHttpRequest();
ajaxRequest.onreadystatechange = onReadyStateChange;
ajaxRequest.open('GET', '/get-with-no-parameter');
ajaxRequest.send();
</script>
</body>
</html>
예제 코드는 서버에 GET 요청을 보내고,
응답이 오면 그 결과를 처리하는 흐름으로 동작한다.
이 코드를 순서대로 보면 먼저 new XMLHttpRequest()를 통해 AJAX 요청을 보낼 수 있는 객체를 생성한다.
그다음 ajaxRequest.onreadystatechange = onReadyStateChange;를 통해,
요청 상태가 바뀔 때마다 실행할 함수를 등록한다.
즉, 요청이 진행되는 도중 상태 변화가 생기면 onReadyStateChange 함수가 호출된다.
그 후 open('GET', '/get-with-no-parameter')를 사용해 어떤 방식으로 어디에 요청을 보낼지를 설정한다.
여기서는 GET 메서드로 /get-with-no-parameter 경로에 요청을 보내겠다는 뜻이다.
마지막으로 send()를 호출하면 실제 요청이 서버로 전송된다.
서버가 응답을 보내면 상태가 바뀌고, 등록해둔 onReadyStateChange 함수가 실행된다.
여기서 readyState === XMLHttpRequest.DONE인지를 먼저 확인하는 이유는,
요청이 완전히 끝난 시점에만 응답을 처리하기 위해서다.
그리고 응답이 정상적으로 완료되었는지를 확인하기 위해 HTTP 상태 코드가 200인지도 함께 검사한다.
만약 200이라면 responseText를 출력하고, 아니라면 요청 실패로 간주해 에러를 출력한다.
readyState
XHR을 사용할 때 자주 보게 되는 값 중 하나가 readyState다.
이 값은 AJAX 요청이 현재 어느 단계에 와 있는지를 나타낸다.
즉, 요청이 아직 초기 상태인지, 서버와 연결되었는지, 응답을 일부 받았는지, 완전히 끝났는지를 구분할 수 있게 해준다.
| readyState 값 | 의미 | 설명 |
| 0 | UNSENT | 요청 객체는 만들어졌지만 아직 open()이 호출되지 않은 상태 |
| 1 | OPENED | open()이 호출되어 요청을 보낼 준비가 된 상태 |
| 2 | HEADERS_RECEIVED | send() 이후 서버가 요청을 받아 응답 헤더를 반환한 상태 |
| 3 | LOADING | 응답 본문을 브라우저가 일부 받아오고 있는 상태 |
| 4 | DONE | 요청과 응답이 모두 완료된 상태 |
예제 코드에서 XMLHttpRequest.DONE은 바로 이 4번 상태를 의미한다.
즉, 요청이 완전히 끝났을 때만 실제 응답 데이터를 제대로 사용할 수 있기 때문에,
보통은 이 상태에서 응답 처리 로직을 실행한다.
+ 비동기 요청이란?
AJAX의 가장 중요한 특징은 비동기라는 점이다.
비동기 요청은 서버에 요청을 보낸 뒤,
응답이 돌아올 때까지 자바스크립트 코드 실행이나 사용자 인터페이스 전체를 멈추게 하지 않는다.
즉, 요청은 백그라운드에서 진행되고, 응답이 왔을 때 등록해둔 함수가 나중에 실행되는 방식이다.
만약 동기 방식이었다면 요청을 보내는 순간
브라우저는 응답이 올 때까지 아무것도 하지 못하고 멈춰 있어야 했을 것이다.
하지만 비동기 방식에서는 사용자가 다른 버튼을 누르거나 화면을 스크롤하는 등의 행동을 계속할 수 있다.
그래서 웹 애플리케이션이 훨씬 자연스럽고 부드럽게 느껴진다.
'공부 기록 > 이것이 백엔드 개발이다 With Java' 카테고리의 다른 글
| EP12. HTTP 요청과 응답 (0) | 2026.04.04 |
|---|---|
| EP11. HTTP 트랜잭션 개요 (0) | 2026.04.04 |
| EP9. JSON (0) | 2026.04.01 |
| EP8. 웹 브라우저와 서버의 상호작용 (0) | 2026.03.25 |
| EP7. 백엔드 개발자가 HTML을 알아야 하는 이유 (0) | 2026.03.24 |
