当我们注册一个新的用户的时候,都需要验证下注册的用户是否已经存在,经常发现网站上都是这样实现友好提示的,如下图:
那具体怎么实现这样异步验证用户名是否已经存在的呢?
这里用到了Ajax的异步操作,也就相当于,Ajax发送了一个需要验证用户名是否存在的请求,然后在设置请求所返回的时间,完成用户名是否存在的请求。
下面看下具体的代码:
<span style="font-family:KaiTi_GB2312;font-size:18px;"> //定义一个请求
var xmlHttp;
function createXMLHttpRequest() {
//表示当前浏览器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//field为获取用户所填写的用户名
function validate(field) {
//判断用户名是否为空
if (trim(field.value).length != 0) {
//创建Ajax核心对象XMLHttpRequest
createXMLHttpRequest();
//将获取用户名发送到另一个jsp中去验证
var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
//设置请求方式为GET,设置请求的URL,设置为异步提交,true为异步,false为同步
xmlHttp.open("GET", url, true);
//将方法地址复制给onreadystatechange属性
//类似于电话号码
xmlHttp.onreadystatechange=callback;
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
} else {
document.getElementById("spanUserId").innerHTML = "";
}
}
//发送请求之后,返回的状体
function callback() {
//alert(xmlHttp.readyState);
//Ajax引擎状态为成功
if (xmlHttp.readyState == 4) {
//HTTP协议状态为成功
if (xmlHttp.status == 200) {
if (trim(xmlHttp.responseText) != "") {
//设置请返回的消息信息
document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
}else {
document.getElementById("spanUserId").innerHTML = "";
}
}else {
alert("请求失败,错误码=" + xmlHttp.status);
}
}
}</span>
将获取的用户名去验证:这里为user_validate.jsp页面,具体的后台代码就不作展示了!
<span style="font-family:KaiTi_GB2312;font-size:18px;"><%
//Thread.currentThread().sleep(5000);
String userId = request.getParameter("userId");
if (UserManager.getInstance().findUserById(userId) != null) {
out.println("用户代码已经存在");
}
%></span>
<span style="font-family:KaiTi_GB2312;font-size:18px;"><td width="78%">
<input name="userId" type="text" class="text1" id="userId"
size="10" maxlength="10" οnkeypress="userIdOnKeyPress()" value="<%=userId %>" οnblur="validate(this)">
<span id="spanUserId"></span>
</td></span>
整体的一个异步验证用户名是否存在的例子就完成了,这样提高了用户体验度,美化了界面!