用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>