前面写了一些ajax基础知识，那么具体如何应用？
在这里我将我3月12课件中的一个例子整理下来！
主要实现了用户注册自动检测用户名是否已经存在的功能！
类似/register.php，输入用户名注册可以检测是否已经存在，不过该网站的这个功能并没有应用ajax，而是类似服务器控件的回传，使整个页面有刷新。
这里还是使用的《一个简单的Ajax开发框架》一文ajax小框架来做！开发工具选择Eclipse！
Step1：新建一个WEB项目，做一个login.jsp页面 login.jsp
<%@pagecontentType="text/html;charset=gb2312"%>
<%@pageimport="eflylab.ajax.login.*"%>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Ch06--案例：数据校验</title>
<linkhref="../../css/style.css"rel="stylesheet"type="text/css">
<scriptlanguage="javascript"src="../../ajax.js"></script><!--引入JS-->
<scriptlanguage="javascript">
functiondoCheck(type){
varf=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="请输入用户名称。";
}
}
elseif("email"==type){
if(f.email.value!=""){
//正则表达式来检测电子邮件的格式
varpattern=/^[\w＼.\-\_]+@{1}\w+(\.{1}\w+)+$/;
varresult=pattern.exec(f.email.value);
if(result==null)window.alert("电子邮件格式错误，请按标准email名称格式填写,如：hello@。");
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="请输入电子邮件。";
}
}
}
//处理服务器回传信息函数
functionshowFeedbackInfo(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已经成功返回，开始处理信息
//alert(http_request.responseText);
document.getElementById("feedback_info").innerHTML=http_request.responseText;
}else{//页面不正常
alert("您所请求的页面有异常。");
}
}
}
functionaa()
{
alert('OK');
}
</script>
</head>
<body><center>
<formname="form1"method="post"action="">
<tablewidth="500"border="0"cellspacing="0"cellpadding="4">
<caption>用户注册</caption>
<tr>
<tdwidth="70">用户名称：</td>
<tdwidth="414">
<inputname="username"id="username"type="text"class="form_text"size="40"onBlur="doCheck('user')">
<inputname="userCheck"type="button"class="button"id="userCheck"value="唯一性检查"onClick="doCheck('user')">
</td>
</tr>
<tr>
<td>密码：</td>
<td><inputname="password"type="password"class="form_text"id="password"size="40"></td>
</tr>
<tr>
<td>电子邮件：</td>
<td><inputname="email"type="text"class="form_text"id="email"size="40">
<inputname="emailCheck"type="button"class="button"id="emailCheck"value="唯一性检查"onClick="doCheck('email')">
</td>
</tr>
<tr>
<tdcolspan="2"><labelid="feedback_info"style="color:#FF0000"> </label></td>
</tr>
<tralign="center">
<tdcolspan="2"><inputname="Submit"type="submit"class="button"value="提交"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
在上面的login.jsp中用户姓名一块触发了一个Javascript.提交到registerCheck.jsp处理。 registerCheck.jsp
<%@pagecontentType="text/html;charset=gb2312"%>
<%@pageimport="eflylab.ajax.login.*"%>
<%
Stringfield=request.getParameter("field");
Stringvalue=request.getParameter("value");
UserServiceservice=newUserService();
if("username".equalsIgnoreCase(field)){
UserValueuser=service.findUserByName(value);
if(user!=null)out.println("用户名称["+value+"]已经被注册，请更换其他用户名称再注册。");
elseout.println("用户名称["+value+"]尚未被注册，您可以继续。");
}
elseif("email".equalsIgnoreCase(field)){
try{
UserValueuser=service.findUserByEmail(value);
if(user!=null)out.println("电子邮件["+value+"]已经被注册，请更换其他用户名称再注册。");
elseout.println("电子邮件["+value+"]尚未被注册，您可以继续。");
}catch(Exceptionex){
out.println(ex.toString());
}
}
else{
out.println("参数错误。");
}
%>
该页面调用javabean进行处理，然后在javabean中我们可以从数据库中检测数据，然后将结果返回！
login.jsp页面主要使用了responseTEXT来进行处理！
我们看到效果了！
