JQuery实现用户名重名查询

JQuery是一个轻量级的DOM框架，用它实现上次简单用户名重名查询同样效果，
但更加简单了，看代码：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head runat="server">
4     <title>JQuery implement</title>
5     <script src="js/jquery-1.2.6-vsdoc.js" type="text/javascript"></script>
6     <script type="text/javascript">
7         $(document).ready(function() {
8             $('#btnCheck').click(function() {
9                 $.ajax({
10                     type: "post",
11                     url: "DataProvider.ashx",
12                     beforeSend: function(XMLHttpRequest) {
13                         ShowLoading();
14
15                     },
16                     data: "username=" + $('#username').val(),
17                     success: function(data, textStatus) {
18                         $("#ajaxResult").html("");
19                         $("#ajaxResult").append(data);
20                     },
21                     complete: function(XMLHttpRequest, textStatus) {
22                         HideLoading();
23                     },
24                     error: function() {
25                         alert('出错了！');
26                     }
27               , timeout: 1000
28                 });
29             }
30         )
31
32         })
33         function ShowLoading() {
34             $("#wait").show(400, function() { });
35         }
36
37         function HideLoading() {
38             $("#wait").hide(760, function() { });
39         }
40     </script>
41
42     <style type="text/css" media="screen">
43         @import url("http://www.taobao.com/home/css/tbsp/master/global_v3a.php?t=20080429.css");
44         @import url("http://www.taobao.com/home/css/component.php?t=20080624.css");
45         @import url("http://www.taobao.com/home/css/component_ext.php?t=20080624.css");
46         @import url("http://www.taobao.com/home/css/sys/register060524.css?t=20080624.css");
47     </style>
48 </head>
49 <body>
50     <form id="form1" runat="server">
51     <div class="Hint">
52         用户名：</div>
53     <div class="Input" style=" 210px">
54         <input id="username" type="text" size="24" value="" />
55         <br />
56         <input type="button" id="btnCheck" value="检查用户名是否可用" />
57     </div>
58     <div class="Info" style=" 360px">
59         <div id="wait" style="display: none">
60             正在加载请等待

</div>
61         <span id="ajaxResult"></span>
62     </div>
63     <a href="http://wintersun.cnblogs.com" target="_blank">about me</a>
64     </form>
65 </body>
66 </html>

DataProvider code:

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(string.Format("用户名<b>{0}</b>已存在。",username));
18             else
19                 context.Response.Write(string.Format("恭喜你，你可以使用此用户名<b>{0}</b>。", username));
20         }
21
22         public bool IsReusable
23         {
24             get
25             {
26                 return false;
27             }
28         }
29     }