Ajax应用xmlhttp的例子

最新推荐文章于 2025-09-09 22:18:29 发布

转载最新推荐文章于 2025-09-09 22:18:29 发布 · 1.3k 阅读

文章标签：

#ajax #xmlhttprequest #function #exception #string #asp

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用ASP.NET和AJAX实现的实时用户名验证系统。该系统能够在用户输入用户名的同时，利用AJAX技术向服务器发送请求，以检查用户名是否合法且未被占用。通过前后端分离的设计方式，实现了高效的数据验证流程。

(一) . 运行效果如下:

(二). 代码

1. 页面 *.aspx 前台代码如下:

<body>
2

<form id="form1" runat="server">
3

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 }

(三). 示例代码下载