AJAX란 무엇인가? - 비동기 통신의 핵심 개념
웹 개발을 공부하다 보면 반드시 마주치는 개념 중 하나가 바로 AJAX이다.
이번 포스팅에서는 AJAX의 개념과 함께, 핵심 개념인 동기 방식과 비동기 방식의 차이까지 정리해보자.
✅ AJAX란?
AJAX는 Asynchronous JavaScript And XML의 약자로,
웹 페이지 전체를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있는 기술을 의미한다.
즉, 웹 페이지 일부만 갱신할 수 있게 해주는 비동기 통신 방식이다.
📌 AJAX는 단일 기술이 아니라 여러 기술의 조합이다.
JavaScript + XMLHttpRequest 또는 fetch + JSON/XML + HTML/CSS 등을 함께 사용한다.
🔍 JavaScript와 XML이란?
-
JavaScript는 웹 브라우저에서 동작하는 스크립트 언어로,
사용자 이벤트 처리, 화면 갱신, 서버 통신 등 AJAX의 핵심 로직을 담당하는 기술이다. -
XML(eXtensible Markup Language)은 데이터를 구조화하여 표현하는 마크업 언어로,
AJAX 초기에는 서버 응답 데이터를 XML로 주고받았으나,
현재는 가볍고 사용하기 쉬운 JSON 형식이 더 널리 사용된다.
⚖️ 동기 방식과 비동기 방식의 차이
AJAX를 이해하기 위해서는 먼저 동기(Synchronous)와 비동기(Asynchronous)의 차이를 이해해야 한다.
| 항목 | 동기 방식 | 비동기 방식 |
|---|---|---|
| 요청 처리 | 요청을 보내고 응답이 올 때까지 기다린다 | 요청을 보내고 응답이 올 때까지 기다리지 않는다 |
| 흐름 | 코드 실행이 중단된다 | 코드 실행이 중단되지 않는다 |
| 예시 | 전통적인 form 제출 방식 | AJAX, setTimeout, fetch 등 |
✅ 예시 비교
동기 방식:
const response = getData(); // 서버 응답을 기다림
console.log(response); // 응답을 받은 후에 실행됨비동기 방식:
getDataAsync().then(response => {
console.log(response); // 응답이 오면 이 부분만 실행됨
});
console.log('응답 기다리는 동안 다른 작업도 가능함');동기 방식은 막힘(blocking), 비동기 방식은 논블로킹(non-blocking)이라고도 부른다.
📌 AJAX의 필요성
기존 웹 방식은 사용자가 어떤 요청을 하면,
서버에 요청 → 전체 페이지 새로고침 → 서버 응답 수신
이 과정을 거친다.
하지만 이 방식은 느리고 사용자 경험이 좋지 않다.
AJAX는 다음과 같은 흐름으로 개선한다:
서버에 비동기 요청 → 필요한 데이터만 받아서 화면 일부분만 갱신
따라서 속도와 사용자 편의성이 대폭 향상된다.
⚙️ AJAX의 동작 흐름
- 사용자가 버튼 클릭 등으로 요청을 발생시킨다.
- JavaScript가 XMLHttpRequest 또는 fetch()를 사용해 서버에 비동기 요청을 보낸다.
- 서버가 JSON 등의 형태로 데이터를 응답한다.
- JavaScript가 응답을 받아서 DOM을 조작하고, 화면 일부를 업데이트한다.
🧪 코드 예제 (jQuery의 AJAX 사용)
// === 좋아요(Like) ===
$(function(){
let unlikeToLike = "unlikeToLike";
let likeToUnlike = "likeToUnlike";
// 좋아요X -> 좋아요O
$(document).on('click', '#unlikeToLike', function(){
$.ajax({
url : "/klassLikeChange",
type : "post",
data : {"klass_no": klassNo, "like": unlikeToLike},
dataType : 'json',
success : function(data){
if(data.res_code == "200"){
alert('좋아요!');
$('#unlikeToLike').text(data.newTotalLikeCount);
$('#unlikeToLike').attr("id","likeToUnlike")
.removeClass('icon-heart-o')
.addClass('icon-heart');
} else {
alert('오류. 홈페이지로 이동합니다.');
location.href="/";
}
},
error : function(){ alert('ajax 실패1'); }
});
});
// 좋아요O -> 좋아요X
$(document).on('click', '#likeToUnlike', function(){
$.ajax({
url : "/klassLikeChange",
type : "post",
data : {"klass_no": klassNo, "like": likeToUnlike},
dataType : 'json',
success : function(data){
if(data.res_code == "200"){
alert('좋아요를 취소합니다.');
$('#likeToUnlike').text(data.newTotalLikeCount);
$('#likeToUnlike').attr("id","unlikeToLike")
.removeClass('icon-heart')
.addClass('icon-heart-o');
} else {
alert('오류. 홈페이지로 이동합니다.');
location.href="/";
}
},
error : function(){ alert('ajax 실패2'); }
});
});
});
🧪 코드 예제 (fetch기반의 AJAX 사용)
DELETE 메소드를 사용한 RESTful 스타일의 서버 통신 예제
const boardDelete = function(boardNo){
console.log(boardNo);
// 1. confirm 함수 사용 -> 게시글 삭제 여부 확인 ok
// 2. 동의 -> fetch 사용 삭제
// (1) url : /board/1
const check = confirm('삭제하시겠습니까?');
if(check){
fetch('/board/'+boardNo,{
method : 'delete'
})
.then(response => response.json())
.then(data => {
alert(data.res_msg);
if(data.res_code == 200){
location.href = '/board';
}
});
} else{
alert('삭제 취소');
}
🧩 AJAX를 사용하는 대표적인 상황
- 댓글 작성/삭제 시, 페이지를 새로 고치지 않고 처리한다.
- 검색창 자동완성 기능을 구현한다.
- 무한 스크롤 기능을 만든다.
- 좋아요 버튼 클릭 시 숫자만 업데이트한다.(코드 예제)
💬 AJAX와 JSON
AJAX는 본래 XML을 사용했지만, 최근에는 JSON이 거의 표준처럼 사용되고 있다.
가볍고 JavaScript에서 처리하기도 편리하기 때문이다.
{
// key : value 형식
"message": "요청이 성공했습니다.",
"data": { "id": 1, "name": "ChatGPT" }
}⚠️ AJAX 사용 시 주의할 점
-
CORS(Cross-Origin Resource Sharing) 문제
다른 도메인 간의 요청은 보안상 제한되며, 서버에서 이를 허용해줘야 한다. -
SEO(Search Engine Optimization)에 불리할 수 있다
클라이언트에서 동적으로 렌더링된 콘텐츠는 검색 엔진이 제대로 인식하지 못할 수 있다.
✅ 정리
| 항목 | 설명 |
|---|---|
| 정의 | 페이지 새로고침 없이 서버와 데이터를 주고받는 비동기 통신 기술 |
| 특징 | 빠른 반응성과 향상된 사용자 경험 제공 |
| 기술 조합 | JavaScript + XMLHttpRequest 또는 fetch + JSON |
| 사용 예시 | 댓글, 좋아요, 검색 자동완성, 무한스크롤 등 |
| 핵심 개념 | 비동기 처리(논블로킹), DOM 조작 |
🚀 마무리
AJAX는 오늘날 대부분의 웹 서비스에서 기본적으로 사용되는 핵심 기술이다.
비동기라는 개념이 다소 생소할 수 있으나, 일단 한 번 써보면 얼마나 편리한지 체감할 수 있다.
다음 포스팅에서는 jQuery를 사용한 AJAX 방식의 차이점
