明霞山资源网 Design By www.htccd.com

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

静态页面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();
            }
        }
    }
}

在后台中验证用户名是否已经存在于数据库中,返回真或者假

运行结果:

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

数据库很简单,只建了一张表userinfo,有3个字段:account、passwd、name

注意:在后台往请求页面写数据时,当写完要发送的数据之后,需要调用Response.end()方法来终止写入,否则可能会发送一个完整页面过去。

标签:
Ajax,异步,验证用户名

明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。