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

2006年08月22日 19:12:00

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

(一) . 运行效果如下:

(二). 代码

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 输入用户名: & nbsp;
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 1 public 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

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1106342