1.新建一Servlet，命名为CheckServlet
CheckServlet.java源代码如下：
01.package ajax.servlet;
02.import java.io.IOException;
03.import java.io.PrintWriter;
04.import javax.servlet.ServletException;
05.import javax.servlet.http.HttpServlet;
06.import javax.servlet.http.HttpServletRequest;
07.import javax.servlet.http.HttpServletResponse;
08./**
09. *
10. * @author Thinkpad
11. *
12. */
13.public class CheckServlet extends HttpServlet {
14. public void doGet(HttpServletRequest request, HttpServletResponse response)
15. throws ServletException, IOException {
16. response.setContentType("text/html");
17. response.setCharacterEncoding("UTF-8");
18. PrintWriter out = response.getWriter();
19.
20. String name = request.getParameter("username");
21. out.print("我是服务器，收到客户端的数据:"+name);
22. out.flush();
23. out.close();
24. }
25. public void doPost(HttpServletRequest request, HttpServletResponse response)
26. throws ServletException, IOException {
27. this.doGet(request, response);
28. }
29.}
package ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Thinkpad
*
*/
public class CheckServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
String name = request.getParameter("username");
out.print("我是服务器，收到客户端的数据:"+name);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
2、编写客户端html文件
新建ajax.html文件
ajax.html文件源码如下：
view plaincopy to clipboardprint?
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02.<html>
03. <head>
04. <title>ajax实现校验</title>
05. <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
06. <mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
07. </head>
08.
09. <body>
10. <input type="text" id="username">
11. <input type="button" value="校验" onclick="verify()" >
12. <dir id="result"></dir>
13. </body>
14.</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax实现校验</title>
<mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
<mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
</head>
<body>
<input type="text" id="username">
<input type="button" value="校验" onclick="verify()" >
<dir id="result"></dir>
</body>
</html>
3、下载jquery.js文件
下载地址：http://docs.jquery.com/Downloading_jQuery
下载后，将文件拷贝到文件结构中
4、编写verify.js文件
verify.js源代码如下：
view plaincopy to clipboardprint?
01.function verify() {
02. // 注解
03. // alert("点击了按钮");
04. // jquery查询节点的方法
05. var jqueryObj = $("#username");
06. // 获取文本框中用户输入的数据
07. var username = jqueryObj.val();
08. // alert(username);
09. // 将数据发送给服务器的servlet
10. $.get("servlet/CheckServlet?username=" + username, null, callback);
11.}
12.// 回调函数
13.function callback(data) {
14. // alert("收到服务器返回的数据");
15. // alert(data);
16. var resultObj = $("#result");
17. resultObj.html(data);
18.}
function verify() {
// 注解
// alert("点击了按钮");
// jquery查询节点的方法
var jqueryObj = $("#username");
// 获取文本框中用户输入的数据
var username = jqueryObj.val();
// alert(username);
// 将数据发送给服务器的servlet
$.get("servlet/CheckServlet?username=" + username, null, callback);
}
// 回调函数
function callback(data) {
// alert("收到服务器返回的数据");
// alert(data);
var resultObj = $("#result");
resultObj.html(data);
}
分享到：
相关推荐
通过这个例子，你可以学习到如何结合使用JSON、jQuery、Servlet和AJAX来构建一个动态、交互性强的Web应用，理解前后端通信的过程以及如何在客户端和服务器端之间有效地传递数据。同时，这也是实际开发中常见的一种...
在这个例子中，Servlet接收来自Ajax请求的数据，可能对数据库进行查询，然后将结果封装成JSON格式的数据响应给客户端。 3. **JSON数据格式**：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于...
【标题】"Mysql + jsp +javabean+ jquery +ajax+servlet等的例子综合"是一个涵盖多种技术的Web开发实战项目，旨在帮助开发者理解如何将这些技术有效地整合在一起，以构建动态、交互性强的Web应用程序。在这个项目中...
这个小例子涵盖了Web开发中的基本交互流程，对于初学者来说是一个很好的实践项目，可以帮助理解JDBC、Servlet和Ajax之间的协同工作方式。同时，它也展示了如何通过这些技术提高用户体验，使用户可以在不刷新页面的...
Servlet+EasyUI是一种常见的Web开发技术组合，Servlet作为Java服务器端程序处理HTTP请求，而EasyUI则是一个基于jQuery的UI框架，提供丰富的组件和简洁的API，用于快速构建美观的前端界面。在这个"Servlet+Easyui例子...
Struts2、jQuery、Ajax和Servlet是Web开发中常见的技术栈，它们共同构建了动态、交互式的用户界面。本文将详细解析这些技术及其在给定示例中的应用。 首先，Struts2是一个基于MVC（Model-View-Controller）设计模式...
作业：用户登录注册系统，后台采用jsp + servlet + javabean技术实现，浏览器客户端采用ajax框架之jquery框架！ 要求： 不能抄袭，没有分组，面向接口编程，不要迟到！ 1、注册的信息： 用户名，密码，性别(下拉...
在IT行业中，jQuery、Servlet和Java Development Kit (JDK) 是三个非常重要的技术组件，它们在构建现代Web应用程序中起着关键作用。本篇将详细阐述这三个知识点，并结合《Thinking in Java》这本书中的思想，来深入...
本例子基于jQuery库和Servlet技术实现了一个自动补全功能，旨在帮助用户更高效地输入信息。 **jQuery简介** jQuery是一款广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery...
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它采用完全独立于语言的文本格式，但也使用了类似于C风格的语言（包括C、C++、C#、Java、JavaScript、Perl、Python等）的习惯，这使得JSON成为理想...
前端用了jquery、jquery分页插件（懒得写）、layer弹层（实在不想自己写弹层了），因为不能用ajax，所以添加方法成功直接刷新列表，失败则跳到错误页面。servlet使用注解方式，另外一个servlet可以处理多个请求，...
在下拉列表联动的例子中，JavaScript通过Ajax异步地向Servlet发送请求，并接收响应。使用XMLHttpRequest对象或者现代浏览器中的fetch API，JavaScript可以监听下拉列表的改变事件，触发Ajax请求，并在接收到Servlet...
在我们的例子中，当用户在搜索框中输入时，JavaScript监听键盘事件，触发Ajax请求。 2. **JSON数据交换**：尽管名称中包含XML，但现代Ajax更倾向于使用JSON（JavaScript Object Notation）作为数据格式，因为它更轻...
### 关于servlet+jsp+service+Oracle实现简单的数据库交互 #### 一、概述 本文将详细介绍如何使用servlet、jsp、service层以及Oracle数据库来实现一个简单的用户登录注册功能。这种架构通常用于Web应用程序开发中...
**音乐网站(JSP+SERVLET)** ...这个音乐网站项目是学习和实践JSP和Servlet的好例子，涵盖了Web开发中的常见功能和问题。通过分析和重构这个项目，开发者可以深入理解Web应用程序的架构，提升自己的Java Web开发技能。
本文将深入探讨Spring与jQuery AJAX交互以及Servlet与jQuery AJAX交互的知识点。 ### Spring与jQuery AJAX交互 #### 1. Spring MVC中的RESTful API设计 在Spring MVC中，我们可以创建RESTful服务，通过HTTP的CRUD...
Java的Servlet API可以处理HTTP请求中的multipart/form-data数据，通过`HttpServletRequest`对象的`getPart()`或`getParts()`方法获取上传的文件，然后将其保存到服务器。 总的来说，HTML5+jQuery.uploadAdapter.js...
例如，创建一个Servlet来处理上传请求，解析`Part`对象并将其保存到服务器。之后，我们可以利用Java的图像处理库，如Java Advanced Imaging (JAI) 或 ImageIO，对图像进行缩放、裁剪等操作。以下是一个简单的例子： ...
Struts1是Apache软件基金会下的一个开源项目，它的核心设计目标是提供一个可扩展的架构，帮助开发者创建基于JSP和Servlet的Web应用。Struts1通过ActionForm对象、Action类和配置文件（如struts-config.xml）来组织...