Пример Java сервлета jQuery AJAX JSP

Автор оригинала: Pankaj Kumar.

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

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

Я использую среду разработки Eclipse для создания “Динамического веб-проекта”, вы также можете использовать любую другую среду разработки. Наше основное внимание будет сосредоточено на вызове jQuery и 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);
	}

}

Обратите внимание, что я использую аннотации сервлета-3 для настройки, если вам нравится конфигурация на основе XML, вы можете сделать это в web.xml файл. Мы будем вызывать этот сервлет асинхронно с помощью jQuery AJAX поддержки.

Страница Ajax JSP

Ниже приведен код нашей страницы JSP, в нем есть поле ввода, в котором мы можем указать имя пользователя. Как только фокус будет смещен, метод jQuery AJAX выполнит, вызовет наш сервлет и обработает ответ.

индекс.код jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>












	

		Enter Your Name: 
	
	

	


	Ajax Response:
	

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

Код JSP очень прост, мы заполним ajax, чтобы получить пользовательский сервлет-ответ div-контент из ответа на вызов AJAX через jQuery.

Файл jQuery AJAX JavaScript

Ниже приведен наш код файла javascript для запроса jQuery AJAX.

app-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
});

Наше приложение для примера сервлета jQuery Ajax JSP готово, просто создайте и разверните его в вашем любимом контейнере сервлетов. На рисунке ниже показан полученный результат, я использую инструменты разработчика Chrome, чтобы подтвердить, что наш сервлет вызывается.

Краткое описание примера сервлета Ajax JSP

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