分别使用创建XMLHttpRequest和jQuery实现用户注册前的验证
测试环境vs2008
Html代码如下:
<asp:TextBox ID="userName" runat="server" />
<span id="validateMessage"></span><br />
<input type="button" value="创建xmlhttprequest验证用户" onclick="RunAjax();" /><input type="button" value="jQuery验证用户" id="btnJQuery" />
版本一:通过创建xmlHttpRequest对象方式
<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
//IE不同版本
if (window.ActiveXObject) {
try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//非IE
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//查询字符串
function createQueryString() {
var userName = document.getElementById("userName").value;
var querystring = "userName=" + userName;
return querystring;
}
//
function RunAjax() {
createXMLHttpRequest();
var queryString = "ashx/IsHaveUser.ashx?";
queryString = queryString + createQueryString()
+ "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
document.getElementById('validateMessage').innerHTML = "<img src='images/loading.gif' />";
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var result = xmlHttp.responseText;
setTimeout(document.getElementById("validateMessage").innerHTML = result, 2000);
}
}
}
版本二:jQuery中的关于Ajax有很多函数,下面使用较简单也用的较多的load函数.能够满足我们的需求
<script type="text/javascript">
$(document).ready(
function() {
$("#btnJQuery").bind("click", function() {
$("#validateMessage img").remove();//点击按钮时清除img元素
$("<img src='images/loading.gif'/>").
appendTo($("#validateMessage")); //请求过程中加载loading图片
$("#validateMessage").load("ashx/IsHaveUser.ashx?userName=" + $("#userName")[0].value + "&timeStamp=" + new Date().getTime());//ajax请求
});
}
)
</script>
对比2中方法,发现jquery方便很多.不需要我们自己去创建xhr对象.
请求URL为实现了IhttpHandler接口的类,这样我们可以对用户请求进行处理
public class IsHaveUser : IHttpHandler {
private string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
public void ProcessRequest (HttpContext context) {
System.Threading.Thread.Sleep(2000);//模拟延迟
context.Response.ContentType = "text/plain";
using (SqlConnection conn = new SqlConnection(connectionString))
{
conn.Open();
SqlCommand comm = new SqlCommand("select UserId From Users Where UserName=@UserName", conn);//可换成自己的数据库或其他
SqlParameter param = comm.CreateParameter();
param.ParameterName = "@UserName";
param.Value = context.Request.QueryString["userName"];
param.DbType = DbType.String;
comm.Parameters.Add(param);
SqlDataReader dr= comm.ExecuteReader();
if (dr.HasRows)//存在用户的情况
{
context.Response.Write("<img src='images/error.gif' />");
}
else { context.Response.Write("<img src='images/right.gif' />"); }
}
}
public bool IsReusable {
get {
return false;
}
}
}
效果图:
