웹사이트 검색

jQuery AJAX JSP 서블릿 자바 예제

Java JSP Servlet 기반 웹 애플리케이션의 Ajax는 매우 일반적입니다. 최근에 jQuery 메서드와 이를 사용하는 방법에 대해 많은 글을 썼습니다. 오늘 우리는 AJAX 호출을 쉽게 실행하고 Java Servlet JSP 기반 웹 애플리케이션에서 응답을 처리할 수 있는 중요한 jQuery 기능 중 하나를 살펴볼 것입니다.

Ajax JSP 서블릿 예제

Ajax 서블릿 코드

요청에서 userName을 가져오고 인사말을 작성하고 이를 일반 텍스트로 리턴하는 매우 간단한 서블릿이 있습니다.

package com.journaldev.servlets;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String userName = request.getParameter("userName").trim();
		if(userName == null || "".equals(userName)){
			userName = "Guest";
		}
		
		String greetings = "Hello " + userName;
		
		response.setContentType("text/plain");
		response.getWriter().write(greetings);
	}

}

구성에 Servlet-3 주석을 사용하고 있습니다. XML 기반 구성이 마음에 들면 web.xml 파일에서 구성할 수 있습니다. jQuery AJAX 지원을 사용하여 이 서블릿을 비동기식으로 호출합니다.

Ajax JSP 페이지

아래는 JSP 페이지 코드이며 사용자 이름을 제공할 수 있는 입력 필드가 있습니다. 포커스가 이동하는 즉시 jQuery AJAX 메서드가 실행되어 서블릿을 호출하고 응답을 처리합니다. index.jsp 코드:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery, Ajax and Servlet/JSP integration example</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"
	type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>
<body>

	<form>
		Enter Your Name: <input type="text" id="userName" />
	</form>
	<br>
	<br>

	<strong>Ajax Response</strong>:
	<div id="ajaxGetUserServletResponse"></div>
</body>
</html>

JSP 페이지에는 두 개의 JS 파일이 포함되어 있습니다. 첫 번째는 jQuery JS 라이브러리이고 다른 하나는 ajax 호출을 위한 JS 코드를 포함합니다. 저는 code.jquery.com URL에서 jQuery JS를 포함하고 있으며, 다운로드하여 JS 파일과 함께 보관할 수도 있습니다. JSP 코드는 매우 간단합니다. jQuery를 통해 AJAX 호출 응답에서 ajaxGetUserServletResponse div 콘텐츠를 채울 것입니다.

jQuery를 AJAX JavaScript 파일

아래는 jQuery AJAX 요청에 대한 자바스크립트 파일 코드입니다. 앱-ajax.js 코드:

$(document).ready(function() {
        $('#userName').blur(function(event) {
                var name = $('#userName').val();
                $.get('GetUserServlet', {
                        userName : name
                }, function(responseText) {
                        $('#ajaxGetUserServletResponse').text(responseText);
                });
        });
});

아래와 같이 ajax() 메서드를 사용하여 jQuery AJAX 호출을 만들 수도 있습니다. 위는 ajax() 메서드를 사용하는 간단한 방법입니다.

$(document).ready(function() {
	$('#userName').blur(function() {
		$.ajax({
			url : 'GetUserServlet',
			data : {
				userName : $('#userName').val()
			},
			success : function(responseText) {
				$('#ajaxGetUserServletResponse').text(responseText);
			}
		});
	});
});

아래는 jQuery ajax() 메서드의 구문입니다. 위의 코드와 연결해 보면 여기서 무슨 일이 일어나는지 이해할 수 있을 것입니다.

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Ajax JSP 서블릿 예제 요약

우리는 jQuery AJAX 지원의 기본 사항과 이를 Java 웹 애플리케이션과 통합하는 방법을 배웠습니다. 다음 자습서에서는 모든 웹 애플리케이션에서 사용할 수 있는 jQuery의 더 많은 기능을 배우게 됩니다. 아래 링크에서 최종 프로젝트를 다운로드할 수 있습니다.

jQuery AJAX Java 웹 애플리케이션 프로젝트 다운로드