IDC资讯中心
表单验证是web开发中经常遇到的问题，我们以前常见的做法是：在客户端对表单域进行内容的检查，看是否是满足一定的要求或满足一定的结构，比如：是内容否为空或是否按规定的格式填写了内容等。其实，我们还可以进行更进一步的验证，比如对数据进行实时验证，下面，我们就利用微软提供的xmlhttprequest组件来进一步提高表单的验证能力。
在win32平台上进行http编程的方式很多，vb和c++程序员可以使用wininet库，vb6程序员也可以用vb6自带的internet控件。然而，对asp程序员来是说，实现这样的功能更是简单，我们可以做一个组件进行包装。大多说人会认为http只是浏览器和服务器进行通讯的协议，就这方面而言，它确实是功能强大的协议。http还可以用来在任意应用程序之间或应用程序和组件之间进行通讯，也不必是浏览器或服务器。作为web开发人员，我们都对http的好处很熟悉了，如跨防火墙，基于internet标准等。
微软公司在它提供的xml工具包里包括了xmlhttprequest组件，因此，xml文档也可以通过标准的http协议在internet上到处传送，当利用http协议传送xml格式的文档时，xmlhttprequest组件的方便之处就是，你不必对这些xml进行处理，我们也只需要写简单的几行代码就可以可以得到结果，因此，对web开发人员来说，xmlhttprequest组件是一个强有力的工具。
xmlhttprequest组件是msxml的一部分，当你安装了ie5.0以上版本的浏览器后，就可以使用该组件功能了。xmlhttprequest的核心对象就是xmlhttp，xmlhttprequest对象有几种不同的版本，微软的msxml包中都有相应的提供，可以到微软的站点去下载最新的版本。 xmlhttp对象提供了许多方便的方法和属性来实现浏览器的通讯功能。要使用xmlhttp对象，首先必须创建一个xmlhttp对象，然后调用open方法去和你指定的url进行通讯，然后调用send方法发送请求。这个对象扮演的就象浏览器的角色，然后从responsetext属性中到返回的数据。另外还可以设置同步或异步方式调用。
下面，我们就以一个实际的例子来看看如何利用xmlhttp来实时进行表单数据的校验。
假定你要在你的网站上进行用户的注册，其中有一个字段叫做“user id”，这个字段要求必须是唯一的，当然用电子邮件可以确保唯一性，但如果用户没有电子邮件呢？因此，我们就要求当用户注册时，能随时检查用户输入的“user id”是否已经存在。如果存在，就必须立刻通知用户重新进行填写。我们通常的做法是先提交表单，然后才能知道该“user id”是否已经存在了。显然，这种办法并不是最好的，为了知道是否存在该值，我们得不停地进行表单的提交，也意味着得多次与服务器打交道。最理想的办法就是当用户刚刚输入完“user id”后就能够知道是否存在该值是否已经存在。用javascript和xmlhttp就能够实现这样的需求。
假定有以下的注册页面：
注册页面中关于“user id”的html代码可能是下面的样子：
<input type="text" name="userid" onblur="validateuserid(this.value);">
当用户输入完“user id”的值焦点移出该输入框后，就会触发 onblur事件，当然，如果你不喜欢用onblur事件的话，也可以用按钮的onclick事件来做同样的事情。下面就是文本输入框失去焦点后所执行的脚本：
<script language="javascript">
function validateuserid(suserid)
{
// 改变鼠标形状为等待状态，因为考虑到网络速度和服务器的负荷，可能要两、三秒钟才能返回结果，这样可以给用户一个运行状态提示，当然，我们还可以用dhtml做出更友好的界面来。
document.body.style.cursor=wait;
// 创建一个xmlhttprequest对象的实例，当然，根据版本的不同，你还可以写成：
// var oxmlhttp = new activexobject("msxml2.xmlhttp");
var oxmlhttp = new activexobject("microsoft.xmlhttp");
// 我们要请求的asp页面，由于我们的请求是在客户端进行，因此，我们必须用绝对地址。
var surl = "http://servername/virturedirectory/validateuser.asp?username=" + suserid
// 准备发送请求。xmlhttp的请求方法有多种：比如post,head,put等，第3个参数表明请求是否是异步的。
// 这里是采用同步的方式。设为false，表明：我们在进行下面的工作之前，一直等待返回结果。
// open方法还有两个参数，对要求用户名和密码的站点提供用户名和密码。
oxmlhttp.open("get", surl, false);
// 发送请求
oxmlhttp.send();
// 根据返回的结果来告诉用户是否已经存在该 “user id”
if (oxmlhttp.responsetext == "exists")
alert("真抱歉： user id " + suserid + "已经存在了，请另换一个吧。");
document.body.style.cursor=auto;
}
</script>
如果“user id”在数据库中已经存在的话，将返回“exists”，当然，你也可以任意修改返回的值。下面，我们看看如何写我们的asp页面：
<%
dim objconn, objrs, suserid
取得传送来的“user id”
suserid = replace(trim(request.querystring("userid")),"","")
建立数据库的连接，并执行查询，看是否有该 “user id”存在
set objconn = server.createobject("adodb.connection")
objconn.open connectionstring
ssql = "select userid from usertable where userid = " + suserid + ""
set objrs = objconn.execute(ssql)
如果存在就输出 “exists”
if not objrs.eof then response.write "exists"
释放对象
objrs.close
objconn.close
set objrs = nothing
set objconn = nothing
%>
做为测试，如果的计算机或测试环境没有数据库，你也这样写进行简单的测试：
<%
suserid = replace(trim(request.querystring("userid")),"","")
if suserid = "aaa" then response.write "exists"
%>
如果服务器正常工作，上面的代码将很快被返回，但如果服务器当机了，我们是不是要无限等待下去？我们还必须进行错误处理和超时处理。xmlhttp对象的open方法里，我们采用异步的方式，这样，当请求发送后，程序可以继续往下执行，我们通过检查状态来得到是否成功。xmlhttp对象在不同的阶段有不同的状态值：
0：uninitialized，xmlhttp对象已经创建，但还没有初始化（open方法还没有调用）
1：loading，xmlhttp对象已经创建，但send方法还没有调用。
2：loaded，send方法已经调用，，并且状态值和响应头信息都可以得到，但是还没有返回response信息。
3：interactive，部分数据已经返回，可以通过responsebody和responsetext得到部分数据。
4：completed，所有的数据都已经返回。
下面就是更新后的全部源代码：
<div id="divprogress" align="center">正在进行验证，请等待……</div>
<form name="form1" method="post" action="">
<table border="1" cellspacing="1" cellpadding="0" bordercolor="#0066ff" align="center" style="font-size:9pt">
<tr>
<td width="88"><b>姓名：</b></td>
<td width="200">
<input type="text" name="firstname" style="border:1px solid red;width:100%">
</td>
</tr>
<tr>
<td><b>电子邮件：</b></td>
<td><input type="text" name="email" style="border:1px solid red;width:100%"></td>
</tr>
<tr>
<td><b>用户id：</b></td>
<td><input type="text" name="userid" onblur="validateuserid(this.value)" style="border:1px solid red;width:100%"></td>
</tr>
<tr>
<td><b>密码：</b></td>
<td><input type="text" name="pwd" style="border:1px solid red;width:100%"></td>
</tr>
</table>
<p align="center">
<input type="submit" name="submit" value="我要注册" style="font-size:9pt">
<input type="reset" name="submit2" value="重新填写" style="font-size:9pt">
</p>
</form>
<script language="javascript">
var userid, oxmlhttp;
function validateuserid(suserid)
{
oxmlhttp = new activexobject("microsoft.xmlhttp");
userid = suserid;
// 这里是用孟宪会的机器进行测试，你可以改成别的网站进行测试。
var surl = "http://mengxianhui/asp/validateuser.asp?userid=" + userid;
oxmlhttp.onreadystatechange = managestatechange;
oxmlhttp.open("get", surl, true);
try{
oxmlhttp.send();
}
catch(e)
{
alert("此时无法进行验证。");
document.form1.firstname.focus();
}
}
function managestatechange(){
switch(oxmlhttp.readystate)
{
case 2, 3:
document.all("divprogress").style.display = "block";
break;
case 4:
if(oxmlhttp.responsetext == "exists")
alert("很抱歉！ user id ： " + userid + "已经存在。");
document.all("divprogress").style.display = "none";
break;
}
}
document.all("divprogress").style.display = "none";
</script>
值得说明的是：还有另外一个组件叫“serverxmlhttp”，顾名思义，这个组件更比较适合于用在服务器端，而且适合用于有用户验证的情况。更多信息请参照微软的xml sdk。
