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="校验" οnclick="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="校验" οnclick="verify()" >
<dir id="result"></dir>
</body>
</html>
3、下载jquery.js文件
下载地址：http://docs.jquery.com/Downloading_jQuery
下载后，将文件拷贝到文件结构中
4、编写verify.js文件
verify.js源代码如下：
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);
}