通过js和Ajax异步刷新实现注册的简单验证

Ajax:
Ajax并不是一项新的技术，它产生的主要的目的用于页面的刷新。并且Ajax的刷新不是全部刷新我们的页面，而是属于局部的刷新。
Ajax技术并不是只能在java中使用，现在各个动态Web实现技术比如PHP、ASP等都已经很好的支持Ajax技术了。

XMLHttpRequest对象
在Ajax中主要是通过XMLHttprequest对象处理发送异步请求和响应的，此对象最早是在IE5中以Active组件存在的，一直到2005年之后才被广泛的应用。如果我们要创建一个XMLHttpRequest对象，我们则必须使用JavaScript。

XMLHttpRequest对象常用的属性：
1.onreadystatechange:指定当readyState状态改变的时候使用的操作，一般用于指定具体的回调函数。
2.readyState:返回当前请求的状态，此属性的状态时只读的。
3.responseBody:将回应的信息正文以byte数组形式返回，只读
4.responseStream:以流的形式返回响应的信息，只读
5.responseText:接收普通的文本返回的数据，只读
6.responseXML:接收XML文档形式返回的数据，只读
7.status:返回当前请求的HTTP状态码，只读
8.statusText:返回当前请求的响应行状态，只读。

请求状态的取值,一共有5种取值：
0：请求没有发出
1:请求已经建立，但是还没做发出
2:请求已经发出正在处理中
3:请求已经处理，正在接受服务器的信息，响应中通常包含部分的数据，但是此时服务器还没有完成的响应
4:服务器响应已经完成，可以访问服务器的响应并使用响应的信息。

常用的方法：
1.abort():取消当前所发出的请求
2.getAllResponseHeaders():取得所有的HTTP请求头信息
3.getResponseHeader:取得一个指定的HTTP响应头信息
4.open():创建一个HTTP请求，并指定请求的方式，比如GET或POST
5.send():将创建的请求发送到服务器端，并接收服务器发送回的响应
6.setRequestHeader():设置一个指定请求的HTTP头信息

首先是用户名验证：

//核对账号
function checkUsername(){

createXMLHttp();
 username2=document.getElementById("userName");//获取name组件
if(username2.value==null||username2.value.trim()=="")//判断是否为空
{sp1.innerHTML="<font color='red'>用户名不能为空</font>";
uflag=0;
}
else{

sp1.innerHTML=""//清空sp1内容
//通过open方法设置请求的方式以及请求页面
xmlHttp.open("POST", "ifExist?username="+username2.value);
//通过请求完成方法之后，设置回调方法
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var res=xmlHttp.responseText;
var sp1=document.getElementById("sp1");
if(res=="no")
{ uflag=1;//使其可以点击按钮
sp1.innerHTML="<font color='green'>用户名可用</font>";
 }

else{uflag=0;//使其无法点击按钮
sp1.innerHTML="<font color='red'>用户名不可用</font>";
}
}
}
}
//发送请求
            xmlHttp.send(null);
}}

在用户失去username焦点时，通过数据库访问得知有无此用户名（过程略）
以下为源码：register.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'register.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript">
var uflag=0;
var p1flag=0;
var p2flag=0;
var xmlHttp;
function createXMLHttp(){
if(window.XMLHttpRequest()){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveObejct("Microsoft.XMLHTTP");//解决有些浏览器无法兼容的问题
}
}
//核对密码
function checkPass(){
pass1=document.getElementById("pass1");
sp2=document.getElementById("sp2");
if(pass1.value.length<8)
{sp2.innerHTML="<font color='red'>太短了</font>";
p1flag=0;
}
else if(pass1.value.length>16)
{sp2.innerHTML="<font color='red'>太长了</font>";p1flag=0;}
else{
var str=/^[0-9]*$/
var str1=/^[a-zA-Z]*$/
if(str.test(pass1.value)||str1.test(pass1.value))
{sp2.innerHTML="<font color='red'>至少有个字母或者特殊符号</font>";p1flag=0;
}
 else{sp2.innerHTML="<font color='green'>正确</font>";
 p1flag=1;
 }
}
}
//核对账号
function checkUsername(){

createXMLHttp();
 username2=document.getElementById("userName");//获取name组件
if(username2.value==null||username2.value.trim()=="")//判断是否为空
{sp1.innerHTML="<font color='red'>用户名不能为空</font>";
uflag=0;
}
else{

sp1.innerHTML=""//清空sp1内容
//通过open方法设置请求的方式以及请求页面
xmlHttp.open("POST", "ifExist?username="+username2.value);
//通过请求完成方法之后，设置回调方法
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var res=xmlHttp.responseText;
var sp1=document.getElementById("sp1");
if(res=="no")
{ uflag=1;//使其可以点击按钮
sp1.innerHTML="<font color='green'>用户名可用</font>";
 }

else{uflag=0;//使其无法点击按钮
sp1.innerHTML="<font color='red'>用户名不可用</font>";
}
}
}
}
//发送请求
            xmlHttp.send(null);
}}
window.onload=function(){
var username1=document.getElementById("userName");
var pass1=document.getElementById("pass1");
var pass2=document.getElementById("pass2");
var sp3=document.getElementById("sp3");

username1.onblur=function(){
checkUsername();
if(p1flag==p2flag==uflag==1)
{document.getElementById("but_z").disabled=false;}
}
pass1.onblur=function(){
checkPass();

}
pass2.onblur=function(){

if(pass2.value!=pass1.value)
{sp3.innerHTML="<font color='red' >密码不一致</font>";
p2flag=0;
}else{sp3.innerHTML="<font color='green' >正确</font>";
p2flag=1;}//使其可以点击按钮

if(p1flag==1&&p2flag==1&&uflag==1)
{document.getElementById("but_z").disabled=false;}
else{document.getElementById("but_z").disabled=true;}
}

}
</script>
  </head>

  <body>
  <form action="register" method="POST">
   账号：<input type="text" id="userName" /><span id="sp1"></span><br/>
    密码：<input type="password" id="pass1" /><span id="sp2"></span><br/>
     确认密码：<input type="password" id="pass2" /><span id="sp3"></span><br/>
     <input type="submit" value="注册" id="but_z" disabled/>
   </form>  
  </body>
</html>