xmlHttpRequest實(shí)踐之無(wú)刷新驗(yàn)證用戶名_AJAX教程
推薦：jPager一個(gè)適合Ajax+JSON+jQuery環(huán)境使用的多功能頁(yè)碼欄事由：由于最近在測(cè)試開(kāi)發(fā)的一個(gè)ASP.NET MVC的項(xiàng)目需要用到頁(yè)碼欄（并且需要用到AJAX+JSON傳輸數(shù)據(jù)），而微軟發(fā)布的.NET3.5 CTP 的MVCTOOLKIT里面又沒(méi)有提供，網(wǎng)上找了下似乎也沒(méi)有太稱心的，于是就自己動(dòng)手做一個(gè)。 由于這個(gè)項(xiàng)目用到頁(yè)碼欄的地方大多是后臺(tái)
現(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)都撇開(kāi),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>
然后我們可以寫(xiě)兩個(gè)樣式用于用戶名通過(guò)驗(yàn)證或未通過(guò)驗(yàn)證的顯示樣式,未加入圖片.
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;}
這兩個(gè)樣式你可以把它放到樣式表中也可以將它放到<head></head>當(dāng)中.
接下來(lái)只需敲一段腳本到注冊(cè)的xmlHttpRequest.aspx頁(yè)面去.
腳本
<script language="javascript" type="text/javascript">
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)的值的開(kā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) {}
}
}
//打開(kāi)驗(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)行判斷了...
Code
1 public partial class Validate : System.Web.UI.Page
2 {
3 //獲取url傳過(guò)來(lái)的值
4 private string UserName
5 {
6 get { return Request.QueryString["UserName"].ToString(); }
7 }
8 protected void Page_Load(object sender, EventArgs e)
9 {
10 //這里你可以連至用戶表檢查是否存在這個(gè)用戶名,當(dāng)然如果你用membership中的驗(yàn)證方法會(huì)更簡(jiǎn)潔.
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 }
就這樣一個(gè)簡(jiǎn)單的無(wú)刷新驗(yàn)證用戶就完成啦...本機(jī)測(cè)試已通過(guò).呵呵剛好最近一直在學(xué)習(xí)控件開(kāi)發(fā),下篇就將其封裝成一個(gè)控件.
分享：詳解Ajax標(biāo)簽導(dǎo)航實(shí)例之前整理發(fā)表了《XMLHTTPRequest的屬性和方法簡(jiǎn)介》,它ajax要使用的核心的技術(shù)之一，現(xiàn)在就來(lái)實(shí)際運(yùn)用它。這個(gè)Ajax標(biāo)簽導(dǎo)航，是我很久前就寫(xiě)的一個(gè)腳本，很實(shí)用的（還被很多網(wǎng)站收錄了哦），現(xiàn)在拿它來(lái)做實(shí)例講解吧！當(dāng)然個(gè)人能力有限，有什么不對(duì)的地方還請(qǐng)
- Ajax中瀏覽器的緩存問(wèn)題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)具體代碼
- ajax 登錄功能簡(jiǎn)單實(shí)現(xiàn)(未連接數(shù)據(jù)庫(kù))
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無(wú)刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁(yè)功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
- jQery ajax——load()方法示例介紹
- 利用AjaxControlToolkit實(shí)現(xiàn)百度搜索時(shí)的下拉列表提示詳細(xì)步驟
- 解讀Ajax如何實(shí)現(xiàn)頁(yè)面loading效果!
- Ajax程序中,自己實(shí)現(xiàn)頁(yè)面前進(jìn)、后退、與標(biāo)簽功能(asp.net2.0)
- 如何用Ajax和RSS制作一個(gè)首頁(yè)新聞
- 解讀AJAX是否能夠取代桌面應(yīng)用程序
- 教你用ajax開(kāi)發(fā)web應(yīng)用程序
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
- 實(shí)例解析Ajax標(biāo)簽導(dǎo)航-DOM技巧篇
- 實(shí)例解析AJAX開(kāi)發(fā)簡(jiǎn)略
猜你也喜歡看這些
- 打造Ajax簡(jiǎn)單相冊(cè)
- Ajax的一些有用的小技巧
- XMLHTTP異步獲取返回值的代碼超時(shí)測(cè)試(AJAX)
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- AJAX入門(mén)--概述XMLHttpRequest
- JQuery+ajax實(shí)現(xiàn)批量上傳圖片(自寫(xiě))
- 如何十分鐘學(xué)會(huì) xajax
- 多ajax請(qǐng)求的各類解決方案(同步, 隊(duì)列, cancel請(qǐng)求)
- 雙劍合璧 Ajax和RSS做個(gè)人門(mén)戶網(wǎng)站
- 實(shí)例解析Ajax標(biāo)簽導(dǎo)航-DOM技巧篇
- 相關(guān)鏈接：
- 教程說(shuō)明：
AJAX教程-xmlHttpRequest實(shí)踐之無(wú)刷新驗(yàn)證用戶名
。