Поиск по сайту:

jQuery AJAX JSP Servlet Пример Java

Ajax в Java Веб-приложения на основе JSP Servlet очень распространены. Недавно я много писал о методах jQuery и о том, как мы можем их использовать. Сегодня мы рассмотрим одну из важных функций jQuery, с помощью которой мы можем легко выполнять вызовы AJAX и обрабатывать ответ в веб-приложении на основе Java Servlet JSP.

Пример сервлета Ajax JSP

Код сервлета Ajax

У нас есть очень простой сервлет, который получает имя пользователя из запроса, создает приветствие и возвращает его в виде простого текста.

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.

JSP-страница Ajax

Ниже приведен код нашей страницы 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>

Обратите внимание, что у нас есть два JS-файла, включенных в страницу JSP, первый из которых представляет собой JS-библиотеку jQuery, а другой содержит наш JS-код для вызова ajax. Я включаю jQuery JS из URL-адреса code.jquery.com, мы также можем загрузить его и сохранить вместе с нашим файлом JS. Код JSP очень прост, мы будем заполнять содержимое div ajaxGetUserServletResponse из ответа на вызов AJAX через jQuery.

jQuery AJAX JavaScript-файл

Ниже приведен код файла 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);
                });
        });
});

Мы также можем сделать вызов jQuery AJAX, используя его метод 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 Web Application Project