Ajax实现简单用户名重名查询

zljpp

浏览: 260011 次

最近访客更多访客>>

u012363178

wangyy

smdbs2000

wiseweidong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

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

/**
* XMLHttpRequest Object Pool
*
* @author legend <legendsky@hotmail.com>
* @link http://www.ugia.cn/?p=85
* @Copyright www.ugia.cn
*/

var XMLHttp = {
_objPool: [],

    _getInstance: function ()
    {
        for (var i = 0; i < this._objPool.length; i ++)
        {
            if (this._objPool[i].readyState == 0 || this._objPool[i].readyState == 4)
            {
                return this._objPool[i];
            }
        }

// IE5中不支持push方法
this._objPool[this._objPool.length] = this._createObj();

return this._objPool[this._objPool.length - 1];
},

    _createObj: function ()
    {
        if (window.XMLHttpRequest)
        {
            var objXMLHttp = new XMLHttpRequest();

        }
        else
        {
            var MSXML = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
            for(var n = 0; n < MSXML.length; n ++)
            {
                try
                {
                    var objXMLHttp = new ActiveXObject(MSXML[n]);
                    break;
                }
                catch(e)
                {
                }
            }
         }

        // mozilla某些版本没有readyState属性
        if (objXMLHttp.readyState == null)
        {
            objXMLHttp.readyState = 0;

            objXMLHttp.addEventListener("load", function ()
                {
                    objXMLHttp.readyState = 4;

                    if (typeof objXMLHttp.onreadystatechange == "function")
                    {
                        objXMLHttp.onreadystatechange();
                    }
                }, false);
        }

return objXMLHttp;
},

    // 发送请求(方法[post,get], 地址, 数据, 回调函数)
    sendReq: function (method, url, data, callback)
    {
        var objXMLHttp = this._getInstance();

        with(objXMLHttp)
        {
            try
            {
                // 加随机数防止缓存
                if (url.indexOf("?") > 0)
                {
                    url += "&randnum=" + Math.random();
                }
                else
                {
                    url += "?randnum=" + Math.random();
                }

open(method, url, true);

// 设定请求编码方式
                setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
                send(data);
                onreadystatechange = function ()
                {
                    if (objXMLHttp.readyState == 4 && (objXMLHttp.status == 200 || objXMLHttp.status == 304))
                    {
                        callback(objXMLHttp);
                    }
                }
            }
            catch(e)
            {
                alert(e);
            }
        }
    }
};
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     
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     }

分享到：

Java Build工具Ant与Maven之比较 | 一个支持chrome、firefox的全屏插件

2012-04-15 23:38
浏览 2243
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论