很多网站在注册用户的时候都会检测用户名是否存在。通常在显示是否存在用户名的时候有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() {
}
});
});
});
最后上显示效果。