您的位置:首页 > 编程语言 > ASP

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

2007-12-14 17:52 1206 查看
学习  [征服Ajax——Web 2.0快速入门与项目实践(.net)] 
(一) . 运行效果如下:



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


 2

    
 3

    
 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

    
44

    
        
45

        46

            Font-Size="XX-Large" Height="37px" Width="459px">
47

            AJAX 数据验证
48

        
49

        
50

        
51

        输入用户名: 
52

        
53

        
54

        

55

    
56

2. 页面 *.aspx.cs后台代码如下:
[align=center] 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}[/align]3. Ajax主要的JS文件代码如下:
[align=center]  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 }[/align]4. 一个页面辅助类, 代码如下:
[align=center] 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 }[/align](三). 示例代码下载
         http://www.cnblogs.com/Files/ChengKing/AjaxDataValidate.rar

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1106342
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐