asp.net 与ajax实例

 1：在配置文件里面添加一个接点：

<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>

  2：在要使用的页面加一句： Ajax.Utility.RegisterTypeForAjax(typeof(类名));

  3：在要在javascript函数里面要调用的服务器端方法上加一个：[Ajax.AjaxMethod  (Ajax.HttpSessionStateRequirement.ReadWrite)]标记

  大体就这样的。下面我们来做一个简单的用户注册吧：
  先要考虑的是：第一要验证客户输入的信息是否符合我们定义的标准；第二：要异步考虑这个客户输入的名字是否已经被别人使用了，不要在客户提交注册信息的时候再去验证，这样就很浪费了；第三：我们所有的数据添加，修改，查询都可以用这个dll来做的，全部是无刷新的，但是要考虑开发效率哦！

1   <table border="0" cellpadding="0" cellspacing="0" style="width: 557px">
2                            <tr>
3                                <td style="width: 462px; text-align: right; height: 12px;">
4                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUserName"
5                                        ErrorMessage="*请输入" Width="110px"></asp:RequiredFieldValidator>用户名:</td>
6                                <td colspan="2" style="height: 12px; text-align: left">
7                                    <asp:TextBox ID="txtUserName" runat="server" onchange="OncheckInfo('txtUserName')" Width="213px"></asp:TextBox>
8                                </td>
9                            </tr>
10                            <tr>
11                                <td style="width: 462px; text-align: right">
12                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPwd"
13                                        ErrorMessage="*请输入" Width="88px"></asp:RequiredFieldValidator>密码:</td>
14                                <td colspan="2" style="text-align: left">
15                                    <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" onKeyUp=pwStrength() onBlur=pwStrength()
16                                        Width="213px"></asp:TextBox>
17                                </td>
18                            </tr>
19                            <tr>
20                                <td style="width: 462px; height: 24px; text-align: right">
21                                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPwd"
22                                        ControlToValidate="txtPwdd" Display="Dynamic" ErrorMessage="两次出入不一致" Width="136px"></asp:CompareValidator>确认密码:</td>
23                                <td colspan="2" style="height: 24px; text-align: left">
24                                    <asp:TextBox ID="txtPwdd" runat="server" TextMode="Password" Width="213px"></asp:TextBox>&nbsp;
25                                </td>
26                            </tr>
27                            <tr>
28                                <td style="width: 462px; height: 24px; text-align: right">
29                                    密码安全级别:&nbsp;</td>
30                                <td colspan="2" style="height: 24px; text-align: left">
31                                    <table border="0" bordercolor="#cccccc" cellpadding="1" cellspacing="0" height="23"
32                                        style="display: inline; width: 213px">
33                                        <tr align="center" bgcolor="#eeeeee">
34                                            <td id="strength_L" width="33%">
35                                                弱</td>
36                                            <td id="strength_M" width="33%">
37                                                中</td>
38                                            <td id="strength_H" width="33%">
39                                                强</td>
40                                        </tr>
41                                    </table>
42                                </td>
43                            </tr>

44                            <tr>
45                                <td style="width: 462px; text-align: right">
46                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail"
47                                        ErrorMessage="请输入正确格式" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" Width="120px"></asp:RegularExpressionValidator>常用邮件:</td>
48                                <td colspan="2" style="text-align: left">
49                                    <asp:TextBox ID="txtEmail" runat="server" Width="213px" onchange="OncheckInfo('txtEmail')" Height="19px"></asp:TextBox></td>
50                            </tr>
51                            <tr>
52                                <td style="width: 462px; text-align: right">
53                                    注册类型:</td>
54                                <td style="width: 60px; text-align: left">
55                                    <asp:DropDownList ID="ddlType" runat="server">
56                                        <asp:ListItem Value="1">公司</asp:ListItem>
57                                        <asp:ListItem Value="0">个人</asp:ListItem>
58                                    </asp:DropDownList></td>
59                                <td style="width: 91px; text-align: left">
60                                </td>
61                                <td style="width: 291px">
62                                </td>
63                            </tr>
64                            <tr>
65                                <td style="width: 462px">
66                                    <input id="btReg" type="button" value="客户端方法注册" language="javascript" onclick="return btReg_onclick()" /></td>
67                                <td style="width: 60px; text-align: left">
68                                    <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="服务器方法注册" />
69                                    </td>
70                                <td style="width: 91px; text-align: left">
71                                    <asp:Button
72                                        ID="btnCancel" runat="server" OnClick="Button2_Click" Text="取消" /></td>
73                                <td style="width: 291px">
74                                </td>
75                            </tr>
76                            <tr>
77                                <td colspan="4" style="text-align: center">
78                                    <asp:Label ID="lblUserName" runat="server" ForeColor="Blue" Width="518px"></asp:Label>
79                                    <asp:Label ID="lblMessage" runat="server" Width="520px" ForeColor="Red"></asp:Label></td>
80                            </tr>
81                        </table>

  上面是页面的设计，下面是javascritp的数据验证和提交：

 1<script language="javascript">
2   　       function ShowOrHiddenPanel()
3   　       {
4   　           document.getElementById("Panel2").style.display="None";
5   　           document.getElementById("btNext").style.display="None";
6   　       }
7            function OncheckInfo(T)
8            {
9                var v=document.getElementById(T).value;
10                if(document.getElementById(T).id=="txtUserName")
11                {
12                    var y=RegisterFirst.DateCheckInTable(v).value;
13                    document.getElementById("lblMessage").innerText=y;
14                }
15                else
16                {
17                    var y=RegisterFirst.DateCheckInTableForEmail(v).value;
18                    document.getElementById("lblMessage").innerText=y;
19                }
20            }
21            //用客户端方法来添加注册信息
22            function btReg_onclick() {
23                 var name=document.getElementById("txtUserName").value;
24                 var pwd=document.getElementById("txtPwd").value;
25                 var email=document.getElementById("txtEmail").value;
26                 var type=document.getElementById("ddlType").value;
27                 document.getElementById("lblUserName").innerText=name;
28                 if(name=="" || pwd==""|| email=="")
29                 {
30                     document.getElementById("lblMessage").innerText="请输入有效信息";
31                     return false;
32                 }
33                 var v=RegisterFirst.RegisterInfo(name,pwd,email,type).value;
34
35                 document.getElementById("lblMessage").innerText=v;
36
37                 //注册信息完了以后各个文本框中信息必须手动清空
38                 document.getElementById("txtUserName").value="";
39                 document.getElementById("txtPwd").value="";
40                 document.getElementById("txtEmail").value="";
41                 document.getElementById("ddlType").value="";
42                 document.getElementById("btNext").style.display="Block";
43            }
44            //完成注册信息的第二步
45            function btn_SecondOK_onclick() {
46
47                 var Rname=document.getElementById("txtRealName").value;
48                 var sex=document.getElementById("ddlSex").value;
49                 var birth=document.getElementById("txtBirth").value;
50                 var Mobile=document.getElementById("txtMobile").value;
51                 var qq=document.getElementById("txtQQ").value;
52                 var msn=document.getElementById("txtMSN").value;
53                 var Address=document.getElementById("txtFax").value;
54                 var fax=document.getElementById("txtAddress").value;
55                 var other=document.getElementById("txtOther").value;
56
57                 if(Rname==""|| birth=="" || Mobile=="" || qq=="")
58                 {
59                     document.getElementById("lblSecondMessage").innerText="请输入有效信息";
60                     return false;
61                 }
62                  var v=RegisterFirst.RegisterSecondInfo(Rname,sex,birth,Mobile,qq,msn,Address,fax,other).value;
63                     document.getElementById("lblSecondMessage").innerText=v;
64
65
66
67            }
68            function btNext_onclick() {
69                document.getElementById("Panel1").style.display="None";
70                document.getElementById("Panel2").style.display="Block";
71            }
72      </script>

1<script language="javascript">
2        function CharMode(iN){
3         if (iN>=48 && iN <=57) //数字
 4          return 1;
5         if (iN>=65 && iN <=90) //大写字母
 6          return 2;
7         if (iN>=97 && iN <=122) //小写
 8          return 4;
9         else
10          return 8; //特殊字符
11        }
12
13        //bitTotal函数
14        //计算出当前密码当中一共有多少种模式
15        function bitTotal(num){
16         modes=0;
17         for (i=0;i<4;i++){
18          if (num & 1) modes++;
19          num>>>=1;
20         }
21         return modes;
22        }
23
24        //checkStrong函数
25        //返回密码的强度级别
26
27        function checkStrong(sPW){
28         if (sPW.length<=4)
29          return 0;  //密码太短
30         Modes=0;
31         for (i=0;i<sPW.length;i++){
32           //测试每一个字符的类别并统计一共有多少种模式.
33          Modes|=CharMode(sPW.charCodeAt(i));
34         }
35
36         return bitTotal(Modes);
37
38        }
39
40        //pwStrength函数
41        //当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
42
43        function pwStrength(){
44         var pwd=document.getElementById("txtPwd").value;
45         O_color="#eeeeee";
46         L_color="#FF0000";
47         M_color="#FF9900";
48         H_color="#33CC00";
49         if (pwd==null||pwd==''){
50          Lcolor=Mcolor=Hcolor=O_color;
51         }
52         else{
53          S_level=checkStrong(pwd);
54          switch(S_level)  {
55           case 0:
56            Lcolor=Mcolor=Hcolor=O_color;
57           case 1:
58            Lcolor=L_color;
59            Mcolor=Hcolor=O_color;
60            break;
61           case 2:
62            Lcolor=Mcolor=M_color;
63            Hcolor=O_color;
64            break;
65           default:
66            Lcolor=Mcolor=Hcolor=H_color;
67            }
68          }
69
70         document.getElementById("strength_L").style.background=Lcolor;
71         document.getElementById("strength_M").style.background=Mcolor;
72         document.getElementById("strength_H").style.background=Hcolor;
73         return;
74        }
75        function checkMobile() {
76            var sMobile =document.getElementById("txtMobile").value;
77            if (!(/^13[0-9]\d{4,8}$/.test(sMobile))) {
78                alert("手机号码输入有误");
79            }
80            else
81            {
82                alert("手机号码正确");
83            }
84
85        }
86</script>

1  /**//// <summary>
 2        /// 该AJAX方法返回的是客户注册的时候是不是有用户名和邮箱已经注册过的信息
 3        /// </summary>
 4        /// <param name="str"></param>
 5        /// <returns></returns>
 6        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
7        public string DateCheckInTable(string str)
8        {
9            if (UsersSelQuery.GetCustomerInfoExistByName(str) == 0)
10            {
11                return "恭喜您!该用户名暂无人使用,请快快注册";
12            }
13            else
14            {
15                return "对不起!该用户名已被使用,请重新起名";
16            }
17        }
18        /**//// <summary>
19        /// 该AJAX方法返回的是客户注册的时候是不是邮箱已经注册过的信息
20        /// </summary>
21        /// <param name="str"></param>
22        /// <returns></returns>
23        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
24        public string DateCheckInTableForEmail(string str)
25        {
26            if (UsersSelQuery.GetCustomerInfoExistByEmail(str) == 1)
27            {
28                return "对不起!该邮箱已经注册过了!";
29            }
30            else
31            {
32                return "恭喜您!邮箱可以使用";
33            }
34        }
35        /**//// <summary>
36        /// 用AJAX方法来做用户的注册（第一步）
37        /// </summary>
38        /// <param name="name"></param>
39        /// <param name="pwd"></param>
40        /// <param name="email"></param>
41        /// <param name="type"></param>
42        /// <returns></returns>
43        [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
44        public string RegisterInfo(string name, string pwd, string email, string type)
45        {
46            try
47            {
48                UserLogin ul = new UserLogin();
49                ul.U_Name = name;
50                ul.U_Pwd = pwd;
51                ul.U_Email = email;
52                ul.U_Type = int.Parse(type);
53
54                if (UserInfoBiz.RegInfoInsert(ul))
55                {
56                    return ul.U_Name + "恭喜您!注册成功!";
57                }
58                else
59                    return "对不起,注册失败,请重试!";
60            }
61            catch (Exception ex)
62            {
63                return "对不起,注册失败,请重试!";
64            }
65        }