[jQuery] 05. Ajax(비동기 통신) 완전 정리 (GET / POST / JSON / $.ajax)
웹에서 “로그인”, “게시글 목록 불러오기”, “댓글 등록”, “검색 자동완성” 같은 기능은 페이지를 새로고침하지 않고도 서버와 데이터를 주고받아야 합니다. 이때 많이 쓰는 방식이 Ajax입니다.
이번 글은 $.ajax()를 중심으로, GET/POST 차이, JSON 처리, 자주하는 실수까지 “깊게” 정리합니다.
1. Ajax가 뭐예요?
Ajax는 한 문장으로 정리하면 이렇습니다.
- 페이지를 새로고침하지 않고 서버와 통신해서 데이터를 가져오거나(조회) 보내는(저장) 방식
예를 들어, 게시글 목록을 불러올 때 전체 페이지를 다시 불러오면 느리고 불편합니다. Ajax를 쓰면 “필요한 데이터만” 받아서 화면 일부만 바꿀 수 있습니다.
2. 비동기(Async)란 무슨 뜻이에요?
비동기는 쉽게 말해, 요청을 보내고 결과를 기다리는 동안에도 다른 코드를 실행할 수 있는 방식입니다.
즉, 서버 응답이 올 때까지 멈춰있는 게 아니라, 응답이 도착하면 그때 정해둔 함수(success 등)를 실행합니다.
3. $.ajax() 기본 구조 (이게 핵심)
jQuery Ajax의 기본 형태는 아래 구조를 외우면 됩니다.
$.ajax({
url: "요청할 주소",
type: "GET 또는 POST",
data: { 서버로 보낼 값 }, // 선택
dataType: "json 또는 text", // 선택 (응답을 어떻게 받을지)
contentType: "application/json", // 선택 (보낼 데이터를 어떤 형식으로 보낼지)
success: function(res) { // 성공했을 때
console.log(res);
},
error: function(xhr) { // 실패했을 때
console.log(xhr.status);
},
complete: function() { // 성공/실패 상관없이 마지막에
console.log("끝!");
}
});
여기서 꼭 기억할 것:
- success: 서버에서 정상 응답을 받았을 때 실행
- error: 서버 오류(404/500 등)나 통신 실패일 때 실행
- complete: 성공/실패 상관없이 마지막에 실행 (로딩 숨기기 등에 유용)
4. GET 요청 (데이터 가져오기) - 예제 + OUTPUT
GET은 보통 “조회”에 사용합니다. 서버에서 데이터를 받아와서 화면에 보여주는 상황입니다.
📌 예제 코드 (GET)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.box { border:1px solid #ddd; padding:12px; border-radius:8px; margin:12px 0; }
#result { white-space:pre-wrap; }
</style>
</head>
<body>
<div class="box">
<button id="btnGet">게시글 1개 가져오기(GET)</button>
<div id="result" class="box">여기에 결과가 표시됩니다.</div>
</div>
<script>
$(function() {
$("#btnGet").on("click", function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
type: "GET",
dataType: "json",
success: function(res) {
// res는 서버에서 받은 데이터(객체)
$("#result").text(
"title: " + res.title + "\n\n" +
"body: " + res.body
);
},
error: function(xhr) {
$("#result").text("요청 실패! status: " + xhr.status);
}
});
});
});
</script>
</body>
</html>
📌 OUTPUT
- 버튼을 누르면 서버에서 데이터를 가져옵니다.
- 성공하면 결과 영역(#result)에 title과 body 내용이 표시됩니다.
- 실패하면 “요청 실패 status 코드”가 출력됩니다.
5. POST 요청 (데이터 보내기) - 예제 + OUTPUT
POST는 보통 “저장/등록”에 사용합니다. 예를 들어 회원가입, 로그인, 글쓰기, 댓글작성 등이 POST로 처리되는 경우가 많습니다.
POST에서 중요한 포인트는:
- 서버로 보낼 데이터가 있다 → data를 사용
- JSON으로 보내는 경우가 많다 → contentType 설정이 중요
📌 예제 코드 (POST + JSON)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.box { border:1px solid #ddd; padding:12px; border-radius:8px; margin:12px 0; }
input { padding:8px; width:260px; }
#result { white-space:pre-wrap; }
</style>
</head>
<body>
<div class="box">
<h4>POST 테스트</h4>
<p>
<input type="text" id="title" placeholder="제목 입력" />
</p>
<p>
<input type="text" id="body" placeholder="내용 입력" />
</p>
<button id="btnPost">전송하기(POST)</button>
<div id="result" class="box">여기에 응답 결과가 표시됩니다.</div>
</div>
<script>
$(function() {
$("#btnPost").on("click", function() {
var payload = {
title: $("#title").val(),
body: $("#body").val(),
userId: 1
};
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
type: "POST",
data: JSON.stringify(payload),
contentType: "application/json; charset=UTF-8",
dataType: "json",
success: function(res) {
$("#result").text(
"서버 응답(등록된 것처럼 반환):\n" +
"id: " + res.id + "\n" +
"title: " + res.title + "\n" +
"body: " + res.body + "\n" +
"userId: " + res.userId
);
},
error: function(xhr) {
$("#result").text("요청 실패! status: " + xhr.status);
}
});
});
});
</script>
</body>
</html>
📌 OUTPUT
- 제목/내용을 입력하고 전송 버튼을 누르면 POST 요청이 전송됩니다.
- 성공하면 응답 결과에 id, title, body, userId가 출력됩니다.
- 실패하면 status 코드가 표시됩니다.
6. dataType vs contentType (진짜 많이 헷갈림)
이 둘은 이름이 비슷해서 처음에 정말 많이 헷갈립니다. 정리하면 아래처럼 생각하면 됩니다.
- dataType: 서버에서 “받는” 데이터를 어떤 형식으로 받을지 (예: json, text)
- contentType: 서버로 “보내는” 데이터를 어떤 형식으로 보낼지 (예: application/json)
예를 들어 JSON을 보내고 JSON을 받으면 보통 이렇게 됩니다.
contentType: "application/json; charset=UTF-8", // 보내는 형식
dataType: "json" // 받는 형식
7. 로딩(Loading) 처리 팁: beforeSend / complete
Ajax는 “통신 중”이라는 시간이 존재하기 때문에, 사용자 입장에서 아무 반응이 없으면 멈춘 것처럼 느낄 수 있습니다. 그래서 로딩 표시를 해주는 게 좋습니다.
$.ajax({
url: "/api",
type: "GET",
beforeSend: function() {
$("#result").text("로딩중...");
},
success: function(res) {
$("#result").text("성공!");
},
complete: function() {
// 로딩 숨기기 같은 마무리 처리
}
});
8. done / fail / always (Promise처럼 쓰는 방식)
$.ajax()는 결과를 반환합니다. 이 반환값(jqXHR)을 사용하면 success/error 대신 done/fail/always 형태로도 처리할 수 있습니다.
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1",
type: "GET",
dataType: "json"
})
.done(function(res) {
console.log("성공", res);
})
.fail(function(xhr) {
console.log("실패", xhr.status);
})
.always(function() {
console.log("무조건 실행(마무리)");
});
팀이나 코드 스타일에 따라 success/error를 쓰기도 하고 done/fail을 쓰기도 합니다. 둘 다 알아두면 좋습니다.
9. 자주 하는 실수 TOP 6
- URL 오타 → 404 에러가 나면 먼저 주소부터 확인
- dataType을 잘못 씀 → JSON인데 text로 받으면 파싱이 번거로움
- contentType 설정 안 함 → JSON으로 보내야 하는데 서버가 못 알아듣는 경우
- 통신이 “무조건 즉시 끝난다”라고 착각 → Ajax는 비동기라서 결과는 success/done 안에서 처리해야 함
- 서버가 외부 요청을 막는 경우 → 어떤 서버는 브라우저 요청을 차단해서 호출이 안 될 수 있음
- 에러 처리 안 함 → error/fail을 꼭 넣어야 디버깅이 쉬움
10. 핵심 정리
- Ajax는 페이지 새로고침 없이 서버와 데이터를 주고받는 방식입니다.
- GET은 주로 조회, POST는 주로 저장/등록에 사용합니다.
- jQuery에서는 $.ajax()로 대부분의 통신을 처리할 수 있습니다.
- dataType은 “받는 형식”, contentType은 “보내는 형식”입니다.
- 비동기라서 결과 처리는 success/done 안에서 해야 합니다.
- 실패 대비로 error/fail 처리를 꼭 넣어야 합니다.
다음 편에서는 체이닝(Chaining) + jQuery 객체를 깊게 정리해서 왜 $("#box").addClass().text().css() 같은 코드가 가능한지 원리를 잡아보겠습니다.
'Computer Science > JQuery' 카테고리의 다른 글
| [jQuery] 04. 이벤트(Event) 완전 정리 (click / on / this / preventDefault / 이벤트 위임) (0) | 2026.03.02 |
|---|---|
| [jQuery] 03. DOM 조작 완전 정리 (text / html / val / attr / prop) (0) | 2026.03.02 |
| [jQuery] 02. 선택자(Selector) 완전 정리 (0) | 2026.02.25 |
| [jQuery] 01. jQuery가 뭐예요? (0) | 2026.02.16 |