本文介绍了一个简单的AJAX应用实例，通过客户端与服务器端交互实现用户名的实时验证。具体包括服务器端逻辑处理、正则表达式匹配及客户端JavaScript回调函数。
新建一个项目，命名为ajax,在WebForm1.aspx.cs文件的Page_Load()事件里注册:
1
private void Page_Load(object sender, System.EventArgs e)
2
{
3
// 在此处放置用户代码以初始化页面
4 AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));
5
}
然后开始服务器端的编程，写入如下的函数:private void Page_Load(object sender, System.EventArgs e)2
{3
// 在此处放置用户代码以初始化页面4
AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));5
} 1private bool IsusernameExit(string strusername)
2 {
3 bool bret=false;
4 switch (strusername.ToLower())
5
{
6 case "test":
7 case "tom":
8 case "jack":
9 case "ajax":
10 case "aspnet":
11 bret=true;
12 break;
13
}
14 return bret;
15 }
16 [AjaxPro.AjaxMethod]
17 public string GetReturnCode(string strusername)
18 {
19 if(!IsValidUsername(strusername))
20 {
21 return "1";
22 }
23 else if(!IsusernameExit(strusername))
24 {
25 return "2";
26 }
27 else
28 {
29 return "0";
30 }
31
32 }
33 private bool IsValidUsername(string strusername)
34 {
35 return (Regex.IsMatch(strusername,@"^(\w{3,15})$"));
36 }
这些是服务器端的函数，那么接下来就是客户端的编程,在WebForm1.aspx的HTML页面的<head></head>区域里private bool IsusernameExit(string strusername)2
{3
bool bret=false;4
switch (strusername.ToLower())5
{6
case "test":7
case "tom":8
case "jack":9
case "ajax":10
case "aspnet":11
bret=true;12
break;13
}14
return bret;15
}16
[AjaxPro.AjaxMethod]17
public string GetReturnCode(string strusername)18
{19
if(!IsValidUsername(strusername))20
{21
return "1";22
}23
else if(!IsusernameExit(strusername))24
{25
return "2";26
}27
else28
{29
return "0";30
}31
32
}33
private bool IsValidUsername(string strusername)34
{35
return (Regex.IsMatch(strusername,@"^(\w{3,15})$"));36
}写入以下的函数:
1<script language="javascript">
2 function username()
3 {
4 var username=document.getElementById("tbUsername").value;
5 var a=ajax.WebForm1.GetReturnCode(username);
6 IsUsernameExit_callback(a);
7 }
8 function IsUsernameExit_callback(res)
9 {
10 var msg=document.getElementById("ss");
11 var bret=res.value;
12 if(bret=="0")
13 {
14 msg.innerHTML="用户名存在";
15 msg.style.color="green";
16 }
17 else if(bret=="1")
18 {
19 msg.innerHTML="用户名长度必须在3到15之间,且不包含字母数字和下划线以外的字符！";
20 msg.style.color="red";
21 }
22 else
23 {
24 msg.innerHTML="用户名不存在";
25 msg.style.color="red";
26 }
27 }
28
29 </script>
恩，这样就差不多了，根据上面的代码，再在页面上拖几个相关的控件，就可以了，下面给出完整的代码<script language="javascript">2
function username()3
{4
var username=document.getElementById("tbUsername").value;5
var a=ajax.WebForm1.GetReturnCode(username);6
IsUsernameExit_callback(a);7
}8
function IsUsernameExit_callback(res)9
{10
var msg=document.getElementById("ss");11
var bret=res.value;12
if(bret=="0")13
{14
msg.innerHTML="用户名存在";15
msg.style.color="green";16
}17
else if(bret=="1")18
{19
msg.innerHTML="用户名长度必须在3到15之间,且不包含字母数字和下划线以外的字符！";20
msg.style.color="red";21
}22
else23
{24
msg.innerHTML="用户名不存在";25
msg.style.color="red";26
}27
}28
29
</script>Webform1.aspx.cs
1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Data;
5using System.Drawing;
6using System.Web;
7using System.Web.SessionState;
8using System.Web.UI;
9using System.Web.UI.WebControls;
10using System.Web.UI.HtmlControls;
11using System.Text.RegularExpressions;
12namespace ajax
13{
14 /**//// <summary>
15 /// WebForm1 的摘要说明。
16 /// </summary>
17 public class WebForm1 : System.Web.UI.Page
18 {
19 protected System.Web.UI.WebControls.Label Label1;
20 protected System.Web.UI.WebControls.TextBox tbUsername;
21 protected System.Web.UI.WebControls.Label ss;
22 protected System.Web.UI.WebControls.Label Label2;
23
24 private void Page_Load(object sender, System.EventArgs e)
25 {
26 // 在此处放置用户代码以初始化页面
27 AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));
28 }
29
30 private bool IsusernameExit(string strusername)
31 {
32 bool bret=false;
33 switch (strusername.ToLower())
34 {
35 case "test":
36 case "tom":
37 case "jack":
38 case "ajax":
39 case "aspnet":
40 bret=true;
41 break;
42 }
43 return bret;
44 }
45 [AjaxPro.AjaxMethod]
46 public string GetReturnCode(string strusername)
47 {
48 if(!IsValidUsername(strusername))
49 {
50 return "1";
51 }
52 else if(!IsusernameExit(strusername))
53 {
54 return "2";
55 }
56 else
57 {
58 return "0";
59 }
60
61 }
62 private bool IsValidUsername(string strusername)
63 {
64 return (Regex.IsMatch(strusername,@"^(\w{3,15})$"));
65 }
66
67 Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
68 override protected void OnInit(EventArgs e)
69 {
70 //
71 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
72 //
73 InitializeComponent();
74 base.OnInit(e);
75 }
76
77 /**//// <summary>
78 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
79 /// 此方法的内容。
80 /// </summary>
81 private void InitializeComponent()
82 {
83 this.Load += new System.EventHandler(this.Page_Load);
84
85 }
86 #endregion
87
88
89
90
91
92 }
93
94
95}
96
Webform1.aspx代码:
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Data;5
using System.Drawing;6
using System.Web;7
using System.Web.SessionState;8
using System.Web.UI;9
using System.Web.UI.WebControls;10
using System.Web.UI.HtmlControls;11
using System.Text.RegularExpressions;12
namespace ajax13
{14
/**//// <summary>15
/// WebForm1 的摘要说明。16
/// </summary>17
public class WebForm1 : System.Web.UI.Page18
{19
protected System.Web.UI.WebControls.Label Label1;20
protected System.Web.UI.WebControls.TextBox tbUsername;21
protected System.Web.UI.WebControls.Label ss;22
protected System.Web.UI.WebControls.Label Label2;23
24
private void Page_Load(object sender, System.EventArgs e)25
{26
// 在此处放置用户代码以初始化页面27
AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));28
}29
30
private bool IsusernameExit(string strusername)31
{32
bool bret=false;33
switch (strusername.ToLower())34
{35
case "test":36
case "tom":37
case "jack":38
case "ajax":39
case "aspnet":40
bret=true;41
break;42
}43
return bret;44
}45
[AjaxPro.AjaxMethod]46
public string GetReturnCode(string strusername)47
{48
if(!IsValidUsername(strusername))49
{50
return "1";51
}52
else if(!IsusernameExit(strusername))53
{54
return "2";55
}56
else57
{58
return "0";59
}60
61
}62
private bool IsValidUsername(string strusername)63
{64
return (Regex.IsMatch(strusername,@"^(\w{3,15})$"));65
}66
67
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码68
override protected void OnInit(EventArgs e)69
{70
//71
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。72
//73
InitializeComponent();74
base.OnInit(e);75
}76
77
/**//// <summary>78
/// 设计器支持所需的方法 - 不要使用代码编辑器修改79
/// 此方法的内容。80
/// </summary>81
private void InitializeComponent()82
{ 83
this.Load += new System.EventHandler(this.Page_Load);84
85
}86
#endregion87
88
89
90
91
92
}93
94
95
}96
1<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajax.WebForm1" %>
2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
3<HTML>
4 <HEAD>
5 <title>WebForm1</title>
6 <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
7 <meta content="C#" name="CODE_LANGUAGE">
8 <meta content="JavaScript" name="vs_defaultClientScript">
9 <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10 <script language="javascript">
11 function username()
12 {
13 var username=document.getElementById("tbUsername").value;
14 var a=ajax.WebForm1.GetReturnCode(username);
15 IsUsernameExit_callback(a);
16 }
17 function IsUsernameExit_callback(res)
18 {
19 var msg=document.getElementById("ss");
20 var bret=res.value;
21 if(bret=="0")
22 {
23 msg.innerHTML="用户名存在";
24 msg.style.color="green";
25 }
26 else if(bret=="1")
27 {
28 msg.innerHTML="用户名长度必须在3到15之间,且不包含字母数字和下划线以外的字符！";
29 msg.style.color="red";
30 }
31 else
32 {
33 msg.innerHTML="用户名不存在";
34 msg.style.color="red";
35 }
36 }
37
38 </script>
39
40
41 </HEAD>
42 <body>
43 <form id="Form1" method="post" runat="server">
44 <FONT face="宋体">
45 <asp:label id="Label1" style="Z-INDEX: 101; LEFT: 72px; POSITION: absolute; TOP: 72px" runat="server"
46 Width="144px">给于ajax的数据验证</asp:label><asp:label id="Label2" style="Z-INDEX: 102; LEFT: 80px; POSITION: absolute; TOP: 128px" runat="server">用户名:</asp:label><asp:textbox id="tbUsername" onkeyup="username()" style="Z-INDEX: 103; LEFT: 160px; POSITION: absolute; TOP: 128px"
47 runat="server"></asp:textbox><br>
48 <asp:Label id="ss" style="Z-INDEX: 104; LEFT: 80px; POSITION: absolute; TOP: 184px" runat="server"></asp:Label></FONT></form>
49 </body>
50</HTML>
51
恩，这个例子没有涉及到数据库，当然了，只是个简单的引入。以后的工作量还是很大的。<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ajax.WebForm1" %>2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >3
<HTML>4
<HEAD>5
<title>WebForm1</title>6
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">7
<meta content="C#" name="CODE_LANGUAGE">8
<meta content="JavaScript" name="vs_defaultClientScript">9
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">10
<script language="javascript">11
function username()12
{13
var username=document.getElementById("tbUsername").value;14
var a=ajax.WebForm1.GetReturnCode(username);15
IsUsernameExit_callback(a);16
}17
function IsUsernameExit_callback(res)18
{19
var msg=document.getElementById("ss");20
var bret=res.value;21
if(bret=="0")22
{23
msg.innerHTML="用户名存在";24
msg.style.color="green";25
}26
else if(bret=="1")27
{28
msg.innerHTML="用户名长度必须在3到15之间,且不包含字母数字和下划线以外的字符！";29
msg.style.color="red";30
}31
else32
{33
msg.innerHTML="用户名不存在";34
msg.style.color="red";35
}36
}37
38
</script>39
40
41
</HEAD>42
<body>43
<form id="Form1" method="post" runat="server">44
<FONT face="宋体">45
<asp:label id="Label1" style="Z-INDEX: 101; LEFT: 72px; POSITION: absolute; TOP: 72px" runat="server"46
Width="144px">给于ajax的数据验证</asp:label><asp:label id="Label2" style="Z-INDEX: 102; LEFT: 80px; POSITION: absolute; TOP: 128px" runat="server">用户名:</asp:label><asp:textbox id="tbUsername" onkeyup="username()" style="Z-INDEX: 103; LEFT: 160px; POSITION: absolute; TOP: 128px"47
runat="server"></asp:textbox><br>48
<asp:Label id="ss" style="Z-INDEX: 104; LEFT: 80px; POSITION: absolute; TOP: 184px" runat="server"></asp:Label></FONT></form>49
</body>50
</HTML>51
扫一扫
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
