在这里我将我3月12课件中的一个例子整理下来！
主要实现了用户注册自动检测用户名是否已经存在的功能！
类似http://bbs.langsin.com/register.php，输入用户名注册可以检测是否已经存在，不过该网站的这个功能并没有应用ajax，而是类似服务器控件的回传，使整个页面有刷新。
这里还是使用的《一个简单的Ajax开发框架》一文ajax小框架来做！开发工具选择Eclipse！
Step1：新建一个WEB项目，做一个login.jsp页面
login.jsp<%
@ page contentType="text/html; charset=gb2312"%><%@ page import="eflylab.ajax.login.*"%>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Ch06--案例：数据校验</title><link href="../../css/style.css" rel="stylesheet" type="text/css"><script language="javascript" src="../../ajax.js"></script><!-- 引入JS --><script language="javascript">
function doCheck(type) {
var f = document.forms[0]; if("user"==type) { if(f.username.value!="") { document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。"; send_request("GET","registerCheck.jsp?field=username&value="+f.username.value,null,"text",showFeedbackInfo);
} else { document.getElementById("feedback_info").innerHTML = "请输入用户名称。"; } } else if("email"==type) { if(f.email.value!="") { //正则表达式来检测电子邮件的格式 var pattern = /^[\w＼.\-\_]+@{1}\w+(\.{1}\w+)+$/; var result = pattern.exec(f.email.value); if(result==null) window.alert("电子邮件格式错误，请按标准email名称格式填写,如：hello@sohu.com。"); else { document.getElementById("feedback_info").innerHTML = "系统正在处理您的请求，请稍后。"; send_request("GET","registerCheck.jsp?field=email&value="+f.email.value,null,"text",showFeedbackInfo); } } else { document.getElementById("feedback_info").innerHTML = "请输入电子邮件。"; } }}//处理服务器回传信息函数function showFeedbackInfo() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回，开始处理信息 //alert(http_request.responseText); document.getElementById("feedback_info").innerHTML = http_request.responseText; } else { //页面不正常 alert("您所请求的页面有异常。"); } }}function aa(){ alert('OK');
}</script></head><body><center><form name="form1" method="post" action=""> <table width="500" border="0" cellspacing="0" cellpadding="4"> <caption>用户注册</caption> <tr> <td width="70">用户名称：</td> <td width="414"> <input name="username" id="username" type="text" class="form_text" size="40" onBlur="doCheck('user')"> <input name="userCheck" type="button" class="button" id="userCheck" value="唯一性检查" onClick="doCheck('user')"> </td> </tr> <tr> <td>密码：</td> <td><input name="password" type="password" class="form_text" id="password" size="40"></td> </tr> <tr> <td>电子邮件：</td> <td><input name="email" type="text" class="form_text" id="email" size="40"> <input name="emailCheck" type="button" class="button" id="emailCheck" value="唯一性检查" onClick="doCheck('email')"> </td> </tr> <tr> <td colspan="2"><label id="feedback_info" style="color:#FF0000"> </label></td> </tr> <tr align="center"> <td colspan="2"><input name="Submit" type="submit" class="button" value="提交"></td> </tr> </table></form></center></body></html>registerCheck.jsp<%@ page contentType="text/html; charset=gb2312"%><%@ page import="eflylab.ajax.login.*"%><%String field = request.getParameter("field");String value = request.getParameter("value");UserService service = new UserService();if("username".equalsIgnoreCase(field)) { UserValue user = service.findUserByName(value); if(user!=null) out.println("用户名称["+value+"]已经被注册，请更换其他用户名称再注册。"); else out.println("用户名称["+value+"]尚未被注册，您可以继续。");}else if("email".equalsIgnoreCase(field)) { try { UserValue user = service.findUserByEmail(value); if(user!=null) out.println("电子邮件["+value+"]已经被注册，请更换其他用户名称再注册。"); else out.println("电子邮件["+value+"]尚未被注册，您可以继续。"); }catch(Exception ex) { out.println(ex.toString()); }}else { out.println("参数错误。");}%>login.jsp页面主要使用了responseTEXT来进行处理！
我们看到效果了！