Ajax应用xmlhttp的例子

 

(一) . 运行效果如下:

(二). 代码

       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  }

(三). 示例代码下载