明辉手游网中心:是一个免费提供流行视频软件教程、在线学习分享的学习平台!

用XMLHTTPRequest对象进行客户端验证

[摘要]表单验证是WEB开发中经常遇到的问题,我们以前常见的做法是:在客户端对表单域进行内容的检查,看是否是满足一定的要求或满足一定的结构,比如:是内容否为空或是否按规定的格式填写了内容等。其实,我们还可以进行更进一步的验证,比如对数据进行实时验证,下面,我们就利用微软提供的XMLHTTPRequest组...

表单验证是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。