Ajax(Asynchronous JavaScript and XML) - 비동기,동기 차이 및 예제 1편

AJAX(Asynchronous JavaScript and XML) - 비동기 방식과 동기 방식 설명

동기(Synchronous) 방식 일처리

동기 방식에서는 클라이언트가 서버에 요청을 보내면 응답이 도착할 때까지 기다려야 합니다. 즉, 서버의 응답이 도착할 때까지 클라이언트는 다른 작업을 할 수 없으며, 다음 코드가 실행되지 않습니다.

동기 방식 예제 (JavaScript)

function syncRequest() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", false); // false는 동기 방식
    xhr.send(); // 응답이 올 때까지 여기서 대기

    if (xhr.status === 200) {
        console.log(xhr.responseText); // 서버 응답 출력
    }
}

syncRequest();
console.log("이 메시지는 서버 응답 후 실행됩니다."); // 서버 응답 후 실행

• xhr.open("GET", "URL", false)의 false 값은 동기 방식을 의미합니다.
• 서버에서 응답이 올 때까지 실행이 멈춰 있으며, 응답을 받아야만 다음 코드가 실행됩니다.
• 이 방식은 **UI가 멈추는 현상(브라우저가 응답하지 않음)**이 발생할 수 있기 때문에 거의 사용되지 않습니다.

 

---

비동기(Asynchronous) 방식 일처리

비동기 방식에서는 클라이언트가 서버에 요청을 보낸 후 응답을 기다리지 않고 다른 작업을 수행할 수 있습니다. 응답이 준비되면 미리 지정한 콜백 함수가 실행됩니다.

비동기 방식 예제 (AJAX)

function asyncRequest() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true); // true는 비동기 방식
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText); // 서버 응답 출력
        }
    };
    xhr.send(); // 요청을 보낸 후 응답을 기다리지 않고 바로 다음 코드 실행
}

asyncRequest();
console.log("이 메시지는 서버 응답 전에 실행될 수 있습니다."); // 서버 응답을 기다리지 않고 실행

• xhr.open("GET", "URL", true)의 true 값은 비동기 방식을 의미합니다.
• 서버 응답이 도착하기 전에 다른 코드가 먼저 실행될 수 있습니다.
• onreadystatechange 콜백 함수를 사용하여 서버 응답이 오면 그때 데이터를 처리합니다.

---

 

JSP에서 AJAX를 사용하는 이유:

1. 페이지 새로 고침 없이 서버와 통신: AJAX를 사용하면 사용자가 페이지를 새로 고침하지 않고도 데이터를 서버로 보내고 응답을 받을 수 있습니다. 이로 인해 웹 애플리케이션의 성능과 응답성이 향상됩니다.
2. 서버의 데이터를 동적으로 로드: 예를 들어, 폼 제출, 검색, 아이디 중복 검사 등에서 AJAX를 사용하면 서버의 데이터를 동적으로 받아와 페이지를 업데이트할 수 있습니다.
3. 비동기 처리: AJAX는 비동기적으로 동작하기 때문에 서버의 응답을 기다리는 동안 사용자는 다른 작업을 할 수 있습니다.

 

JSP에서 AJAX 호출 예시

1. 클라이언트 측 (AJAX 요청): JSP에서 <c:url>을 사용하여 서버 URL을 동적으로 생성하고 AJAX 요청을 보냅니다.

<!-- JSP 파일에서 AJAX를 사용할 때 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  function checkDuplicateId() {
    var id = $("#id").val(); // 사용자 입력값을 가져옵니다.
    
    if(id == '') {
      alert("아이디를 입력해주세요.");
      return;
    }

    // AJAX 요청 보내기
    $.ajax({
      url: "<c:url value='/checkIdDuplicate.do'/>",  // JSP에서 동적으로 URL을 생성
      type: "POST",
      data: { "id": id },  // 서버로 보낼 데이터
      success: function(response) {
        if(response == "NO") {
          alert("사용 가능한 아이디입니다.");
        } else {
          alert("이미 존재하는 아이디입니다.");
        }
      },
      error: function() {
        alert("서버 오류 발생");
      }
    });
  }
</script>

2. 서버 측 (Servlet 또는 JSP Controller): AJAX 요청을 처리하는 서블릿 또는 컨트롤러에서 요청을 받습니다.

@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);

        // 중복 여부에 따라 "YES" 또는 "NO"를 클라이언트로 반환
        response.getWriter().write(isDuplicate ? "YES" : "NO");
    }

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

 

 

1. AJAX 요청

$.ajax({
  url: "<c:url value='/memberDbcheck.do'/>", // 요청할 URL
  type: "POST", // 요청 방식 (POST)
  data: { "id": id }, // 서버로 보낼 데이터
  success: dbCheck, // 응답이 오면 dbCheck 함수 실행 (콜백 함수)
  error: function() { alert("error"); } // 오류 발생 시 처리
});

• 클라이언트는 서버에 요청을 보냅니다.
• 비동기 방식이므로 서버 응답을 기다리지 않고 요청을 보낸 후 다른 작업이 가능합니다.
• 응답이 준비되면 success: dbCheck로 지정한 **콜백 함수(dbCheck)**가 실행됩니다.

2. 서버 측에서 응답 처리

public String requestHandler(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    String id = request.getParameter("id"); // 클라이언트가 보낸 ID 값 받기
    MemberDAO dao = new MemberDAO();
    String dbDouble = dao.memberDbcheck(id); // DB에서 아이디 중복 체크 (YES or NO)

    response.getWriter().print(dbDouble); // 클라이언트에 응답 보내기 (YES or NO)
    return null;
}

• 클라이언트가 보낸 id 값을 서버에서 받음
• DB에서 아이디 중복 여부를 확인 (YES 또는 NO 반환)
• response.getWriter().print(dbDouble);을 사용하여 클라이언트에 응답 전송

3. 콜백 함수(dbCheck)에서 응답 처리

function dbCheck(data) {
  if (data != "NO") {
    alert("중복된 아이디입니다.");
  } else {
    alert("사용 가능한 아이디입니다.");
  }
  $("#id").focus();
}

• 서버에서 YES 또는 NO를 응답으로 보내면, 그 값이 data에 들어옵니다.
• 응답 값을 확인한 후, 중복 여부에 따라 적절한 메시지를 출력합니다.

---

콜백 함수 개념

콜백 함수는 특정 작업이 끝난 후 실행될 함수를 의미합니다. AJAX에서 비동기 요청을 처리할 때 서버의 응답이 언제 도착할지 모르므로, 응답이 도착하면 실행될 콜백 함수를 지정해둡니다.

콜백 함수 예제

function processResult(result) {
    console.log("서버 응답: " + result);
}

function sendRequest(callback) {
    setTimeout(function () {
        let response = "서버 데이터";
        callback(response); // 응답이 도착하면 콜백 함수 실행
    }, 2000);
}

sendRequest(processResult); // 2초 후에 processResult 실행
console.log("요청을 보냈습니다. 응답을 기다리는 중...");

• sendRequest 함수는 비동기적으로 동작하며, 2초 후에 서버 응답을 콜백 함수 processResult에 전달합니다.
• AJAX에서 success: dbCheck 부분이 바로 이러한 콜백 함수 개념을 적용한 것입니다.

---

추가적으로 알아야 할 개념들

 

1. Promise 기반의 AJAX (fetch API)

최근에는 AJAX보다 fetch API를 사용하여 비동기 요청을 처리하는 방식이 많이 사용됩니다.

fetch API를 활용한 AJAX 요청

fetch('/memberDbcheck.do', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({ id: id })
})
.then(response => response.text()) // 서버 응답을 텍스트로 변환
.then(data => dbCheck(data)) // 응답을 dbCheck 함수로 전달
.catch(error => console.error('Error:', error));

• fetch는 Promise 기반이므로 then()을 사용하여 응답을 처리합니다.
• 기존 XMLHttpRequest 방식보다 더 간결한 코드로 비동기 요청을 처리할 수 있습니다.

 

2. async/await을 사용한 AJAX 요청

비동기 요청을 처리할 때 **async/await**을 사용하면 더 직관적인 코드 작성이 가능합니다.

async function checkId() {
    try {
        let response = await fetch('/memberDbcheck.do', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id: id })
        });

        let data = await response.text();
        dbCheck(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

• await fetch(...)는 응답을 기다린 후 다음 코드가 실행되도록 합니다.
• async/await을 사용하면 then/catch 대신 동기 코드처럼 쉽게 읽을 수 있습니다.

---

JSP에서 AJAX를 사용하여 서버와 통신하는 주요 흐름:

1. 클라이언트 측 (JSP 페이지): 사용자 입력을 받아서 AJAX를 사용하여 서버로 전송합니다.
   • AJAX 요청: 클라이언트는 사용자가 입력한 데이터를 서버로 보내고, 서버에서 그 데이터를 처리한 후 응답을 클라이언트로 보냅니다.
2. 서버 측 (Servlet 또는 JSP Controller): 서버에서는 클라이언트에서 보낸 데이터를 받아 처리하고, 그 결과를 클라이언트에게 반환합니다.
   • 서버 응답: 서버는 클라이언트에 적절한 응답을 보냅니다. 예를 들어, 아이디가 중복되는지 여부를 알려주는 "YES" 또는 "NO"와 같은 값을 보낼 수 있습니다.
3. 클라이언트 측 (JSP 페이지): 서버로부터 받은 응답을 기반으로 필요한 동작을 실행합니다. 예를 들어, 아이디가 중복되지 않으면 "사용 가능한 아이디입니다."라는 메시지를 띄우는 방식입니다.

 

요약

• JSP에서 AJAX를 사용하는 것은 페이지를 새로 고침하지 않고 비동기적으로 서버와 통신할 수 있기 때문에 웹 애플리케이션의 성능과 사용자 경험을 향상 콜백함수 시킬 수 있습니다.
• JSP에서 AJAX 호출을 사용하려면 $.ajax() 메서드를 통해 서버에 데이터를 보내고, 그에 대한 응답을 받아 필요한 처리를 합니다.
• 주로 아이디 중복 검사, 폼 제출, 실시간 데이터 검색 등에서 많이 사용됩니다.