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+jsp+ajax例子,方便学习的人。
ajax入门例子。还有之前上传的实现从数据库读取数据传到前台，实现单选多选，从控制台读取选中的数据
JDBC+Serlvet+ajax用户登录，显示，删除等功能！
包含两个例子，一个是jquery+ajax+servlet。 另一个是 jquery+ajax+struts2。 解压后可以直接运行。适合初学者。
作业：用户登录注册系统，后台采用jsp + servlet + javabean技术实现，浏览器客户端采用ajax框架之jquery框架！ 要求： 不能抄袭，没有分组，面向接口编程，不要迟到！ 1、注册的信息： 用户名，密码，性别(下拉...
现在文件的上传，特别是大文件上传，都需要进度条，让客户知道上传进度。...注：由于jQuery版本用的是2.1.1,所以如果跑本例子源码，请用IE9以上或火狐、谷歌浏览器测试。 接收文件上传的servlet UploadFile
学习JSON 的同学们快来哟学习JSON 的同学们快来哟学习JSON 的同学们快来哟
前端用了jquery、jquery分页插件（懒得写）、layer弹层（实在不想自己写弹层了），因为不能用ajax，所以添加方法成功直接刷新列表，失败则跳到错误页面。servlet使用注解方式，另外一个servlet可以处理多个请求，...
现在网上关于ActiveMQ的文档和例子要不然就是纯java的，要不然就是纯ajax或jquery的，本例是将Servlet和jquery结合，可以实现后台发信息，页面收信息的功能！
自己用JQuer做的一个自动补全的例子，拿出来和大家探讨探讨。
jquery与servlet交互的小例子，能够帮助初学者了解jquery的使用
一个非常简单的AJAX小例子 ——“AJAX校验用户名是否存在”技术使用：JQuery+Servlet实现
JQuery getJSON() 调用Servlet简单例子
一个非常简单的AJAX小例子 ——“省市联动”，技术使用：JQuery+Servlet实现，数据传输方式使用XML
jquery 异步提交的例子。使用的是jquery + servlet 。使用jquery $.get() $.post() 提交请求道servlet 页面
手机端jquerymoblie，服务端easyui，java servlet小例子，数据库mysql
一个非常简单的AJAX小例子 ——“仿百度提示”，技术使用：JQuery+Servlet实现
从基础开始学习jQuery，这里含有从基础到高级的jQuery实例
源代码中两个进度条的例子： 一是：js+Servlet实现。 一是：JQuery+Servlet实现。 进度条处理了各浏览器间差异，虽然在IE内核浏览器和非IE内核浏览器显示并不完全相同，但是都可以使用。
前台jquery,ajax ,后台java servlet的一个小例子。实现前台传输数据，从后台取数前台展示等。