表單驗證是WEB開發(fā)中經(jīng)常遇到的問題，我們以前常見的做法是：在客戶端對表單域進(jìn)行內(nèi)容的檢查，看是否是滿足一定的要求或滿足一定的結(jié)構(gòu)，比如：是內(nèi)容否為空或是否按規(guī)定的格式填寫了內(nèi)容等。其實，我們還可以進(jìn)行更進(jìn)一步的驗證，比如對數(shù)據(jù)進(jìn)行實時驗證，下面，我們就利用微軟提供的XMLHTTPRequest組件來進(jìn)一步提高表單的驗證能力。

在WIN32平臺上進(jìn)行HTTP編程的方式很多，VB和C++程序員可以使用WinInet庫，VB6程序員也可以用VB6自帶的Internet控件。然而，對ASP程序員來是說，實現(xiàn)這樣的功能更是簡單，我們可以做一個組件進(jìn)行包裝。大多說人會認(rèn)為HTTP只是瀏覽器和服務(wù)器進(jìn)行通訊的協(xié)議，就這方面而言，它確實是功能強大的協(xié)議。HTTP還可以用來在任意應(yīng)用程序之間或應(yīng)用程序和組件之間進(jìn)行通訊，也不必是瀏覽器或服務(wù)器。作為WEB開發(fā)人員，我們都對HTTP的好處很熟悉了，如跨防火墻，基于Internet標(biāo)準(zhǔn)等。

微軟公司在它提供的XML工具包里包括了XMLHTTPRequest組件，因此，XML文檔也可以通過標(biāo)準(zhǔn)的HTTP協(xié)議在INTERNET上到處傳送，當(dāng)利用HTTP協(xié)議傳送XML格式的文檔時，XMLHTTPRequest組件的方便之處就是，你不必對這些XML進(jìn)行處理，我們也只需要寫簡單的幾行代碼就可以可以得到結(jié)果，因此，對WEB開發(fā)人員來說，XMLHTTPRequest組件是一個強有力的工具。

XMLHTTPRequest組件是MSXML的一部分，當(dāng)你安裝了IE5.0以上版本的瀏覽器后，就可以使用該組件功能了。XMLHTTPRequest的核心對象就是XMLHTTP，XMLHTTPRequest對象有幾種不同的版本，微軟的MSXML包中都有相應(yīng)的提供，可以到微軟的站點去下載最新的版本。 XMLHTTP對象提供了許多方便的方法和屬性來實現(xiàn)瀏覽器的通訊功能。要使用XMLHTTP對象，首先必須創(chuàng)建一個XMLHTTP對象，然后調(diào)用open方法去和你指定的URL進(jìn)行通訊，然后調(diào)用send方法發(fā)送請求。這個對象扮演的就象瀏覽器的角色，然后從responseText屬性中到返回的數(shù)據(jù)。另外還可以設(shè)置同步或異步方式調(diào)用。

下面，我們就以一個實際的例子來看看如何利用XMLHTTP來實時進(jìn)行表單數(shù)據(jù)的校驗。

假定你要在你的網(wǎng)站上進(jìn)行用戶的注冊，其中有一個字段叫做“User ID”，這個字段要求必須是唯一的，當(dāng)然用電子郵件可以確保唯一性，但如果用戶沒有電子郵件呢？因此，我們就要求當(dāng)用戶注冊時，能隨時檢查用戶輸入的“User ID”是否已經(jīng)存在。如果存在，就必須立刻通知用戶重新進(jìn)行填寫。我們通常的做法是先提交表單，然后才能知道該“User ID”是否已經(jīng)存在了。顯然，這種辦法并不是最好的，為了知道是否存在該值，我們得不停地進(jìn)行表單的提交，也意味著得多次與服務(wù)器打交道。最理想的辦法就是當(dāng)用戶剛剛輸入完“User ID”后就能夠知道是否存在該值是否已經(jīng)存在。用JavaScript和XMLHTTP就能夠?qū)崿F(xiàn)這樣的需求。

假定有以下的注冊頁面：

注冊頁面中關(guān)于“User ID”的HTML代碼可能是下面的樣子：

<input type="text" name="UserID" onblur="validateuserid(this.value);">

當(dāng)用戶輸入完“User ID”的值焦點移出該輸入框后，就會觸發(fā) onblur事件，當(dāng)然，如果你不喜歡用onblur事件的話，也可以用按鈕的onclick事件來做同樣的事情。下面就是文本輸入框失去焦點后所執(zhí)行的腳本：

<SCRIPT LANGUAGE="JavaScript">
function validateuserid(suserid)
{
// 改變鼠標(biāo)形狀為等待狀態(tài)，因為考慮到網(wǎng)絡(luò)速度和服務(wù)器的負(fù)荷，可能要兩、三秒鐘才能返回結(jié)果，這樣可以給用戶一個運行狀態(tài)提示，當(dāng)然，我們還可以用DHTML做出更友好的界面來。
document.body.style.cursor='wait';

// 創(chuàng)建一個XMLHTTPRequest對象的實例，當(dāng)然，根據(jù)版本的不同，你還可以寫成：
// var oXMLHTTP = new ActiveXObject("Msxml2.XMLHTTP");
var oXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");

// 我們要請求的ASP頁面，由于我們的請求是在客戶端進(jìn)行，因此，我們必須用絕對地址。
var sURL = "http://ServerName/VirtureDirectory/validateuser.asp?username=" + suserid

// 準(zhǔn)備發(fā)送請求。XMLHTTP的請求方法有多種：比如POST,HEAD,PUT等，第3個參數(shù)表明請求是否是異步的。
// 這里是采用同步的方式。設(shè)為false，表明：我們在進(jìn)行下面的工作之前，一直等待返回結(jié)果。
// open方法還有兩個參數(shù)，對要求用戶名和密碼的站點提供用戶名和密碼。
oXMLHTTP.open("GET", sURL, false);

// 發(fā)送請求
oXMLHTTP.send();

// 根據(jù)返回的結(jié)果來告訴用戶是否已經(jīng)存在該 “User ID”
if (oXMLHTTP.responseText == "exists")
alert("真抱歉： User ID " + suserid + "已經(jīng)存在了，請另換一個吧。");

document.body.style.cursor='auto';
}
</SCRIPT>

如果“User ID”在數(shù)據(jù)庫中已經(jīng)存在的話，將返回“exists”，當(dāng)然，你也可以任意修改返回的值。下面，我們看看如何寫我們的ASP頁面：

<%
Dim objConn, objRS, sUserID

' 取得傳送來的“User ID”
sUserID = Replace(Trim(Request.QueryString("userid")),"'","")

' 建立數(shù)據(jù)庫的連接，并執(zhí)行查詢，看是否有該 “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
%>

做為測試，如果的計算機或測試環(huán)境沒有數(shù)據(jù)庫，你也這樣寫進(jìn)行簡單的測試：

<%

sUserID = Replace(Trim(Request.QueryString("userid")),"'","")
If sUserID = "AAA" Then Response.Write "exists"

%>

如果服務(wù)器正常工作，上面的代碼將很快被返回，但如果服務(wù)器當(dāng)機了，我們是不是要無限等待下去？我們還必須進(jìn)行錯誤處理和超時處理。XMLHTTP對象的open方法里，我們采用異步的方式，這樣，當(dāng)請求發(fā)送后，程序可以繼續(xù)往下執(zhí)行，我們通過檢查狀態(tài)來得到是否成功。XMLHTTP對象在不同的階段有不同的狀態(tài)值：

0：UNINITIALIZED，XMLHTTP對象已經(jīng)創(chuàng)建，但還沒有初始化（open方法還沒有調(diào)用）
1：LOADING，XMLHTTP對象已經(jīng)創(chuàng)建，但send方法還沒有調(diào)用。
2：LOADED，send方法已經(jīng)調(diào)用，，并且狀態(tài)值和響應(yīng)頭信息都可以得到，但是還沒有返回response信息。
3：INTERACTIVE，部分?jǐn)?shù)據(jù)已經(jīng)返回，可以通過responseBody和responseText得到部分?jǐn)?shù)據(jù)。
4：COMPLETED，所有的數(shù)據(jù)都已經(jīng)返回。

下面就是更新后的全部源代碼：

<div id="divProgress" align="center">正在進(jìn)行驗證，請等待……</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;
// 這里是用孟憲會的機器進(jìn)行測試，你可以改成別的網(wǎng)站進(jìn)行測試。
var sURL = "http://mengxianhui/asp/validateuser.asp?userid=" + userid;
oXMLHTTP.onreadystatechange = managestatechange;
oXMLHTTP.open("GET", sURL, true);
try{
oXMLHTTP.send();
}
catch(e)
{
alert("此時無法進(jìn)行驗證。");
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 + "已經(jīng)存在。");
document.all("divProgress").style.display = "none";
break;
}
}
document.all("divProgress").style.display = "none";
</script>

值得說明的是：還有另外一個組件叫“ServerXMLHTTP”，顧名思義，這個組件更比較適合于用在服務(wù)器端，而且適合用于有用戶驗證的情況。更多信息請參照微軟的XML SDK。