ajax|asp.net|示例|数据|下载
学习 一书并将其示例在Asp.net 2.0中做了一遍.
(一) . 运行效果如下:
(二). 代码
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
else15
{ 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
else34
{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.Page2 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 File2 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 <, /SPAN>140 }
141 141 }
142 142 }
4. 一个页面辅助类, 代码如下:
1 public sealed class CallBackHelper2 {
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 }
(三). 示例代码下载
