学习 [征服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 输入用户名:
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 &nbs