|
Ajax即时实现服务端数据验证(asp.net 2.0)
|
|
|
作者：ChengKing 发布时间：2006-8-25 15:37:49 | 【字体： 大 中 小】
|
(一) . 运行效果如下:
(二). 代码
1. 页面 *.aspx 前台代码如下:
1 <body>
2 <form id="form1" runat="server">
3 <script type="text/javascript">
4 var cbo = new CallBackObject();
5 cbo.OnComplete=Cbo_Complete;
6 cbo.OnError=Cbo_Error;
7 function CheckUserName(UserName)
8   {
9 var msg = 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 function Cbo_Complete(responseText, responseXML)
21 {
22 var msg = document.getElementById('lblMessage');
23 if( responseText == '0' )
24 {
25 msg.innerHTML = '合法用户!';
26 msg.style.color='green';
27 }
28 else if( 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 function Cbo_Error( status, statusText, responseText )
40 {
41 //alert( 'status=' + status + ' responseText=' + responseText + ' statusText=' + statusText );
42 }
43 </script>
44 <div>
45 <asp:Panel ID="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 <hr align="left" style="width: 463px" />
50 <br />
51 输入用户名:
52 <asp:TextBox ID="tbUsername" runat="server" OnTextChanged="tbUsername_TextChanged"></asp:TextBox><br />
53 <br />
54 <asp:Label ID="lblMessage" runat="server" Width="246px"></asp:Label></div>
55 </form>
56</body>
2. 页面 *.aspx.cs后台代码如下:
1 1public partial class _Default : System.Web.UI.Page
2 2{
3 3 protected void Page_Load(object sender, EventArgs e)
4 4 {
5 5 tbUsername.Attributes.Add("OnKeyUp", "CheckUserName(this.value)");
6 6 }
7 7 protected void tbUsername_TextChanged(object sender, EventArgs e)
8 8 {
9 9 if (!CallBackHelper.IsCallBack)
10 10 return;
11 11
12 12 string strName = tbUsername.Text;
13 13
14 14 try
15 15 {
16 16 string strReturnCode;
17 17 if (!IsValidUsername(strName))
18 18 {
19 19 strReturnCode = "1";
20 20 }
21 21 else if (!IsUsernameExist(strName))
22 22 {
23 23 strReturnCode = "2";
24 24 }
25 25 else
26 26 {
27 27 strReturnCode = "0";
28 28 }
29 29 CallBackHelper.Write(strReturnCode);
30 30 }
31 31 catch (Exception ex)
32 32 {
33 33 CallBackHelper.HandleError(ex);
34 34 }
35 35 }
36 36 private bool IsUsernameExist(string strUsername)
37 37 {
38 38 bool bRet = false;
39 39
40 40 switch (strUsername.ToUpper())
41 41 {
42 42 case "KING":
43 43 case "ROSE":
44 44 bRet = true;
45 45 break;
46 46 }
47 47
48 48 return bRet;
49 49 }
50 50
51 51 private bool IsValidUsername(string strUsername)
52 52 {
53 53 return (Regex.IsMatch(strUsername, @"^(\w{3,15})$"));
54 54 }
55 55}
3. Ajax主要的JS文件代码如下:
1 1 // JScript File
2 2 function CallBackObject()
3 3 {
4 4 this.XmlHttp = this.GetHttpObject();
5 5 }
6 6 CallBackObject.prototype.GetHttpObject = function()
7 7 {
8 8 var xmlhttp;
9 9 /*@cc_on
10 10 @if (@_jscript_version >= 5)
11 11 try {
12 12 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
13 13 } catch (e) {
14 14 try {
15 15 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
16 16 } catch (E) {
17 17 xmlhttp = false;
18 18 }
19 19 }
20 20 @else
21 21 xmlhttp = false;
22 22 @end @*/
23 23 if( !xmlhttp && typeof XMLHttpRequest != 'undefined' )
24 24 {
25 25 try
26 26 {
27 27 xmlhttp = new XMLHttpRequest();
28 28 }
29 29 catch( e )
30 30 {
31 31 xmlhttp = false;
32 32 }
33 33 }
34 34 return xmlhttp;
35 35 }
36 36 CallBackObject.prototype.DoCallBack = function( eventTarget,eventArgument)
37 37 {
38 38 var theData = '';
39 39 var theform = document.forms[0];
40 40 var thePage = window.location.pathname + window.location.search;
41 41 var eName = '';
42 42 theData = '__EVENTTARGET=' + escape(eventTarget.split("$").join(":")) + '&';
43 43 theData += '__EVENTTARGUMENT=' + eventArgument + '&';
44 44
45 45 theData += '__VIEWSTATE=' + escape(theform.__VIEWSTATE.value).replace(new RegExp('\\+','g'),'%2b') + '&';
46 46 theData += 'IsCallBack=true&';
47 47 for(var i = 0; i < theform.elements.length; i++)
48 48 {
49 49 eName = theform.elements[i].name;
50 50 if( eName && eName != '')
51 51 {
52 52 if( eName == '__EVENTARGET' || eName == '__EVENTARGUMENT' || eName == '__VIEWSTATE' )
53 53 {
54 54 }
55 55 else
56 56 {
57 57 theData = theData + escape(eName.split("$").join(":")) + '=' + theform.elements[i].value;
58 58 if( i!= theform.elements.length - 1 )
59 59 {
60 60 theData = theData + '&';
61 61 }
62 62 }
63 63 }
64 64 }
65 65 if( this.XmlHttp )
66 66 {
67 67 if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )
68 68 {
69 69 var oThis = this;
70 70 this.XmlHttp.open('POST', thePage, true);
71 71 this.XmlHttp.onreadystatechange = function()
72 72 {
73 73 oThis.ReadyStateChange();
74 74 };
75 75 this.XmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
76 76 this.XmlHttp.send( theData );
77 77 }
78 78 }
79 79 }
80 80
81 81 CallBackObject.prototype.AbortCallBack = function()
82 82 {
83 83 if( this.XmlHttp )
84 84 {
85 85 this.XmlHttp.abort();
86 86 }
87 87 }
88 88
89 89 CallBackObject.prototype.OnLoading = function()
90 90 {
91 91 }
92 92
93 93 CallBackObject.prototype.OnLoaded = function()
94 94 {
95 95 }
96 96
97 97 CallBackObject.prototype.OnInteractive = function()
98 98 {
99 99 }
100 100
101 101 CallBackObject.prototype.OnComplete = function( responseText, responseXml)
102 102 {
103 103 }
104 104
105 105 CallBackObject.prototype.OnAbort = function()
106 106 {
107 107 }
108 108
109 109 CallBackObject.prototype.OnError = function( status, statusText)
110 110 {
111 111 }
112 112
113 113 CallBackObject.prototype.ReadyStateChange = function()
114 114 {
115 115 if( this.XmlHttp.readyState == 1 )
116 116 {
117 117 this.OnLoading();
118 118 }
119 119 else if( this.XmlHttp.readyState == 2 )
120 120 {
121 121 this.OnLoaded();
122 122 }
123 123 else if( this.XmlHttp.readyState == 3 )
124 124 {
125 125 this.OnInteractive();
126 126 }
127 127 else if( this.XmlHttp.readyState == 4 )
128 128 {
129 129 if( this.XmlHttp.status == 0 )
130 130 {
131 131 this.OnAbort();
132 132 }
133 133 else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" )
134 134 {
135 135 this.OnComplete( this.XmlHttp.responseText, this.XmlHttp.responseXML );
136 136 }
137 137 else
138 138 {
139 139 this.OnError( this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText );
140 140 }
141 141 }
142 142 }
4. 一个页面辅助类, 代码如下:
1 public sealed class CallBackHelper
2 {
3 public CallBackHelper()
4 {
5 }
6 public static bool IsCallBack
7 {
8 get
9 {
10 HttpRequest hr = CallBackHelper.GetHttpRequest();
11 return hr.Params["IsCallBack"] != null;
12 }
13 }
14 public static void Write(string Text)
15 {
16 HttpResponse hr = CallBackHelper.GetHttpResponse();
17 hr.Clear();
18 hr.StatusCode = 200;
19 hr.StatusDescription = "OK";
20 hr.Write(Text);
21 hr.Flush();
22 hr.End();
23 }
24 public static void HandleError(Exception e)
25 {
26 //HttpResponse hr = CallBackHelper.GetHttpResponse();
27 //hr.Clear();
28 //hr.StatusCode = 200;
29 //hr.StatusDescription = "ERROR";
30 //hr.Write(e.ToString());
31 //hr.Flush();
32 //hr.End();
33 }
34 private static HttpResponse GetHttpResponse()
35 {
36 HttpResponse hr = null;
37 try
38 {
39 hr = System.Web.HttpContext.Current.Response;
40 }
41 catch (NullReferenceException ex)
42 {
43 throw new Exception(ex.Message);
44 }
45 return hr;
46 }
47 private static HttpRequest GetHttpRequest()
48 {
49 HttpRequest hr = null;
50 try
51 {
52 hr = System.Web.HttpContext.Current.Request;
53 }
54 catch (NullReferenceException ex)
55 {
56 throw new Exception(ex.Message);
57 }
58 return hr;
59 }
60 }
(三). 示例代码下载
http://www.cnblogs.com/Files/ChengKing/AjaxDataValidate.rar
|
|
文章来源：CSDN
|
|
|
·ASP+AJAX做类似Google的搜索提示
·在ASP.NET中使用AJAX的简单方法
·ASP.NET后台代码实现XmlHttp跨域访问
·ASP.NET取得当前页面的完整URL
·如何在ASP.NET程序里面执行DOS命令
·IIS5IIS6IIS7的ASP.net请求处理过程比较
·ASP.NET备份SQL Server数据库的方法
·让网站图片“另存为”“无标题.bmp”的技巧
·ASP.NET GridView的分页功能
·ASP.NET实现字母+数字方式验证码
|
