Ajax+asp.net无刷新验证用户名
生活随笔
收集整理的這篇文章主要介紹了
Ajax+asp.net无刷新验证用户名
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
注冊(cè)用戶頁(yè)面代碼如下
<script?language="javascript"?type="text/javascript">var?xmlHttp?=?false;
try?...{
???xmlHttp?=?new?ActiveXObject("Msxml2.XMLHTTP");
}?catch?(e)?...{
???try?...{
?????xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
???}?catch?(e2)?...{
?????xmlHttp?=?false;
???}
}
if?(!xmlHttp?&&?typeof?XMLHttpRequest?!=?'undefined')?...{
???xmlHttp?=?new?XMLHttpRequest();
}
function?callServer()?...{
???var?u_name?=?document.getElementById("tbUserName").value;
???if?((u_name?==?null)?||?(u_name?==?""))?return;
???var?url?=?"CheckUser.aspx?name="?+?escape(u_name);
???xmlHttp.open("GET",?url,?true);
???xmlHttp.onreadystatechange?=?updatePage;
???xmlHttp.send(null);??
}
function?updatePage()?...{
???if?(xmlHttp.readyState?<?4)?...{
test1.innerHTML="loading...";
???}
???if?(xmlHttp.readyState?==?4)?...{
?????var?response?=?xmlHttp.responseText;
test1.innerHTML=response;
???}
//???if?(test1.innerHTML=="已被注冊(cè)"){
//?document.form1.submit.disabled=true}else{
//?document.form1.submit.disabled=false
//???}
}
</script>
<span?id="test1"></span>
CheckUser.aspx:
asp.net頁(yè)面代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckUser.aspx.cs" Inherits="CheckUser" %>
<!--這個(gè)頁(yè)里只能有上面的一行.不然不會(huì)返回?cái)?shù)據(jù)-->
CheckUser.aspx.CS:
public?partial?class?CheckUser?:?System.Web.UI.Page
...{
?????protected?void?Page_Load(object?sender,?EventArgs?e)
?????...{
?????????string?nam?=?Request.QueryString["name"].ToString();
?????????string?sql?=?"select?id?from?Users?where?username='"?+?nam?+?"'";
?????????SqlDataReader?dr?=?DBHelper.ExecuteReader(sql);
?????????if?(dr.Read())
?????????...{
?????????????Response.Write("此用戶名已經(jīng)被注冊(cè)");
?????????}
?????????else
?????????...{
?????????????Response.Write("此用戶名可以使用");
?????????}
?????????dr.Close();
?????}
}
現(xiàn)在好多網(wǎng)站上的注冊(cè)都用了無(wú)刷新驗(yàn)證用戶名,這種效果咋看感覺(jué)很復(fù)雜很難實(shí)現(xiàn),其實(shí)它里面用到了Ajax中的核心xmlHttpRequest這個(gè)類,如果只是單單想實(shí)現(xiàn)這個(gè)效果,壓根就不用引用Ajax.Net中的組件,因?yàn)楦杏X(jué)有點(diǎn)大材小用,下面是具體實(shí)現(xiàn)這種效果的方法,希望能給初學(xué)Ajax的朋友帶來(lái)一點(diǎn)幫助.
首先建立一個(gè)注冊(cè)與驗(yàn)證的頁(yè)面xmlHttpRequest.aspx與Validate.aspx,因?yàn)閮H僅是實(shí)現(xiàn)無(wú)刷新驗(yàn)證用戶名,所以我們可以把其它項(xiàng)都撇開,Register.aspx中擺好div跟控件,具體如下:
????<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>
然后我們可以寫兩個(gè)樣式用于用戶名通過(guò)驗(yàn)證或未通過(guò)驗(yàn)證的顯示樣式,未加入圖片.
.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;}
這兩個(gè)樣式你可以把它放到樣式表中也可以將它放到<head></head>當(dāng)中.
接下來(lái)只需敲一段腳本到注冊(cè)的xmlHttpRequest.aspx頁(yè)面去.
??function?ValidateUser()
??...{
?????//獲得用于顯示驗(yàn)證是否通過(guò)的詳細(xì)信息
?????var?obj=document.getElementById("default");
?????//獲取用戶輸入的用戶名的值
?????var?str=document.getElementById("txtUserName").value;
?????//定義一個(gè)bool型變量
?????var?chk=true;
????if?(chk)...{
???????//因?yàn)檩斎氲挠脩裘赡芎兄形?所以將其解碼
????????var?username=escape(str);
????????//用于驗(yàn)證用戶名的后臺(tái)頁(yè)面
????????var?usrurl="/Validate.aspx?UserName="+username;
????????//獲取從驗(yàn)證頁(yè)面中異步傳輸過(guò)來(lái)的值
????????var?sta=GetResponseText(usrurl);
????????//如果異步傳輸失敗?????????
????????if(sta==false)...{
????????????chk=true;
????????????obj.className="d_ok";
????????????obj.innerHTML='該會(huì)員未能檢測(cè)，可以嘗試注冊(cè)。';
????????}
????????//異步傳輸成功
????????else...{
??????????????//假如傳過(guò)來(lái)的值的開始位置是"regok",這個(gè)值是在驗(yàn)證頁(yè)面Response.Write出來(lái)的值,如果是regok則表示驗(yàn)證通過(guò),否則的話就是驗(yàn)證失敗.
????????????if(sta.indexOf("regok")!=-1)...{
???????????????//驗(yàn)證通過(guò)
????????????????chk=true;
????????????????//用于顯示驗(yàn)證是否通過(guò)的詳細(xì)信息加上剛剛所定義正確時(shí)的樣式
????????????????obj.className="Right";
????????????????obj.innerHTML='該會(huì)員名可以注冊(cè)。';
????????????}else...{
????????????????//驗(yàn)證未通過(guò)
????????????????chk=false;
????????????????//用于顯示驗(yàn)證是否通過(guò)的詳細(xì)信息加上剛剛所定義錯(cuò)誤時(shí)的樣式
????????????????obj.className="Error";
????????????????obj.innerHTML='該會(huì)員名已經(jīng)被注冊(cè)。';
????????????}
????????}
????}else...{
????????obj.className="Error";
????}
????return?chk;
??}
??function?GetResponseText(url)
??...{
??????//定義一個(gè)http_request變量
???????var?http_request;
????????if?(window.XMLHttpRequest)?...{
????????????????//對(duì)于Mozilla、Netscape、Safari等瀏覽器，創(chuàng)建XMLHttpRequest對(duì)象
????????????????http_request?=?new?XMLHttpRequest();
????????????????if?(http_request.overrideMimeType)?...{
????????????????????????//如果服務(wù)器響應(yīng)的header不是text/xml，可以調(diào)用其它方法修改該header
????????????????????????http_request.overrideMimeType('text/xml');
????????????????}
????????}?else?if?(window.ActiveXObject)?...{
????????????????//?對(duì)于Internet?Explorer瀏覽器，創(chuàng)建XMLHttpRequest
????????????????try?...{
????????????????????????http_request?=?new?ActiveXObject("Msxml2.XMLHTTP");
????????????????}?catch?(e)?...{
????????????????????????try?...{
????????????????????????????????http_request?=?new?ActiveXObject("Microsoft.XMLHTTP");
????????????????????????}?catch?(e)?...{}
????????????????}
????????}
????????//打開驗(yàn)證頁(yè)面的地址
???????http_request.open('GET',?url,?false);
???????http_request.send(null);
???????????if?(http_request.readyState?==?4)
???????? ?...{
???????????? //?收到完整的服務(wù)器響應(yīng)
???????????????? if?(http_request.status?==?200)?...{
???????????????????? ????//HTTP服務(wù)器響應(yīng)的值OK
???????????????????????? ?var?requestdoc?=?http_request.ResponseText;
????????????????}
???????????? ???else?...{
???????? ??requestdoc?=?"error";
???? ???}
??}
????return?requestdoc;
??}
</script>
核心代碼:
http_request.ResponseText這句是用于獲取驗(yàn)證用戶名頁(yè)面中異步傳輸過(guò)來(lái)的值..
上面的代碼做了詳細(xì)的注釋,這里就不多做解釋了..
接下來(lái)驗(yàn)證用戶名的頁(yè)面中接收傳過(guò)來(lái)的值進(jìn)行判斷了...
????...{
?????????//獲取url傳過(guò)來(lái)的值
?????????private?string?UserName
?????????...{
?????????????get?...{?return?Request.QueryString["UserName"].ToString();?}
?????????}
?????????protected?void?Page_Load(object?sender,?EventArgs?e)
????????...{
????????????//這里你可以連至用戶表檢查是否存在這個(gè)用戶名,當(dāng)然如果你用membership中的驗(yàn)證方法會(huì)更簡(jiǎn)潔.
????????????if?(Server.HtmlEncode(UserName)?=="123456")
???????????????//還記得腳本中的if(sta.indexOf("regok")!=-1)這句嗎,regok就是這里的啦..
????????????????Response.Write("regok");
????????????else
????????????????Response.Write("error");
????????}
????}
總結(jié)
以上是生活随笔為你收集整理的Ajax+asp.net无刷新验证用户名的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 一步一步学Silverlight 2系列
- 下一篇： 三个纺纱女