Ajax - 이벤트 훅

📌 Ajax 이벤트 훅(Ajax Event Hooks)이란?

Ajax 이벤트 훅(Ajax Event Hooks) 은 jQuery에서 Ajax 요청이 실행될 때 특정 이벤트를 가로채서 원하는 작업을 수행할 수 있도록 하는 기능이다.

즉, Ajax 요청의 시작, 성공, 실패, 완료 등의 이벤트를 감지하여 특정 로직을 실행할 수 있다.

---

✅ Ajax 이벤트 훅 종류

jQuery에서는 전역 이벤트(Global Events)와 개별 이벤트(Local Events) 두 가지 방식으로 Ajax 이벤트를 처리할 수 있다.

1️⃣ 전역 이벤트 (Global Events)

전역 이벤트는 모든 Ajax 요청에 대해 동일한 이벤트 핸들러를 실행할 때 사용된다.

이벤트 메서드 설명

ajaxStart	Ajax 요청이 시작될 때 실행
ajaxSend	Ajax 요청을 서버에 보내기 직전에 실행
ajaxSuccess	Ajax 요청이 성공했을 때 실행
ajaxError	Ajax 요청이 실패했을 때 실행
ajaxComplete	Ajax 요청이 완료되었을 때 실행 (성공/실패 관계없이)
ajaxStop	모든 Ajax 요청이 끝난 후 실행

📌 전역 이벤트 예제

$(document).ready(function() {
    // 모든 Ajax 요청이 시작될 때 실행됨
    $(document).ajaxStart(function() {
        console.log("Ajax 요청이 시작됨...");
    });

    // Ajax 요청이 서버로 보내지기 전에 실행됨
    $(document).ajaxSend(function(event, jqXHR, settings) {
        console.log("서버로 요청 보내기 전", settings.url);
    });

    // Ajax 요청이 성공했을 때 실행됨
    $(document).ajaxSuccess(function(event, jqXHR, settings) {
        console.log("요청 성공:", settings.url);
    });

    // Ajax 요청이 실패했을 때 실행됨
    $(document).ajaxError(function(event, jqXHR, settings, error) {
        console.error("요청 실패:", settings.url, "에러:", error);
    });

    // Ajax 요청이 완료되었을 때 (성공/실패 상관없이) 실행됨
    $(document).ajaxComplete(function(event, jqXHR, settings) {
        console.log("요청 완료:", settings.url);
    });

    // 모든 Ajax 요청이 끝난 후 실행됨
    $(document).ajaxStop(function() {
        console.log("모든 Ajax 요청이 끝남.");
    });
});

✅ 이벤트 실행 흐름

1. ajaxStart
2. ajaxSend
3. Ajax 요청 수행 (성공 또는 실패)
4. ajaxSuccess 또는 ajaxError
5. ajaxComplete
6. ajaxStop (모든 Ajax 요청이 끝난 경우)

---

2️⃣ 개별 이벤트 (Local Events)

개별 이벤트는 특정 Ajax 요청에 대해서만 이벤트를 처리할 때 사용된다.

이벤트 메서드 설명

beforeSend	Ajax 요청을 서버에 보내기 전에 실행
success	Ajax 요청이 성공했을 때 실행
error	Ajax 요청이 실패했을 때 실행
complete	Ajax 요청이 완료되었을 때 실행 (성공/실패 관계없이)

📌 개별 이벤트 예제

$.ajax({
    url: "/api/data",
    type: "GET",
    beforeSend: function() {
        console.log("개별 요청: 서버로 요청 보내기 전...");
    },
    success: function(response) {
        console.log("개별 요청 성공:", response);
    },
    error: function(xhr, status, error) {
        console.error("개별 요청 실패:", error);
    },
    complete: function() {
        console.log("개별 요청 완료");
    }
});

✅ 이벤트 실행 흐름

1. beforeSend
2. Ajax 요청 수행
3. success 또는 error
4. complete

---

✅ 전역 vs 개별 이벤트 차이점

구분 전역 이벤트 (ajaxStart, ajaxComplete) 개별 이벤트 (beforeSend, success)

적용 범위	모든 Ajax 요청에 적용	특정 Ajax 요청에만 적용
호출 시점	jQuery 내부에서 자동으로 호출됨	개별 Ajax 요청에서 직접 설정
공통 작업 처리	로딩 인디케이터, 전역 에러 처리 등 전체 Ajax 요청에 대한 공통 작업 적용	특정 요청에만 적용 가능

✅ 언제 전역 이벤트를 사용해야 할까?

• 모든 Ajax 요청에 공통적으로 실행해야 하는 작업이 있을 때
• ex) 로딩 애니메이션 표시, 공통 에러 메시지 처리, 인증 토큰 추가

✅ 언제 개별 이벤트를 사용해야 할까?

• 특정 Ajax 요청에 대해서만 동작해야 할 때
• ex) 특정 요청의 응답을 UI에 반영하는 경우

---

✅ 실전 예제: 로딩 인디케이터 표시

Ajax 요청이 진행되는 동안 로딩 스피너를 표시하고, 완료되면 숨기는 방식

$(document).ajaxStart(function() {
    $("#loading").show();  // Ajax 시작 시 로딩 아이콘 표시
});

$(document).ajaxStop(function() {
    $("#loading").hide();  // 모든 Ajax 요청 완료 시 로딩 아이콘 숨김
});

<div id="loading" style="display:none;">
    <img src="loading.gif" alt="Loading...">
</div>

✅ 이렇게 하면 모든 Ajax 요청이 실행될 때 자동으로 로딩 UI가 표시되고, 완료되면 사라짐.

---

✅ 결론

• Ajax 이벤트 훅(Ajax Event Hooks) 은 Ajax 요청이 실행될 때 특정 이벤트를 감지하여 원하는 작업을 수행할 수 있도록 도와주는 기능이다.
• 전역 이벤트 (ajaxStart, ajaxComplete) 는 모든 Ajax 요청에 대해 공통적으로 실행되는 로직을 적용할 때 사용.
• 개별 이벤트 (beforeSend, success) 는 특정 Ajax 요청에서만 동작하는 로직을 적용할 때 사용.
• 전역 이벤트는 로딩 UI, 인증 토큰 처리 등에 유용하고, 개별 이벤트는 개별 요청별 커스텀 처리가 필요할 때 사용하면 된다. 🚀