http://www.cnblogs.com/CB/archive/2008/05/24/1206564.html
現在好多網站上的註冊都用了無刷新驗證用戶名,這種效果咋看感覺很複雜很難實現,其實它裏面用到了Ajax中的核心xmlHttpRequest這個類,
如果只是單單想實現這個效果,壓根就不用引用Ajax.Net中的組件,因爲感覺有點大材小用,下面是具體實現這種效果的方法,希望能給初學Ajax的朋
友帶來一點幫助.
首先建立一個註冊與驗證的頁面xmlHttpRequest.aspx
與Validate.aspx
,因爲僅僅是實現無刷新驗證用戶名,所以我們可以把其它項都撇
開,Register.aspx中擺好div跟控件,具體如下:
<
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
>
然後我們可以寫兩個樣式用於用戶名通過驗證或未通過驗證的顯示樣式,未加入圖片.
.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
這句是用於獲取驗證用戶名頁面中異步傳輸
過來的值..
上面的代碼做了詳細的註釋,這裏就不多做解釋了..
接下來驗證用戶名的頁面中接收傳過來的值進行判斷了...
1
public
partial
class
Validate : System.Web.UI.Page2
{3
//
獲取url傳過來的值
4
private
string
UserName5
{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
}
http://blog.csdn.net/Sandy945/archive/2009/05/12/4169870.aspx