您的位置：首页 > 其它

AJAX(三)--实例无刷新验证用户名是否存在

2013-02-05 17:07 721 查看

我们知道在注册淘宝账户时，当我们注册的账户名与其他人同名的时候，系统会自动的给出提示，并且给出推荐使用的账户名，并没有完全的刷新整个页面，而是悄悄的向服务器端发送请求进行验证，让我们感觉很舒服，这就是AJAX技术的作用，大大增加了用户体验。

我们查看源代码就可以看到客户端脚本，使用的AJAX技术。

注册界面代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ajax例子--登录用户名自动检测无需再设置其他的按钮</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//定义XMLHttpRequest对象，var是可变参数类型，代表任何一种数据类型。
var xmlHttp = false;

//该时候检查输入用户名数据库中是否已经存在。
function checkUserName() {

// 检查输入的用户名是否为空。
var tbUserName = document.getElementById('tbUserName');
if (tbUserName.value == "")
return;

// 创建 XMLHttpRequest 对象
try {
//使用较新版本的IE浏览器。
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

}
catch (e) {
try {
//如果为低版本的浏览器。
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2) {
//XMLHttpRequest对象创建失败，保证Request的值仍为false。
xmlHttp = false;
}
}
//验证创建是否成功，不为ie，则为除了ie之外的谷歌 360 火狐等浏览器。
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}

// 转到的链接地址。
var url = "CheckUserNameService.aspx?UserName=" + tbUserName.value;

// 规定请求的类型、URL 以及是否异步处理请求。Get类型，true为异步执行。
xmlHttp.open("GET", url, true);

//onreadystatechange.也就是XMLHttRequest对象的readyState属性改变时。当请求被发送时执行的一些响应任务。
xmlHttp.onreadystatechange = callBack_CheckUserName;

// Send the request
xmlHttp.send(null);

}
//以参数形式传递到另一个函数的函数。
function callBack_CheckUserName() {
//readyState方法是存有XMLHttpRequest状态，从0到4。
//0是请求未初始化，1服务器连接已经建立 2 请求已经接受 3 请求处理中 4 请求已完成，且响应已就绪。
if (xmlHttp.readyState == 4) {
//  如果服务器的响应并非是XML使用responseText否则使用responseXML。responsText返回服务器字符串形式的响应。
var isValid = xmlHttp.responseText;
//选择出显示验证结果的标签。
var checkResult = document.getElementById("checkResult");
//innerHtml为脱去标签的的外衣。例如，<span>您好</span>，显示您好。
checkResult.innerHTML = (isValid =="true") ? "恭喜您，这个用户名可以使用" : "很抱歉该会员名已经被使用";
}
}

</script>
</head>
<body>
<table id="registerForm">
<tr>
<td class="title">
用户名
</td>
<td>
<input id="tbUserName" type="text" onblur="checkUserName()" />
<span id="checkResult"></span>
</td>
</tr>
<tr>
<td class="title">
密码
</td>
<td>
<input id="tbPassword" type="password" />
</td>
</tr>
<tr>
<td rowspan="2">
<input id="btnSubmit" type="submit" value="提交" onclick="checkUserName()" />

</td>
</tr>
</table>
</body>
</html>

跳转的URL界面，验证界面代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CheckUserNameService.aspx.cs"  %>
<script runat ="server">
protected void Page_Load(object sender, EventArgs e)
{
// 得到要验证的用户名。
string candidateUserName = Request["UserName"];

// 初始化验证标记，为false。
bool isValid = false;
// 如果转换为小写字母不为tgb则返回true。
if (candidateUserName.ToLower() != "tgb")
{
isValid = true;
}

// 清除缓存区所有的html输出。
Response.Clear();
//将指定字符写入HTTP输出。
Response.Write(isValid ? "true" : "false");
//立即发送缓存区的输出。
Response.Flush();      }
</script>

得到的显示结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航