Ajax验证用户名是否存在

时间：2010-09-24 来源：华仔崽

在注册的时候,常会进行用户名验证,如果输入的用户名已经存在,立刻给出提示而不是等信息填写完后进行验证,如果输入信息很多的话,不仅信息会丢失,并且会进行一次回传,很恼火,那么注册的时候使用Ajax验证一下,就可以避免这些问题了,下面给出最简单的使用示例,判断用户名是否存在:

转自：http://www.cnblogs.com/huazai/archive/2008/11/25/1340911.html

第一种:最原始的JS验证

HMTL代码:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="CheckUserName.js"></script>
    <script language="javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td>Ajax Example:</td>
        </tr>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                    <td>Example 1:Check UserName IsExists</td>
                  </tr>
                  <tr>
                    <td>
                        <asp:Label ID="lblUserName" runat="server" Text="用户名："></asp:Label>
                        <input id="txtUserName" type="text" onblur="onBlur()"/>
                    </td>
                  </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

//CheckUserName.js

    var sendRequest = function()
    {
        request = createRequest();
//        request.open("post", option.url, true);
//        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//        request.onreadystatechange = ResponseRequest;
//        request.send(option.param);
        request.open("get", option.url+"?t=0", true);
        request.onreadystatechange = ResponseRequest;
        request.send(null);
    }

var onBlur = function()
{
var option = { url: "Test.aspx", param: "t=1", Success:function(request){alert(request.responseText);}, Faitrue: function(request) { alert(false) } };
new ajax(option);
}

//Test.aspx

protected void Page_Load(object sender, EventArgs e)
{
            if (Request["t"] != null)
            {
                this.Response.Clear();
                string t = Request["t"].ToString();
                if (t == "1")
                {
                    Response.Write("用户名已存在，请填写其他的用户名!");
                }
                else if (t == "0")
                {
                    Response.Write("该用户名没被注册，可以使用!");
                }
                this.Response.End();
            }
}

第二种方式:利用JQuery框架ajax验证

HMTL代码:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
        $("#Button1").click(function() {
                $.ajax({
                    type: "get",
                    url: "ResponsePage.aspx?t=0",
                    dataType: 'html',
                    success: function(data) {
                        alert("post " + data);
                    },
                    error: function() { alert('error!'); }
                });
            });
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button1" type="button" value="显示" />
    </div>
    </form>
</body>
</html>

//ResponsePage.apsx

protected void Page_Load(object sender, EventArgs e)
{
            this.Response.Clear();
            string t = Request["t"].ToString();
            if (t == "1")
            {
                Response.Write("用户名已存在，请填写其他的用户名!");
            }
            else if (t == "0")
            {
                Response.Write("该用户名没被注册，可以使用!");
            }
            this.Response.End();
}