通过前面四章的介绍，相信读者已经掌握了Ajax核心技术的相关设计方法，如：核心对象XMLHttpRequest，与Ajax相关的JavaScript脚本技术、DOM文档对象化模型、以及用于存储、传送数据的XML文档，和控制显示输出的CSS及XHTL。
为了能够让读者熟悉更加灵活的Ajax应用方案，本章将通过若干实际案例的实现过程帮助读者积累更多Ajax实战的经验，体会更多Ajax应用的魅力。本章将实现常见的表单数据验证、Web页面中级联菜单的效果、动态加载列表框、自动刷新页面、Web页面的局部动态更新以及自动完成功能等。相信丰富的实例一定可以帮助读者在短时间内体验Ajax的方便、灵活、人性化的交互方式。
5.1 实现表单数据验证
为保证数据的有效性，杜绝错误、无效的信息存储到数据库中，对于接收到的浏览器客户端提交的数据，需要进行基本的有效性、合理性的检查。在传统的Web应用中，客户端一般采用JavaScript脚本所声明的函数，对提交的表单数据进行验证，但是这种方式并不能解决所有的验证问题，例如，在进行用户信息注册时，客户端只能实现类似是否填写了必要的信息、长度是否满足需求等基本的有效性检查，但是对于所填写的用户信息是否已经被占用等诸如此类的检查，在客户端脚本中是没有办法实现的。
同时，如果按照传统的方式将此类验证逻辑放在服务器端实现，也会因为面临需要整个页面刷新的问题而使得问题不能以直观的方式迅速显示在用户面前。借助Ajax技术，在异步交互的前提下，调用服务器端事先编写好的验证逻辑可以很好地解决此问题。
下面，我们实现一个对注册用户信息进行验证的实例，该实例所实现的效果如图5-1所示。用户首先在表单中填写用户注册信息，当用户单击“注册”按钮后，将对用户所填写的信息进行验证，如果用户没有填写用户名，或者密码输入的不一致，都会在页面中显示对应的提示信息，此外，当用户所填写的用户名已经被占用时，Ajax所调用的服务器端处理程序同样会返回提示信息。
图5-1 表单数据验证的效果
首先在Eclipse中新建一个Web项目，项目名称为P51_SignUp，对应的浏览器端页面代码如下所示。在该页面中提供了对应的表单以供用户填写注册信息，当用户填写信息，单击“注册”按钮后，将调用signUp()函数，在该函数中首先借助DOM获取对应表单元素中用户填写的数据信息，进行基本的有效性验证，如果用户没有填写用户名，将显示“用户名不能为空”的提示信息，如果用户输入的两遍密码不一致，将显示“两次输入密码不同”的提示信息。如果浏览器端的数据有效性检查通过，此后，再借助Ajax提交请求，并同时提交用户填写的信息，到服务器端，等待服务器端的处理。当服务器端后续处理完成后，将返回对应的响应信息，在浏览器客户端进行显示。
源文件：login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0]. firstChild.data;
window.alert(res);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 注册函数
function signUp() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
var psw2 = document.myform.psw2.value;
if (uname=="") {
window.alert("用户名不能为空。");
document.myform.uname.focus();
return false;
}
elseif(psw!=psw2) {
window.alert("两次输入密码不同。");
document.myform.psw.focus();
return false;
}
else {
sendRequest('signUp?uname='+ uname + '&psw=' + psw);
}
}
</script>
<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密 码： <input type="password" size="15" name="psw"><p>
重输密码： <input type="password" size="20" name="psw2"><p>
<input type="button" value="注册" onclick="signUp()" >
</form>
该Web应用的配置文件web.xml对应的代码如下所示。从该配置文件中可以了解到，当浏览器端提交“signUp”请求时，将由服务器端的类名为“classmate.SignUpAction”的Servlet程序进行处理。
<?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>ms1</servlet-name>
<servlet-class>classmate.SignUpAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ms1</servlet-name>
<url-pattern>/signUp</url-pattern>
</servlet-mapping>
<!-- The Welcome File List -->
<welcome-file-list>
<welcome-file>signUp.jsp</welcome-file>
</welcome-file-list>
</web-app>
下面我们关注一下服务器端Servlet程序SignUpAction.java中对应的程序代码。可以看到在接收到浏览器端提交的请求后，Servlet程序将首先获取浏览器端提交的用户名及密码信息，然后借助封装了数据库操作的JavaBean完成依据数据库中存储的注册用户信息进行验证的目的。
package classmate;
……
public class SignUpAction extends HttpServlet {
public void init(ServletConfig config) throws ServletException {
}
/*
* 处理<GET> 请求方法
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置接收信息的字符集
request.setCharacterEncoding("UTF-8");
//接收浏览器端提交的信息
String uname = request.getParameter("uname");
String psw = request.getParameter("psw");
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
//创建输出流对象
PrintWriter out = response.getWriter();
//依据验证结果输出不同的数据信息
out.println("<response>");
//数据库操作
DB db = new DB();
ResultSet rs;
int insRes = 0;
String strSql=null;
//判断用户名是否重复
strSql = "select * from classuser where username='"
+ uname + "'";
rs = db.executeQuery(strSql);
boolean bnoRepeat = false;
try {
if ( !rs.next()) {
bnoRepeat = true;
}
} catch (SQLException e) {
e.printStackTrace();
}
//用户名不重复，插入记录
if(bnoRepeat){
strSql = "Insert Into classuser values('"+ uname + "','" + psw + "')";
insRes = db. executeUpdate(strSql);
}
System.out.println(uname);
if(!bnoRepeat){
out.println("<res>" + "注册失败!用户名已存在，重新输入用户名" + "</res>");
}elseif(insRes>0){
out.println("<res>" + "注册成功！" + "</res>");
}else{
out.println("<res>" + "注册失败！" + "</res>");
}
out.println("</response>");
out.close();
}
}
在进行服务器端验证时，如果用户名没有被占用，会将对应的用户信息插入到数据库中去，并返回“注册成功”的信息，如果用户名已经被占用，将返回“注册失败！用户名已占用，请重新输入用户信息”的提示，其他原因的注册不成功，将显示“注册失败”的信息，信息都是以XML文档的格式返回客户端的。
采用Ajax技术，可以看到页面并没有进行完全的刷新，这无疑会给注册信息的用户带来更好的感受，同时数据信息的有效性问题也得到了很好的解决。