我们在用户注册的时候，往往需要对用户输入的用户名进行验证，以保证它的唯一性。验证的过程肯定发生在服务器端，但是如果直接通过按钮回传整个页面到服务器端，然后服务器端通过验证之后再返回结果到客户端。这个过程要经历一个完整的页面刷新，这样的话使得用户体验不好。为了改善用户体验，这时候该Ajax上场了，Ajax它的功能确实强大，看看google 地图就知道了.那么如何运用Ajax技术来验证用户名呢？
首页说明一下它的工作原理，上面曾说过验证的过程发生在服务器端，现在要在客户端实行无刷新验证，那么在客户端就必须有一个东西可以通过它来调用服务器端的方法。这个东西就是XMLHttpRequest对象，它是一个浏览器内置对象，但是各个浏览器有一些差别。页面把值传给它，它发送带参数的请求到服务器，然后它从服务器端获取返回结果，再通过DOM进行客户端的处理。所以，在这个异步回传的过程中，XMLHttpRequest充当了一个桥接作用。下面就是创建XMLHttpRequest对象的javascript代码。
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
XMLHttpRequest对象像其它任何对象一样，也有方法，属性等。详情请查看http://book.csdn.net/bookfiles/11/10011442.shtml.
常用的属性有：
1.onreadystatechange//比较重要的一个属性，它指出回传结果处理函数。
2.readyState//取值为0,1,2,3,4;它们分别表示不同的状态。具体请查资料。
3.status//表示返回的情况，取值200表示返回成功
4.responseText//返回的文本
5.responseXml//返回的xml
常用的方法：
1.open(para1:string,para2:string,para3:boolen)//para1为发送请求的方法，如"get","post"等。para2为服务器端的地址。para3为是否是异步.
2.send([null])//FireFox需要null.
这样做有一个缺点，那就是手写代码比较多。
Asp.net3.5提供的ScriptManager封装了XMLHttpRequest对象，为我们省去了好多代码。
下面是一个例子的详细代码如下（服务器端我用了WebService,也可以用其它方法)：
<----页面代码如下----->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ManageUserRegister.aspx.cs" Inherits="manage_ManageUserRegister" %>
<!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>用户注册</title>
<script type="text/javascript">
function callServerAuthenticate()
{
var userName=document.getElementById("TextBoxUserName").value;
CustomerUserAuthenticate.ValidateUser(userName,ProcessResult);
}
function ProcessResult(result)
{
if(result==true)
{
document.getElementById("messageDiv").innerHTML="你可以使用该用户名";
}
else
{
document.getElementById("messageDiv").innerHTML="该用户名已经存在，请选择其它用户名";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
<Services>
<asp:ServiceReference Path="~/manage/CustomerUserAuthenticate.asmx" />//引用WebService
</Services>
</asp:ScriptManager>
<table>
<tr><td colspan="3"></td></tr>
<tr><td>用户名:</td><td>
<asp:TextBox ID="TextBoxUserName" runat="server"></asp:TextBox></td><td>
<input type="button" value="检测用户名是否存在" οnclick="callServerAuthenticate()" /></td></tr>
<tr><td>密码：</td><td><asp:TextBox ID="TextBoxPassword" runat="server"></asp:TextBox><asp:RequiredFieldValidator
ID="RequiredFieldValidator2" runat="server" ErrorMessage="*" ControlToValidate="TextBoxPassword"></asp:RequiredFieldValidator></td><td><div id="messageDiv"></div></td></tr>
<tr><td>确认密码：</td><td><asp:TextBox ID="TextBoxConfirmPassword" runat="server"></asp:TextBox><asp:CompareValidator runat="server" ErrorMessage="两次输入的密码不一致" ControlToValidate="TextBoxConfirmPassword" ControlToCompare="TextBoxPassword"></asp:CompareValidator></td><td></td></tr>
<tr><td>真实姓名：</td><td><asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox><asp:RequiredFieldValidator ControlToValidate="TextBoxName"
ID="RequiredFieldValidator3" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator></td><td></td></tr>
<tr><td>邮箱：</td><td><asp:TextBox ID="TextBoxEmail" runat="server"></asp:TextBox><asp:RequiredFieldValidator ControlToValidate="TextBoxEmail"
ID="RequiredFieldValidator4" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator></td><td></td></tr>
<tr><td>
<asp:Button ID="ButtonRegister" runat="server" Text="注册" /></td><td></td><td></td></tr>
</table>
</div>
</form>
</body>
</html>
<------------WebService代码------------------>
using System;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
/// <summary>
///UserAuthenticate 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class CustomerUserAuthenticate : System.Web.Services.WebService {
public CustomerUserAuthenticate()
{
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public bool ValidateUser(string userName)
{
ManageUser manageUser = new ManageUser();//自定义的用户类
UserAuthenticateResult result = manageUser.ValidateUser(userName, "0");//调用用户类中的ValidateUser()方法，并返回枚举结果
if (result == UserAuthenticateResult.NotExist)
{
return true;
}
else
{
return false;
}
}
}
注意：上面的[System.Web.Script.Services.ScriptService]一定要有，否则的话ScriptManager不能识别WebService,将导致javaScript错误"类未定义".
以上只是Ajax实现客户端验证用户注册的一个小例子，Ajax的功能是非常强大的，希望和大家一起学习，把它运用到我们的实际开发中，使我们的Web拥有更好的用户体验！
45
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
