网页不刷新检测用户名的步骤 _Web前端

网页不刷新检测用户名的方法

很多网站在注册用户的时候都会检测用户名是否存在。通常在显示是否存在用户名的时候有2种做法。一种是通过回发页面的方式，把页面的信息发回服务器检查，然后再回发给浏览器。这种做法速度慢，而且屏幕闪烁，用户体验不好。另一种方法是通过Ajax技术，不刷新页面，而是通过浏览器的异步回发机制将信息从浏览器中发到服务器，服务器将处理后的数据返回给浏览器。这种做法的好处是速度快，数据传输量少，页面闪烁，用户体验跟桌面程序一样。但是编程比较繁琐。

数据通过Ajax传输，其本质是调用浏览器内置的OCX来创建Ajax对象。IE是ActiveObject，而其他的浏览器是XMLHttpRequest内奸对象。该概念在IE5中首次被引入，不同的浏览器在创建对象的方法身上那个是有差异的。

JQuery对Ajax提供了良好的支持。让编程人员更加专注于逻辑处理本身而忽略浏览器之间的差异。

下面以asp.net的编程为例来讲解如何通过Ajax技术来验证用户名。

1．首先在新建的网站上创建一个Reg.aspx页面。

在该页面中放入一个TextBox服务器控件，并将该控件的ID设置为txtUserName。

因为asp.net在服务器端将其解释成静态页面的时候，其对应的服务器控件将转换为标准的HTML控件，但是ID值是不变的，这就为后面的Javascript编程提供了方便。

为了显示用户名是否存在，在后面加一个<span>标签，其实<asp:Label>最后在浏览器端也是用<span>表示的。

2．创建一个Member数据库，创建一个Member表，添加一条记录。

3．在Reg.aspx页面中引入JQuery库

4．新建一个页面，用于检车用户名是否存在。

该文件的.aspx文件中，除了头部标签以外，全部去掉。

以下是最普通的数据库访问代码，不做解释。

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class VerifyUserName : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            string userName = Request.QueryString["userName"];
            VerifyMyUserName(userName);
        }
    }

    private void VerifyMyUserName(string userName)
    {
        bool result = false;
        SqlConnection conn = new SqlConnection();
        conn.ConnectionString = "Data Source=FIREWOOD-PC;Initial Catalog=member;User ID=sa;Password=自己改吧;Pooling=False";
        try
        {
            conn.Open();
            string sql = "select COUNT(*) from Member where [Name]='" + userName+"'";
            SqlCommand cmd = new SqlCommand(sql, conn);
            SqlDataReader rdr = cmd.ExecuteReader();
            if (rdr.Read())
            {
                result = rdr.GetInt32(0) > 0;
            }
            conn.Close();
            if (result)
            {
                WriteHtmlMsg("existed");
            }
            else
            {
                WriteHtmlMsg("failed");
            }
        }
        catch
        {
        }
        finally
        {
            conn.Close();
        }
    }

    /// <summary>
    /// 写Html到页面
    /// </summary>
    /// <param name="msg"></param>
    private void WriteHtmlMsg(string msg)
    {
        Response.ClearContent();
        Response.Cache.SetNoStore();
        Response.ContentType = " text/html";
        Response.ContentEncoding = System.Text.Encoding.UTF8;
        Response.Write(msg);
    }
}

利用JQuery提供的Ajax方法来处理是否存在用户名。

下面是利用JQuery的方法来检测是否存在用户名。至于JQuey的编程，这里就不赘述了。

 $(document).ready(function(){
        $("#txtUserName").blur(function(){
            var userName = $("#txtUserName").val();
             $.ajax({
                    async: false, // 此处要设置为同步
                    cache: true, // 默认true,设置为 false 将不会从浏览器缓存中加载请求信息。
                    type: "GET", // 默认:GET 请求方式:[POST/GET]
                    url: "VerifyUserName.aspx", // 默认当前地址,发送请求的地址
                    data: { userName: userName}, // 发送到服务器的数据
                    error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest + "," + textStatus + "," + errorThrown); }, // 请求失败时调用
                    timeout: 6000, // 设置请求超时时间
                    success: function(msg) {
                        if (msg == "existed"){
                            //在页面上显示此用户名已经存在
                            $("#lblExistMsg").html("此用户名已经存在!")
                        }
                        else{
                            $("#lblExistMsg").html("此用户名不存在，可以注册!")
                        }
                    },
                    complete: function() {
                    }
                });
        });
    });

最后上显示效果。