posts - 598,  comments - 560,  trackbacks - 20

       很早就想发布这篇POST了,Ajax实现简单用户名重名查询,引用了xmlhttprequest object pool,如下:

XMLHttpRequest Object Pool

ASPX:

 

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="THttpModule.Login" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <title>Login Page</title>
 7     <style type="text/css" media="screen">
 8         @import url("http://www.taobao.com/home/css/tbsp/master/global_v3a.php?t=20080429.css");
 9         @import url("http://www.taobao.com/home/css/component.php?t=20080624.css");
10         @import url("http://www.taobao.com/home/css/component_ext.php?t=20080624.css");
11         @import url("http://www.taobao.com/home/css/sys/register060524.css?t=20080624.css");
12     </style>
13     <script src="js/xmlhttphelper.js" type="text/javascript"></script>
14     <script language="javascript">
15     <!-- Author PetterLiu http://wintersun.cnblogs.com -->
16     var usernameCheckerTimer;
17 function CallbackSuccess(objXMLHttp) {
18    var result = objXMLHttp.responseText; 
19    document.getElementById("check_username_info").innerHTML = result; 
20    alert(result); 
21    }
22 function checkIsExist() {
23    var uname = document.getElementById("username").value; 
24    if (uname == "") {
25       return false
26       }
27    var url = 'DataProvider.ashx'
28    var sdata = "username=" + uname; 
29    XMLHttp.sendReq("post", url, sdata, CallbackSuccess); 
30    }
31 function checkUsernameUsage() {
32    clearTimeout(usernameCheckerTimer); 
33    document.getElementById("check_username_info").innerHTML = "检测中,请稍等"
34    document.getElementById("check_username_info").className = "WarningMsg"
35    //delay time 750ms
36    sernameCheckerTimer = setTimeout("checkIsExist();"750); 
37    }
38  </script>
39 
40 </head>
41 <body>
42     <form id="form1" runat="server">
43     <div class="Hint">
44         用户名:</div>
45     <div class="Input" style="width: 210px">
46         <input id="username" type="text" size="24" value="" />
47         <br />
48         <input type="button" name="check_username" value="检查用户名是否可用" onclick="checkUsernameUsage();" />
49     </div>
50     <div class="Info" style="width: 360px">
51         <div id="username_info">
52         </div>
53         <div id="check_username_info">
54         </div>
55     </div>
56     </form>
57 </body>
58 </html>
59 

接收数据的httphandler

 1     /// <summary>
 2     /// Recevice Httphandler
 3     /// <remarks>Author PetterLiu http://wintersun.cnblogs.com</remarks>
 4     /// </summary>
 5     [WebService(Namespace = "http://tempuri.org/")]
 6     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 7     public class DataProvider : IHttpHandler
 8     {
 9         /// <summary>
10         /// Process logic
11         /// </summary>
12         /// <param name="context">HttpContext</param>
13         public void ProcessRequest(HttpContext context)
14         {
15             string username = context.Request.Form["username"];
16             if (username == "petter")
17                 context.Response.Write("用户名已存在。");
18             else
19                 context.Response.Write("恭喜你,你可以使用此用户名。");
20         }
21 
22         public bool IsReusable
23         {
24             get
25             {
26                 return false;
27             }
28         }
29     }

 

posted on 2008-08-02 13:15  PetterLiu  阅读(...)  评论(...编辑  收藏