xmlHttpRequest實踐之無刷新驗證用戶名

2024-09-05 20:55:07

字體：大中小

來源：轉載

供稿：網友

現在好多網站上的注冊都用了無刷新驗證用戶名,這種效果咋看感覺很復雜很難實現,其實它里面用到了Ajax中的核心xmlHttpRequest這個類,如果只是單單想實現這個效果,壓根就不用引用Ajax.Net中的組件,因為感覺有點大材小用,下面是具體實現這種效果的方法,希望能給初學Ajax的朋友帶來一點幫助.

首先建立一個注冊與驗證的頁面xmlHttpRequest.aspx與Validate.aspx,因為僅僅是實現無刷新驗證用戶名,所以我們可以把其它項都撇開,Register.aspx中擺好div跟控件,具體如下:

Code
<body>
<form id="form1" runat="server">
<div style="width: 100%; float: left; text-indent: 24px; font-size:12px">
<div style="float:left">
您的用戶名：<asp:TextBox ID="txtUserName" runat="server" style="border:1px solid #D4D8D9" onblur="return ValidateUser();"></asp:TextBox>
</div> <div id="default" ></div>
</div>
</form>
</body>
然后我們可以寫兩個樣式用于用戶名通過驗證或未通過驗證的顯示樣式,未加入圖片.

Css
.Error{ border:1px solid #A2553B;background-color:#FEF1E1;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}
.Right{ border:1px solid #419041;background-color:#EDFCE7;width:140px;float:left;height:18px;line-height:18px;margin-left:24px;color:#4F4F4F;text-indent:12px;}

這兩個樣式你可以把它放到樣式表中也可以將它放到<head></head>當中.
接下來只需敲一段腳本到注冊的xmlHttpRequest.aspx頁面去.
腳本
<script language="javascript" type="text/javascript">
function ValidateUser()
{
//獲得用于顯示驗證是否通過的詳細信息
var obj=document.getElementById("default");
//獲取用戶輸入的用戶名的值
var str=document.getElementById("txtUserName").value;
//定義一個bool型變量
var chk=true;
if (chk){
//因為輸入的用戶名可能含有中文,所以將其解碼
var username=escape(str);
//用于驗證用戶名的后臺頁面
var usrurl="/Validate.aspx?UserName="+username;
//獲取從驗證頁面中異步傳輸過來的值
var sta=GetResponseText(usrurl);
//如果異步傳輸失敗
if(sta==false){
chk=true;
obj.className="d_ok";
obj.innerHTML='該會員未能檢測，可以嘗試注冊。';
}
//異步傳輸成功
else{
//假如傳過來的值的開始位置是"regok",這個值是在驗證頁面Response.Write出來的值,如果是regok則表示驗證通過,否則的話就是驗證失敗.
if(sta.indexOf("regok")!=-1){
//驗證通過
chk=true;
//用于顯示驗證是否通過的詳細信息加上剛剛所定義正確時的樣式
obj.className="Right";
obj.innerHTML='該會員名可以注冊。';
}else{
//驗證未通過
chk=false;
//用于顯示驗證是否通過的詳細信息加上剛剛所定義錯誤時的樣式
obj.className="Error";
obj.innerHTML='該會員名已經被注冊。';
}
}
}else{
obj.className="Error";
}
return chk;
}
function GetResponseText(url)
{
//定義一個http_request變量
var http_request;
if (window.XMLHttpRequest) {
//對于Mozilla、Netscape、Safari等瀏覽器，創建XMLHttpRequest對象
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
//如果服務器響應的header不是text/xml，可以調用其它方法修改該header
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
// 對于Internet Explorer瀏覽器，創建XMLHttpRequest
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
//打開驗證頁面的地址
http_request.open('GET', url, false);
http_request.send(null);
if (http_request.readyState == 4)
　　 {
　　　// 收到完整的服務器響應
　　　if (http_request.status == 200) {
　　 //HTTP服務器響應的值OK
　　　　 var requestdoc = http_request.ResponseText;
}
　　　 else {
　　　　 requestdoc = "error";
　　　 }
　　 }
return requestdoc;
}
</script>

核心代碼:
http_request.ResponseText這句是用于獲取驗證用戶名頁面中異步傳輸過來的值..
上面的代碼做了詳細的注釋,這里就不多做解釋了..
接下來驗證用戶名的頁面中接收傳過來的值進行判斷了...
Code
1 public partial class Validate : System.Web.UI.Page
2 {
3 //獲取url傳過來的值
4 private string UserName
5 {
6 get { return Request.QueryString["UserName"].ToString(); }
7 }
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 //這里你可以連至用戶表檢查是否存在這個用戶名,當然如果你用membership中的驗證方法會更簡潔.
11 if (Server.HtmlEncode(UserName) =="123456")
12 //還記得腳本中的if(sta.indexOf("regok")!=-1)這句嗎,regok就是這里的啦..
13 Response.Write("regok");
14 else
15 Response.Write("error");
16 }
17 }