具体实现步骤如下:
1.下载jquery库 jquery-1.3.2.js
2.把它放在一个web工程webroot目录下面的一个文件夹里面(如 js文件夹里面)
3.编写服务器端的程序:
AjaxServlet.java
public class AjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("name");
System.out.println(username);
if (username == null) {
out.println("请输入用户名");
} else if (username.equals("admin")) {
ut.println("用户名已经被注册了");
} else {
out.println("用户名" + username + "可以进行注册");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
public void destroy() {
super.destroy();
}
public void init() throws ServletException {
super.init();
}
}
配置web.xml文件:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
写前台代码: ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="js/verify.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
用户名校验Ajax实例,请输入要注册的用户名和密码:<br/>
<!-- ajax方式不需要使用表单来进行提交数据,因此不用写表单标签 -->
<!-- ajax方式不需要name属性,需要一个id的属性 -->
username:<input type="text" id="username"/><br/>
password:<input type="password" id="password"/><br/>
<input type="button" value="检测用户是否存在" onclick="verify()"/>
<!-- 这个div用于存放服务器返回的结果,开始为空 -->
<div id="result"></div>
</body>
</html>
上面得html文件里面导入了js文件,一个是jquery-1.3.2.js,一个事verify.js文件,刚才在js文件下面存放了jquery-1.3.2.js文件,需要在js文件夹下面新建一个verify.js文件
verify.js文件代码如下:
function verify(){
//alert("ajax实例");
//1.获取文本框中的内容
//document.getElementById("username");dom的方式
//jquery 查找节点方式,参数中#加在id属性值可以得到一个节点
//jquery 的方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法
var jqueryObj1=$("#username");
//获取节点的值
var username=jqueryObj1.val();
//2.将文本框中的数据发送给服务器的servlet
//使用jquery的xmlHttpRequest对象的get请求的封装 这几种方法都行
//$.get(url,date,回调函数)
$.get("AjaxServlet?name="+username,null,callback);
//$.get("AjaxServlet",username,callback);
//$.get("AjaxServlet","name="+username,callback);
}
//回调函数
function callback(data){
//alert("服务器端的数据回来了!!");
//3.接受服务器端返回的数据
//4.将服务器端返回的数据动态的显示在网页上
//找到保存结果信息的节点
var resultObj=$("#result");
//动态的改变页面节点div中的内容
resultObj.html(data);
}
完成。