用AJAX实现注册用户即时检测(XMLHttpRequest对象)
常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。
以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，Web系统应能即时检查并即时显示，并在检查和显示的同时不影响当前页面的操作。这也就是“异步获取数据”的要求，而这正是AJAX的强项
createObject.js
//声明XMLHttpRequest对象
var xmlHttp;
//检测用户名是否存在
function CheckName(userName)
{
createXMLHTTP();//创建XMLHttpRequest对象
var url="DisposeEvent.aspx?Name="+userName+"&Event=Check";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=checkUserName;
xmlHttp.send(null);
}
function createXMLHTTP()
{
if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();//mozilla浏览器
}
else if(window.ActiveXObject)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE老版本
}
catch(e)
{}
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE新版本
}
catch(e)
{}
if(!xmlHttp)
{
window.alert("不能创建XMLHttpRequest对象实例！");
return false;
}
}
}
//执行检测用户名回调函数
function checkUserName()
{
if(xmlHttp.readyState==4)//判断对象状态
{
if(xmlHttp.status==200)//信息成功返回，开始处理信息
{
if(xmlHttp.responseText=="true")
{
document.getElementById("imgName").src="images/true.gif";
//让注册按钮失效
document.getElementById("btnReg").disabled=false;
}
else
{
document.getElementById("imgName").src="images/false.gif";
document.getElementById("btnReg").disabled=true;
}
}
}
}
//注册新用户
function regUser()
{
if(document.getElementById("userName").value=="")
{
alert("对不起，用户名不为空");
return false;
}
if(document.getElementById("userPwd").value=="")
{
alert("对不起，密码不为空");
return false;
}
var url="DisposeEvent.aspx?Name="+document.getElementById("userName").value+"&Pwd="+document.getElementById("userPwd").value+"&Event=Reg";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=regUserInfo;//注册用户回调函数
xmlHttp.send(null);
}
//注册用户回调函数
function regUserInfo()
{
if(xmlHttp.readyState==4)//判断对象状态
{
if(xmlHttp.status==200)//信息成功返回，开始处理信息
{
if(xmlHttp.responseText=="true")//获取的Response.Write("true");里面的文本
{
alert("恭喜，新用户注册成功!");
document.getElementById("userName").value="";
document.getElementById("userPwd").value="";
}
else
{
alert("对不起，注册失败!");
document.getElementById("userName").value="";
document.getElementById("userPwd").value="";
}
}
}
}
页面DisposeEvent.aspx.cs
public partial class DisposeEvent : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
User user = new User();
//是否为执行CheckName方法
if (Request.QueryString["Event"].ToString() == "Check")
{
if (user.checkName(Request.QueryString["Name"].ToString()))
{
//当数据库中已存在此用户时输出为false,让其显示相应图标
Response.Write("false");
Response.End();
}
else
{
Response.Write("true");
Response.End();
}
}
//是否为执行regUser方法
if (Request.QueryString["Event"].ToString() == "Reg")
{
if (user.insertUserInfo(Request.QueryString["Name"].ToString(), Request.QueryString["Pwd"].ToString()))
{
Response.Write("true");//客户端用responseText接收
Response.End();
}
}
}
}
后台:Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>AJAX实现用户注册</title>
<script language="javascript" src="createObject.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<table style="width: 442px; height: 145px">
<tr>
<td style="width: 100px">
用户名：</td>
<td style="width: 100px">
<input id="userName" type="text" onkeyup="CheckName(document.getElementById('userName').value);" /></td>
<td style="width: 100px">
<img src="" id="imgName" /></td>
</tr>
<tr>
<td style="width: 100px">
密码：</td>
<td style="width: 100px">
<input id="userPwd" type="text" /></td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td colspan="3">
<input id="btnReg" style="width: 69px" type="button" value="注册" onclick="regUser();" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
