JSP에서 AJAX를 활용한 비동기 처리

 

 

 

오늘도 JSP입니다. 이번 포스팅에서는 AJAX를 배워보려고 해요. AJAX는 자바스크립트와 XML을 이용하여 비동기적으로 서버와 브라우저가 데이터를 주고받을 수 있는 기술입니다. AJAX를 이용하면 페이지 전부를 새로고침하지 않고도 필요한 부분만 갱신할 수 있으므로, 더 나은 사용자 경험을 제공하는 동시에 서버 부하도 줄일 수 있습니다. JSP에서 AJAX를 활용한 비동기 데이터 처리를 구현하는 방법에 대해 설명하겠습니다.

 

 

 

 

목차

 

 

AJAX 기본 개념

AJAX는 비동기적으로 데이터를 처리하는 기술로, 일반적으로 jQuery나 JavaScript를 이용하여 구현합니다. AJAX 요청을 보내기 위해서는  $. ajax() 메서드나 $.post(), $.get() 메서드 등이 사용됩니다. 이 메서드들은 HTTP 요청을 보내고 응답을 받는 비동기적인 방식으로 동작이 가능합니다. 그리고 요청이 완료되면 이벤트 핸들러가 호출되어 결과가 처리됩니다. 

$.ajax({
    url: "요청 URL",
    type: "HTTP 요 방식(GET 또는 POST)",
    data: "HTTP 요청 데이터",
    dataType: "HTTP 응답 데이터 타입(JSON, XML 등)",
    success: function(response){
        // 요청이 성공했을 때 실행할 코드
    },
    error: function(xhr, status, error){
        // 요청이 실패했을 때 실행할 코드
    }
});

 

 

 

JSP에서 AJAX 사용하기

JSP에서 AJAX를 사용하기 위해서는 $.ajax()` 메서드를 이용하여 서버로 데이터를 전송하고, 이를 처리할 서블릿을 작성해야 합니다. 이번 예제에서는, JSP에서 입력한 값을 서블릿으로 전송하고, 서블릿에서 처리한 결과를 JSP에 출력하는 방법을 보여드릴게요.

 

2.1. JSP 페이지 작성하기

우선 사용자가 입력할 수 있는 폼을 작성해야 합니다. 이 폼에서 입력한 값을 서버로 전송하고, 서버에서 이를 처리한 결과를 받아와서 출력해 보겠습니다.

<form id="form" method="post">
    <label forname">이름:</label>
    <input type="text" id="name" name="name"/>
    <br/>
    <label for="age">나이:</label>
    <input type="text" id="age" name="age"/>
    <br/>
    <button type="submit">전송</>
</form>
<div id="result"></div>

위 코드에서 form 요소는 사용자가 입력한 데이터를 서버로 전송하기 위한 폼입니다. name과 age 필드를 입력하고, 전송 버튼을 클릭하면 서버로 데이터가 전송됩니다. result 요소는 서버에서 처리한 결과를 출력할 영역입니다.

 

2.2. AJAX 요청 보내기

다음으로 $.ajax() 메서드를 이용하여 AJAX 요청을 보내는 JavaScript 코드를 작성해야 합니다. 이 코드는 사용자가 입력한 데이터를버로 전송하고, 서버에서 처리한 결과를 받아와서, result 요소에 출력합니다.

$(document).ready(function(){
    $("#form").submit(function(event){
        event.preventDefault(); // 폼 기본 동작 방지(브라우저 새로고침)

        var name = $("#name").val();
        var age = $("#age").val();

        $.ajax({
            url: "servletUrl",
            type: "POST",
            data: {name: name, age: age},
            dataType: "text",
            success: function(response){
                $("#result").html(response);
            },
            error: function(xhr, status, error){
                $("#result").html("오류: " + error);
            }
        });
    });
});

• submit() 메서드는 사용자가 폼을 전송할 때 호출되는 이벤트 핸들러입니다.
• val() 메서드는 해당 요소의 값(value)을 반환합니다.
• $.ajax() 메서드에서는 data 매개변수에 전송할 데이터를 객체 형태로 전달합니다.
• dataType 매개변수는 서버에서 반환하는 데이터의 타입을 지정합니다.
• success() 함수와 error() 함수 요청이 성공했을 때와 실패했을 때 호출됩니다.

 

2.3. 서블릿에서 요청 처리하기

JSP 페이지에서 작성된 데이터를 받아서 처리하는 서블릿을 작성해야 합니다.

@WebServlet("/servletUrl")
public class MyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));

        String result = name + "님은 " + age + "살입니다.";

        response.setContentType("text/plain");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(result);
    }
}

doPost() 메서드는 POST 요청을 처리하는 메서드입니다. request.getParameter() 메서드를 이용하여 JSP 페이지 전송한 데이터를 받아서 처리한 결과를 클라이언트에게 전송합니다.

 

 

마무리

오늘은 AJAX에 대해 알아보았습니다. JSP에서 AJAX를 활용하면 웹페이지의 일분만 갱신하는 등 좀 더 빠른 사용자 경험을 제공할 수 있습니다.  포스팅한 방법을 참고하여 AJAX를 활용해 보세요. 이를 통해 웹페이지에 필요한 부분만 갱신하여 더 효율적으로 작동시킬 수 있습니다! 감사합니다!

 

 

함께 보면 좋은 글

JSP 태그 JSTL 사용방법