[java] JSP에서의 Ajax 처리 방법

07 Dec 2023

java

Ajax는 Asynchronous JavaScript and XML의 약자로, 웹 페이지에서 비동기적으로 데이터를 전송하고 받을 수 있는 기술입니다. JSP에서 Ajax를 처리하는 방법에 대해 알아보겠습니다.

1. jQuery 라이브러리 추가

Ajax를 편리하게 사용하기 위해 jQuery 라이브러리를 JSP 페이지에 추가해야 합니다. 다음 코드를 JSP 페이지의 <head> 태그 안에 추가하세요.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Ajax 요청 보내기

Ajax 요청을 보내기 위해 JavaScript 코드를 작성해야 합니다. JSP 파일 내에서 <script> 태그를 사용하여 JavaScript 코드를 작성하면 됩니다. 다음은 간단한 예시입니다.

<script>
  $(document).ready(function() {
    $.ajax({
      url: "ajax_process.jsp", // Ajax 요청을 처리할 JSP 파일의 경로
      type: "POST", // HTTP 요청 방식 (POST, GET 등)
      data: { // 서버로 보낼 데이터
        username: "john",
        age: 25
      },
      success: function(response) {
        // 요청에 성공한 경우 호출될 콜백 함수
        console.log(response); // 서버에서 받은 응답 출력
      },
      error: function(error) {
        // 요청에 실패한 경우 호출될 콜백 함수
        console.log(error); // 에러 메시지 출력
      }
    });
  });
</script>

위의 예시에서 “ajax_process.jsp”는 Ajax 요청을 처리하고 응답을 반환하는 JSP 파일의 경로입니다. ‘data’ 객체를 통해 서버로 보낼 데이터를 설정할 수 있습니다.

3. JSP에서 Ajax 요청 처리

Ajax 요청을 처리하기 위해 JSP 파일에 해당하는 로직을 작성해야 합니다. ajax_process.jsp 파일에서는 받은 데이터를 처리하고 응답을 반환하는 코드를 작성할 수 있습니다.

다음은 간단한 예시입니다.

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

<%
  // 받은 데이터 추출
  String username = request.getParameter("username");
  int age = Integer.parseInt(request.getParameter("age"));

  // 응답 내용 생성
  String responseMessage = "Hello " + username + "! Your age is " + age;

  // 응답 반환
  response.setContentType("text/html; charset=UTF-8");
  PrintWriter out = response.getWriter();
  out.println(responseMessage);
  out.close();
%>

위의 예시에서는 받은 데이터를 getParameter() 메소드를 통해 추출합니다. 그리고 응답을 생성하기 위해 PrintWriter를 사용하여 응답 내용을 출력합니다.

이제 JSP 파일을 실행하고 Ajax 요청을 보내보세요. 서버로부터 받은 응답이 콘솔에 출력될 것입니다.

위의 예시는 간단한 Ajax 요청 처리 방법을 보여주는 것이며, 실제로는 더 복잡한 로직을 구현할 수 있습니다. 필요에 따라 Ajax 요청에 대한 추가적인 설정과 JSP 파일 내에서의 데이터 처리를 구현하면 됩니다.

참고 문서:

jQuery Ajax documentation