비동기 요청

동기식

여러 작업이 서로의 타이밍(동기)을 맞추어 순서대로 동작하는 방식

요청 후, 응답이 올 때까지 기다린다.

비동기식

서로의 동작 타이밍(동기)을 맞추지 않고 각자 독립적으로 동작하는 방식

요청 후, 응답을 기다리지 않고 다음 요청을 또 한다.

동기식

동기식 비유

싱크로나이즈는 모든 동작을 맞춰야 하는 동기식 스포츠

비동기식

비동기식 비유

축구는 각자 타이밍대로 움직이는 비동기식 스포츠다.

AJAX (Asynchronous JavaScript And XML)

페이지 전체 새로고침 없이 서버와 필요한 데이터만 주고받아 화면 일부만 갱신하는 기술

XML이라는 이름이 있지만, 요즘은 JSON을 주로 사용

AJAX가 등장한 이유

동기식 요청

sequenceDiagram
    participant User as 사용자
    participant Browser as 브라우저
    participant Server as 서버

    User->>Browser: 폼 제출 (예: 로그인 버튼 클릭)
    Browser->>Server: HTTP 요청 전송
    Server->>Server: 요청 처리
    Server-->>Browser: 전체 HTML 페이지 응답
    User->>Browser: 페이지 전체 새로고침
    Browser->>Server: 페이지 요청
    Server-->>Browser: 전체 HTML 페이지 응답
Mermaid
복사

문제점:

•

화면 깜빡임

•

느린 사용자 경험

•

불필요한 데이터 전송

파일 목록에서 파일 삭제 또는, 댓글 등록 기능 등은 페이지 전체를 다시 로드할 필요가 없는 기능입니다. 즉, 화면의 일부만 갱신되어야 하는 기능입니다.

그런데 동기식 방식에서는 페이지 전체를 요청해서 다시 로드하기 때문에 비동기식 방식에 비하여 비효율적입니다.

AJAX 방식

sequenceDiagram
    participant User as 사용자
    participant Browser as 브라우저
    participant Server as 서버

    User->>Browser: 이벤트 발생 (예: 버튼 클릭)
    Browser->>Server: AJAX 요청 전송
    Server->>Server: 요청 처리
    Server-->>Browser: 데이터(JSON) 응답
    Browser->>Browser: JavaScript로 DOM 조작
    Browser->>User: 화면 일부만 변경 (새로고침 없음)
Mermaid
복사

장점:

•

빠른 반응

•

UX 향상

•

트래픽 감소

좋아요, 장바구니, 아이템 삭제 등의 기능은 비동기식 방식으로 처리하면 페이지의 일부만 갱신하기 때문에 효율적으로 처리할 수 있습니다.

AJAX 핵심 개념 정리

개념	설명
비동기	요청 후 결과를 기다리지 않음
논블로킹	화면·다른 작업 멈추지 않음
JSON	서버 클라이언트 데이터 형식
부분 갱신	DOM 일부만 변경

AJAX 동작 흐름 (중요 )

sequenceDiagram
    participant User as 1. 사용자
    participant JS as 2. JavaScript
    participant Server as 3. 서버
    participant DOM as 5. DOM

    User->>JS: 이벤트 발생 (클릭, 입력)
    JS->>Server: AJAX 요청 전송
    Server->>Server: 데이터 처리
    Server-->>JS: JSON 응답 반환
    JS->>DOM: DOM 조작하여 화면 갱신
Mermaid
복사

사용자 이벤트 발생 (클릭, 입력)
JavaScript가 AJAX 요청 전송
서버에서 데이터 처리
JSON 응답 반환
JS가 DOM을 조작하여 화면 갱신
Plain Text
복사

AJAX 사용 전/후 비교

AJAX 미사용 (동기식 요청)

<form action="/board" method="post">
  <button>등록하기</button>
</form>
HTML
복사

•

성공 시  다른 페이지로 리다이렉트 (전체 페이지를 로드)

•

실패 시  등록 페이지로 리다이렉트 (전체 페이지를 로드)

AJAX 사용 (비동기식 요청)

fetch("/board", {
  method: "POST",
  body: JSON.stringify(data)
});
JavaScript
복사

•

성공 시  경고창 출력 후, 다른 페이지로 이동(JavaScript)

•

실패 시  경고창만 표시

•

페이지 유지

fetch 함수

자바스크립트 내장 함수로, 자주 사용되는 AJAX 요청 함수입니다.

AJAX 구현 방법 3가지

① XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open("GET", "/data");
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.onerror = function() {
  console.error("요청 실패");
};
JavaScript
복사

가장 기초적인 방식이지만, 객체와 함수 이름이 길어서 가독성이 비교적 낮기 때문에 잘 사용하지 않는다.

② fetch API (표준, 추천 )

fetch(`/api/board/${id}`)
  .then(res => {
    if (!res.ok) {
      throw new Error('HTTP error! status: ' + res.status);
    }
    return res.json();
  })
  .then(data => {
    console.log(data);
    // 성공 시 처리
  })
  .catch(error => {
    console.error('요청 실패:', error);
    // 실패 시 처리
  });
JavaScript
복사

then: 응답 성공 시 처리

catch: 네트워크 오류 또는 예외 발생 시 처리

res.ok: HTTP 상태 코드가 200-299 범위인지 확인

③ jQuery AJAX (레거시)

$.ajax({
  url: `/api/board/${id}`,
  type: 'GET',
  // 요청 성공
  success: function(data) {
    console.log(data);
  },
  // 요청 실패
  error: function(xhr, status, error) {
    console.error('요청 실패:', status);
    console.error('상태 코드:', xhr.status);
    console.error('에러:', error);
  }
});
JavaScript
복사

success: 요청 성공 시 처리 (data: 서버 응답 데이터)

error: 요청 실패 시 처리

•

xhr: XMLHttpRequest 객체 (상태 코드, 응답 헤더 등 포함)

•

status: 에러 타입 문자열 ("timeout", "error", "abort" 등)

•

error: HTTP 상태 메시지 ("Not Found", "Internal Server Error" 등)

jQuery는 레거시 방식이므로 fetch API 사용을 권장

서버 응답 예시 (JSON)

{
  "id": 1,
  "title": "게시글 제목",
  "writer": "aloha",
  "content": "AJAX 에 대하여 알아봅니다."
}
JSON
복사

AJAX는 HTML이 아니라 “데이터”를 받는다

AJAX 대표 활용 사례

아이디 중복 체크

실시간 검색

댓글 작성

좋아요 / 조회수 증가

장바구니 수량 변경

실시간 알림

AJAX vs Form Submit

구분	Form	AJAX
페이지 새로고침
UX	나쁨	좋음
처리 방식	동기	비동기
화면 제어	어려움	자유로움

Spring / JSP와 AJAX 연계

Controller (Spring)

@GetMapping("/board/{id}")
@ResponseBody
public Board getBoard(@PathVariable("id") String id) {
    return new Board(id, "제목", "작성자", "내용");
}
Java
복사

AJAX 구현 방법 비교

① XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open("GET", `/board/${id}`);
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    const board = JSON.parse(xhr.responseText);
    document.querySelector("#title").innerText = board.title;
  }
};
JavaScript
복사

② fetch API

fetch(`/board/${id}`)
  .then(res => res.json())
  .then(board => {
    document.querySelector("#title").innerText = board.title;
  })
  .catch(error => {
    console.error('요청 실패:', error);
  });
JavaScript
복사

③ jQuery $.ajax

$.ajax({
  url: `/board/${id}`,
  type: 'GET',
  success: function(board) {
    $("#title").text(board.title);
  },
  error: function(xhr, status, error) {
    console.error('요청 실패:', error);
  }
});
JavaScript
복사