jQuery AJAX与Java JSP Servlet交互：完整开发实例教程

2 年 ago

新, 韵

2 minutes

在基于Java JSP Servlet的Web应用开发中，Ajax技术被广泛应用。最近我撰写了许多关于jQuery方法及其使用方式的内容。今天，我们将探讨jQuery的一个重要功能，通过该功能我们可以轻松执行Ajax调用，并在基于Java Servlet JSP的Web应用中处理服务器响应。

Ajax JSP Servlet 示例

我正在使用Eclipse IDE创建”Dynamic Web Project”（动态Web项目），你也可以使用其他任何IDE。我们的主要关注点将是如何使用jQuery和AJAX从JSP页面调用servlet。下图展示了最终的项目结构。

Ajax Servlet 代码

我们创建了一个非常简单的servlet，它从请求中获取用户名参数，创建一条问候语，并将其作为纯文本返回给客户端。

package com.Olivia.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.0的注解方式进行配置。如果你更喜欢基于XML的配置方式，可以在web.xml文件中进行相应设置。接下来，我们将使用jQuery的AJAX功能来异步调用这个servlet。

Ajax JSP页面

以下是我们的JSP页面代码，其中包含一个输入字段，用户可以在其中输入用户名。一旦输入框失去焦点，jQuery AJAX方法将会自动执行，调用我们的servlet并处理返回的响应。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与Servlet/JSP集成示例</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>
		请输入您的姓名: <input type="text" id="userName" />
	</form>
	<br>
	<br>

	<strong>Ajax响应结果</strong>:
	<div id="ajaxGetUserServletResponse"></div>
</body>
</html>

请注意，我们在JSP页面中引入了两个JavaScript文件：第一个是jQuery库文件，另一个是包含我们Ajax调用逻辑的自定义JS代码。这里我直接从code.jquery.com的URL引入jQuery库，你也可以选择下载它并与项目中的其他JS文件一起保存。JSP代码结构非常简单，我们将通过jQuery处理Ajax调用的响应，并将返回的内容填充到id为”ajaxGetUserServletResponse”的div元素中。

jQuery的AJAX JavaScript文件

以下是我们用于处理jQuery AJAX请求的JavaScript文件代码。app-ajax.js的完整代码如下：

$(document).ready(function() {
        // 当用户名输入框失去焦点时触发
        $('#userName').blur(function(event) {
                // 获取输入的用户名
                var name = $('#userName').val();
                // 发送GET请求到GetUserServlet
                $.get('GetUserServlet', {
                        userName : name
                }, function(responseText) {
                        // 将服务器返回的响应文本显示在页面上
                        $('#ajaxGetUserServletResponse').text(responseText);
                });
        });
});

我们也可以使用jQuery的ajax()方法进行AJAX调用，具体实现如下。前面使用的$.get()方法实际上是ajax()方法的一种简写形式。

$(document).ready(function() {
	// 当用户名输入框失去焦点时触发
	$('#userName').blur(function() {
		// 使用ajax方法发送请求
		$.ajax({
			url : 'GetUserServlet',
			data : {
				userName : $('#userName').val()
			},
			success : function(responseText) {
				// 请求成功时，将服务器返回的响应文本显示在页面上
				$('#ajaxGetUserServletResponse').text(responseText);
			}
		});
	});
});

以下是jQuery ajax()方法的基本语法，尝试将其与上面的代码联系起来，你将更好地理解代码的工作原理。

$.ajax({
  url: url,        // 请求的URL地址
  data: data,      // 发送到服务器的数据
  success: success, // 请求成功后的回调函数
  dataType: dataType // 预期服务器返回的数据类型
});

至此，我们的jQuery Ajax JSP Servlet示例应用已经开发完成，只需在你喜欢的servlet容器（如Tomcat）中进行构建和部署即可。下面的图片展示了应用的运行输出结果，我使用Chrome开发者工具来确认我们的servlet是否被正确调用。

Ajax JSP Servlet示例总结

在本教程中，我们学习了jQuery AJAX的基础知识以及如何将其与Java Web应用程序进行集成。在后续的教程中，我们将继续探讨更多jQuery的功能，这些功能可以在任何Web应用程序中使用。你可以通过以下链接下载本教程的完整项目示例。

下载jQuery AJAX Java Web应用项目

#AJAX #Java #jQuery #JSP #Servlet