xmlHttpRequest无刷新验证用户名
生活随笔
收集整理的這篇文章主要介紹了
xmlHttpRequest无刷新验证用户名
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
現(xiàn)在好多網(wǎng)站上的注冊都用了無刷新驗證用戶名,這種效果咋看感覺很復雜很難實現(xiàn),其實它里面用到了Ajax中的核心xmlHttpRequest這個類,如果只是單單想實現(xiàn)這個效果,壓根就不用引用Ajax.Net中的組件,因為感覺有點大材小用,下面是具體實現(xiàn)這種效果的方法,希望能給初學Ajax的朋友帶來一點幫助.
首先建立一個注冊與驗證的頁面xmlHttpRequest.aspx與Validate.aspx,因為僅僅是實現(xiàn)無刷新驗證用戶名,所以我們可以把其它項都撇開,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='該會員名已經(jīng)被注冊。';
????????????}
????????}
????}else{
????????obj.className="Error";
????}
????return?chk;
??}
??function?GetResponseText(url)
??{
??????//定義一個http_request變量
???????var?http_request;
????????if?(window.XMLHttpRequest)?{
????????????????//對于Mozilla、Netscape、Safari等瀏覽器，創(chuàng)建XMLHttpRequest對象
????????????????http_request?=?new?XMLHttpRequest();
????????????????if?(http_request.overrideMimeType)?{
????????????????????????//如果服務器響應的header不是text/xml，可以調(diào)用其它方法修改該header
????????????????????????http_request.overrideMimeType('text/xml');
????????????????}
????????}?else?if?(window.ActiveXObject)?{
????????????????//?對于Internet?Explorer瀏覽器，創(chuàng)建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????}就這樣一個簡單的無刷新驗證用戶就完成啦...本機測試已通過.呵呵剛好最近一直在學習控件開發(fā),下篇就將其封裝成一個控件.
源碼下載
首先建立一個注冊與驗證的頁面xmlHttpRequest.aspx與Validate.aspx,因為僅僅是實現(xiàn)無刷新驗證用戶名,所以我們可以把其它項都撇開,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='該會員名已經(jīng)被注冊。';
????????????}
????????}
????}else{
????????obj.className="Error";
????}
????return?chk;
??}
??function?GetResponseText(url)
??{
??????//定義一個http_request變量
???????var?http_request;
????????if?(window.XMLHttpRequest)?{
????????????????//對于Mozilla、Netscape、Safari等瀏覽器，創(chuàng)建XMLHttpRequest對象
????????????????http_request?=?new?XMLHttpRequest();
????????????????if?(http_request.overrideMimeType)?{
????????????????????????//如果服務器響應的header不是text/xml，可以調(diào)用其它方法修改該header
????????????????????????http_request.overrideMimeType('text/xml');
????????????????}
????????}?else?if?(window.ActiveXObject)?{
????????????????//?對于Internet?Explorer瀏覽器，創(chuàng)建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????}就這樣一個簡單的無刷新驗證用戶就完成啦...本機測試已通過.呵呵剛好最近一直在學習控件開發(fā),下篇就將其封裝成一個控件.
源碼下載
轉(zhuǎn)載于:https://www.cnblogs.com/yangjunwl/articles/1139048.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的xmlHttpRequest无刷新验证用户名的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BlazeDS入门教程-很详细-赞原创作
- 下一篇： 房地产信息