商务合作:179001057@qq.com

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

技术2022-05-11  0


某平台价值19860元的编程课程资料免费领取【点我领取】


学习  [征服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            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        输入用户名:&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 ' ), ' + ' +   ' & ' ;      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


最新回复(0)