很早就想发布这篇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=" 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=" 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
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=" 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=" 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 }
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 }