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="width: 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="width: 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: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="width: 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="width: 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>
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 }
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 }
