设计思路:
1.javascript获取输入的用户名
2.用XMLHTTPRequest把用户名提交给动态处理页面(本例采用ASP.net+C#,如果是其它语言也可以)
3.后台处理页面获取此用户名后在数据库中查询用户是否已存在,如果存在就返回 "true"
4.XMLHTTPRequest获取输出的字符串
5.根据输出结果在页面上显示“用户已存在”或“可以注册”字样
前台页面如下:
<html>
<body>
<input id="inName" type="text" οnchange="checkName()" /> <span id="checkNameText"></span>
</body>
</html>
<script type="text/javascript">
var request=new ActiveXObject("Microsoft.XMLHTTP");
//此函数获取输入的用户名并提交
function checkName()
{
var strName=document.getElementById("inName").value;
//通过Open方法把参数传递给后台页面
request.open("GET","AjaxAction.aspx?checkname="+strName,true);
//后台操作完毕后用checkNameText函数来处理结果
request.onreadystatechange=function(){checkNameText();}
//发送请示
request.send();
}
//此函数获得处理页面的输出字符
function checkNameText()
{
//用responseText方法获得输出的字符串,判断后进行相应处理
if(request.responseText=="true")
{
document.getElementById("nameInfo").innerHTML="<font color=red>用户已存在</font>";
}
else
{
document.getElementById("nameInfo").innerHTML="<font color=green>可以注册</font>";
}
}
</script>
后台页面,在aspx中只能有<%@ %>指令,不能出现任何HTML代码否则将出错
.cs文件中的主要代码
//如果
if (Request.QueryString["checkname"] != null)
{
//用URL中的checkname值作为参数将CheckUser函数返回的bool型结果转换成小写字符串输出
Response.Write(CheckUser(Request.QueryString["checkname"].ToString()).ToString().ToLower());
}
//验证用户是否存在,如果存在就返回True
bool CheckUser(string Name)
{
SqlConnection Conn = new SqlConnection(ConfigurationSettings.AppSettings[0]);
SqlCommand Cmd = new SqlCommand("select id from USER where NAME='" + Name + "'", Conn);
Conn.Open();
SqlDataReader DR = Cmd.ExecuteReader();
return DR.Read();
Conn.Close();
}