Ajax实现异步刷新验证用户名是否已存在的具体方法_.net

都是简单的实例，所以直接发代码

静态页面ajax.html

<html>
    <head>
        <title>ajax</title>
        <script type="text/javascript">
            function loadxmldoc() {
                if (document.getelementbyid("account").value == "") {
                    document.getelementbyid("accdiv").innerhtml = "用户名不能为空";
                    return;
                }
                var xmlhttp;
                if(window.xmlhttprequest) { // code for ie7+
                    xmlhttp = new xmlhttprequest();
                }
                else { // code for ie5/ie6
                    xmlhttp = new activexobject("microsoft.xmlhttp");
                }

                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
                        //document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext;
                        if (xmlhttp.responsetext == "true") {
                            document.getelementbyid("accdiv").innerhtml = "用户名不可用";
                        }
                        else {
                            document.getelementbyid("accdiv").innerhtml = "用户名可用";
                        }
                    }
                }
                var a = document.getelementbyid("account").value;
                // get
                xmlhttp.open("get", "validate.aspx?account=" + a + "&random=" + math.random, true);
                xmlhttp.send();
            }
            function deldata() {
                document.getelementbyid("account").value = "";
                document.getelementbyid("accdiv").innerhtml = "";
            }
        </script>
    </head>
    <body>
        <h3>ajax</h3>
        <table>
            <tr>
                <td>账号：</td><td><input id="account" type="text" onblur="loadxmldoc();" onfocus="deldata();"/></td><td><div id="accdiv"></div></td>
            </tr>
            <tr>
                <td>密码：</td><td><input id="passwd" type="password" /></td>
            </tr>
            <tr>
                <td>确认密码：</td><td><input id="vpasswd" type="password" /></td>
            </tr>
            <tr>
                <td>姓名：</td><td><input id="name" type="text" /></td>
            </tr>
        </table>

    </body>
</html>

在账号输入框失去焦点时调用函数

访问服务器使用的是get方法，所以在参数处使用了附加随机码来避免缓存。

验证页面validate.aspx后台代码：

复制代码代码如下:

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
using system.configuration;
using system.data.sql;
using system.data.sqlclient;

public partial class ajax_validate_validate : system.web.ui.page
{
public sqlconnection conn;

    protected void page_load(object sender, eventargs e)
    {
        response.clear();
        if (exists(request.querystring["account"]))
            response.write("true");
        else
            response.write("false");
        response.end();
    }
    /// <summary>
    /// 获取数据库连接
    /// </summary>
    /// <returns></returns>
    protected sqlconnection getconnection()
    {
        string str = configurationmanager.connectionstrings["connectionstring"].connectionstring;
        conn = new sqlconnection(str);
        return conn;
    }
    protected bool exists(string account)
    {
        using (getconnection())
        {
            try
            {
                conn.open();
                string sqlstr = "select count(*) from userinfo where account='" + account + "'";
                sqlcommand cmd = new sqlcommand(sqlstr, conn);
                int row = convert.toint32(cmd.executescalar());
                if (row > 0)
                    return true;
                else
                    return false;
            }
            catch (exception e)
            {
                throw e;
            }
            finally
            {
                conn.close();
            }
        }
    }
}