Ajax即时实现服务端数据验证(Asp.net 2.0)(示例代码下载)

最新推荐文章于 2025-12-04 17:17:03 发布

最新推荐文章于 2025-12-04 17:17:03 发布 · 85 阅读

文章标签：

#ASP.net #ASP #.net #Ajax #prototype

本文介绍了一个使用Ajax进行实时用户名验证的示例项目。该示例包括前端JavaScript代码与.NET后端代码，实现用户输入时即时反馈用户名是否符合规定及是否存在。

学习 [征服Ajax——Web 2.0快速入门与项目实践（.net）]

(一). 运行效果如下:

(二). 代码

1. 页面 *.aspx 前台代码如下:

<body>
2

<formid="form1"runat="server">
3

<scripttype="text/javascript">
4

varcbo=newCallBackObject();
5

cbo.OnComplete=Cbo_Complete;
6

cbo.OnError=Cbo_Error;
7

functionCheckUserName(UserName)
8

{
9

varmsg=document.getElementById('lblMessage');
10

if(UserName.length>0)
11

{
12

cbo.DoCallBack('tbUsername','');
13

}
14

else
15

{
16

cbo.AbortCallBack();
17

msg.innerHTML='';
18

}
19

}
20

functionCbo_Complete(responseText,responseXML)
21

{
22

varmsg=document.getElementById('lblMessage');
23

if(responseText=='0')
24

{
25

msg.innerHTML='合法用户!';
26

msg.style.color='green';
27

}
28

elseif(responseText=='1')
29

{
30

msg.innerHTML='用户名长度必须在3到15之间,且不包含字母/数字/下划线以外的字符!';
31

msg.style.color='red';
32

}
33

else
34

{
35

msg.innerHTML='用户名不存在!';
36

msg.style.color='red';
37

}
38

}
39

functionCbo_Error(status,statusText,responseText)
40

{
41

//alert('status='+status+'responseText='+responseText+'statusText='+statusText);
42

}
43

</script>
44

<div>
45

<asp:PanelID="Panel1"runat="server"BackColor="#C0C0FF"Font-Bold="True"Font-Overline="False"
46

Font-Size="XX-Large"Height="37px"Width="459px">
47

AJAX数据验证</asp:Panel>
48

<br/>
49

<hralign="left"style="width:463px"/>
50

<br/>
51

输入用户名: 
52

<asp:TextBoxID="tbUsername"runat="server"OnTextChanged="tbUsername_TextChanged"></asp:TextBox><br/>
53

<br/>
54

<asp:LabelID="lblMessage"runat="server"Width="246px"></asp:Label></div>
55

</form>
56

</body>

2. 页面 *.aspx.cs后台代码如下:

11publicpartialclass_Default:System.Web.UI.Page
22{
33protectedvoidPage_Load(objectsender,EventArgse)
44{
55tbUsername.Attributes.Add("OnKeyUp","CheckUserName(this.value)");
66}
77protectedvoidtbUsername_TextChanged(objectsender,EventArgse)
88{
99if(!CallBackHelper.IsCallBack)
1010return;
1111
1212stringstrName=tbUsername.Text;
1313
1414try
1515{
1616stringstrReturnCode;
1717if(!IsValidUsername(strName))
1818{
1919strReturnCode="1";
2020}
2121elseif(!IsUsernameExist(strName))
2222{
2323strReturnCode="2";
2424}
2525else
2626{
2727strReturnCode="0";
2828}
2929CallBackHelper.Write(strReturnCode);
3030}
3131catch(Exceptionex)
3232{
3333CallBackHelper.HandleError(ex);
3434}
3535}
3636privateboolIsUsernameExist(stringstrUsername)
3737{
3838boolbRet=false;
3939
4040switch(strUsername.ToUpper())
4141{
4242case"KING":
4343case"ROSE":
4444bRet=true;
4545break;
4646}
4747
4848returnbRet;
4949}
5050
5151privateboolIsValidUsername(stringstrUsername)
5252{
5353return(Regex.IsMatch(strUsername,@"^(\w{3,15})$"));
5454}
5555}

3. Ajax主要的JS文件代码如下:

11//JScriptFile
22functionCallBackObject()
33{
44this.XmlHttp=this.GetHttpObject();
55}
66CallBackObject.prototype.GetHttpObject=function()
77{
88varxmlhttp;
99/*@cc_on
1010@if(@_jscript_version>=5)
1111try{
1212xmlhttp=newActiveXObject("Msxml2.XMLHTTP");
1313}catch(e){
1414try{
1515xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
1616}catch(E){
1717xmlhttp=false;
1818}
1919}
2020@else
2121xmlhttp=false;
2222@end@*/
2323if(!xmlhttp&&typeofXMLHttpRequest!='undefined')
2424{
2525try
2626{
2727xmlhttp=newXMLHttpRequest();
2828}
2929catch(e)
3030{
3131xmlhttp=false;
3232}
3333}
3434returnxmlhttp;
3535}
3636CallBackObject.prototype.DoCallBack=function(eventTarget,eventArgument)
3737{
3838vartheData='';
3939vartheform=document.forms[0];
4040varthePage=window.location.pathname+window.location.search;
4141vareName='';
4242theData='__EVENTTARGET='+escape(eventTarget.split("$").join(":"))+'&';
4343theData+='__EVENTTARGUMENT='+eventArgument+'&';
4444
4545theData+='__VIEWSTATE='+escape(theform.__VIEWSTATE.value).replace(newRegExp('\\+','g'),'%2b')+'&';
4646theData+='IsCallBack=true&';
4747for(vari=0;i<theform.elements.length;i++)
4848{
4949eName=theform.elements[i].name;
5050if(eName&&eName!='')
5151{
5252if(eName=='__EVENTARGET'||eName=='__EVENTARGUMENT'||eName=='__VIEWSTATE')
5353{
5454}
5555else
5656{
5757theData=theData+escape(eName.split("$").join(":"))+'='+theform.elements[i].value;
5858if(i!=theform.elements.length-1)
5959{
6060theData=theData+'&';
6161}
6262}
6363}
6464}
6565if(this.XmlHttp)
6666{
6767if(this.XmlHttp.readyState==4||this.XmlHttp.readyState==0)
6868{
6969varoThis=this;
7070this.XmlHttp.open('POST',thePage,true);
7171this.XmlHttp.onreadystatechange=function()
7272{
7373oThis.ReadyStateChange();
7474};
7575this.XmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
7676this.XmlHttp.send(theData);
7777}
7878}
7979}
8080
8181CallBackObject.prototype.AbortCallBack=function()
8282{
8383if(this.XmlHttp)
8484{
8585this.XmlHttp.abort();
8686}
8787}
8888
8989CallBackObject.prototype.OnLoading=