Ajax - 비동기,동기 차이 및 예제(async/await, Promise, fetch API)

JSP에서 Promise와 async/await를 활용한 AJAX 개발

1️⃣ 기존 jQuery AJAX 방식 (기본적인 JSP + AJAX)

$.ajax({
    url: "<c:url value='/checkIdDuplicate.do'/>",
    type: "POST",
    data: { id: $("#id").val() },
    success: function(response) {
        if (response === "YES") {
            alert("중복된 아이디입니다.");
        } else {
            alert("사용 가능한 아이디입니다.");
        }
    },
    error: function() {
        alert("서버 오류 발생");
    }
});

• 기존 jQuery 방식으로 AJAX 요청을 보내는 방식입니다.
• 하지만 콜백 함수가 중첩되거나 코드가 복잡해지는 문제점이 있습니다.

---

2️⃣ Promise를 활용한 JSP + AJAX (ES6 이상)

function checkIdDuplicate(id) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: "<c:url value='/checkIdDuplicate.do'/>",
            type: "POST",
            data: { id: id },
            success: function(response) {
                resolve(response); // 성공 시 Promise 해결
            },
            error: function() {
                reject("서버 오류 발생");
            }
        });
    });
}

// 사용 예시
checkIdDuplicate($("#id").val())
    .then(response => {
        if (response === "YES") {
            alert("중복된 아이디입니다.");
        } else {
            alert("사용 가능한 아이디입니다.");
        }
    })
    .catch(error => {
        alert(error);
    });

 

✅ Promise 사용 장점

• then()과 catch()를 활용하여 에러 핸들링이 명확합니다.
• callback이 중첩되지 않아 가독성이 좋아집니다.
• 여러 개의 AJAX 요청을 Promise.all()로 묶어 동시에 여러 요청을 보낼 수도 있습니다.

---

3️⃣ fetch API와 Promise를 활용한 JSP + AJAX

function checkIdDuplicate(id) {
    return fetch("<c:url value='/checkIdDuplicate.do'/>", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body: new URLSearchParams({ id: id })
    })
    .then(response => response.text()) // 응답을 텍스트로 변환
    .then(data => data)
    .catch(error => {
        console.error("Error:", error);
        throw new Error("서버 오류 발생");
    });
}

// 사용 예시
checkIdDuplicate($("#id").val())
    .then(response => {
        if (response === "YES") {
            alert("중복된 아이디입니다.");
        } else {
            alert("사용 가능한 아이디입니다.");
        }
    })
    .catch(error => {
        alert(error);
    });

✅ fetch API 사용 장점

• fetch는 최신 브라우저에서 지원하는 기본 API로, jQuery 없이도 사용 가능
• then()과 catch()를 활용하여 비동기 요청을 효과적으로 관리
• XMLHttpRequest보다 코드가 간결하고 사용하기 쉬움

---

4️⃣ async/await을 활용한 JSP + AJAX (최신 방식)

async function checkIdDuplicate(id) {
    try {
        let response = await fetch("<c:url value='/checkIdDuplicate.do'/>", {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: new URLSearchParams({ id: id })
        });

        let data = await response.text(); // 응답을 문자열로 변환
        return data;
    } catch (error) {
        console.error("Error:", error);
        throw new Error("서버 오류 발생");
    }
}

// 사용 예시
async function handleCheck() {
    try {
        let result = await checkIdDuplicate($("#id").val());
        if (result === "YES") {
            alert("중복된 아이디입니다.");
        } else {
            alert("사용 가능한 아이디입니다.");
        }
    } catch (error) {
        alert(error.message);
    }
}

document.getElementById("checkButton").addEventListener("click", handleCheck);

✅ async/await 사용 장점

• then() 대신 await을 사용하여 동기 코드처럼 직관적으로 작성 가능
• try-catch를 활용하여 에러 핸들링이 간단
• Promise 기반이므로 기존 fetch 코드와 결합 가능

---

서버 측 (JSP 또는 Servlet) 처리

위의 AJAX 요청을 처리하려면 JSP 또는 Servlet 컨트롤러에서 서버 로직을 구현해야 합니다.

JSP에서 데이터 처리 (Ajax 요청을 받는 JSP 파일)

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page import="java.io.PrintWriter" %>
<%@ page import="java.sql.*" %>

<%
    String id = request.getParameter("id");

    // DB에서 아이디 중복 체크하는 로직 (예시)
    boolean isDuplicate = false;
    if (id.equals("existingUser")) {
        isDuplicate = true;
    }

    PrintWriter out = response.getWriter();
    out.print(isDuplicate ? "YES" : "NO");
%>

• JSP에서도 서버 응답을 YES 또는 NO로 반환하도록 처리할 수 있습니다.
• 하지만 Servlet을 사용하여 처리하는 것이 더 권장되는 방식입니다.

Servlet을 활용한 서버 처리

@WebServlet("/checkIdDuplicate.do")
public class CheckIdDuplicateServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String id = request.getParameter("id");

        // DB에서 중복된 아이디 확인 (가상의 로직)
        boolean isDuplicate = checkIdInDatabase(id);

        // 클라이언트에 응답 반환
        response.getWriter().write(isDuplicate ? "YES" : "NO");
    }

    private boolean checkIdInDatabase(String id) {
        // 실제 DB 연결을 통해 아이디를 확인하는 로직
        return id.equals("existingUser");  // 예제: "existingUser"라는 ID만 중복 처리
    }
}

✅ Servlet을 사용하는 이유

• JSP보다 MVC 패턴을 따르는 구조로 유지보수 및 확장성이 뛰어남.
• PrintWriter를 이용하여 JSON 또는 문자열 데이터를 반환할 수 있음.
• 비즈니스 로직을 JSP에 포함하지 않고 따로 분리할 수 있어 유지보수에 용이.

---

정리

1. 기존 JSP + jQuery AJAX
   • $.ajax()를 사용하여 서버와 통신하는 전통적인 방식.
   • 코드가 복잡해질 수 있으며 콜백 지옥(CallBack Hell) 문제가 발생할 수 있음.
2. Promise를 활용한 JSP + AJAX
   • Promise를 사용하면 비동기 처리가 더 체계적으로 가능.
   • then()과 catch()로 에러 핸들링이 명확해짐.
3. fetch API를 활용한 JSP + AJAX
   • fetch()를 사용하면 코드가 더 간결하고 유지보수하기 쉬워짐.
   • XMLHttpRequest보다 최신 방식.
4. async/await을 활용한 JSP + AJAX
   • 비동기 요청을 await으로 처리하면 동기 코드처럼 직관적으로 작성 가능.
   • try-catch를 활용해 에러 핸들링을 더 쉽게 할 수 있음.