AJAX验证用户代码重复
当焦点一离开就去检查
1.input对象的onblur事件
οnblur="validate(this)"
2. 创建XMLHttprequest对象
function validate(field){ if(trim(field.value).length != 0){ var xmlhttp= null; if (window.XMLHttpRequest) <span style="white-space:pre"> </span>{// 表示当前浏览器不是IE,如 Firefox, Chrome, Opera, Safari xmlHttp=new XMLHttpRequest(); }else{// IE浏览器 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
3. xmlHttp.open("GET",url,true) 与Ajax引擎建立连接
var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
//设置请求方式为get,请求的url,异步提交
xmlHttp.open("GET",url, true)
4.url转到user_validate.jsp
调用findUserById(userId)方法,根据输入userId查询数据库,返回User或null,如果不为空,说明也存在,提示
String userId = request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId) != null){
out.println("用户代码已存在!");
}
5. 接到响应,xml.onreadystatechange判断改为最后一个状态,http协议成功200 ,AJax引擎回调,使用匿名函数
//将方法地址复制给onreadystatechange属性
<span style="white-space:pre"> </span>//类似于电话号码
xmlHttp.onreadystatechange=function(){
//Ajax引擎状态为成功
if(xmlHttp.readyState == 4){
//HTTP协议状态为成功
if(xmlHttp.status == 200){
if(trim(xmlHttp.responseText) != ""){
//alert(xmlHttp.responseText);
document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
}else{
document.getElementById("spanUserId").innerHTML = "";
}
}else{
alert("请求失败,错误码=" + xmlHttp.status);
}
}
};
//将设置信息发送到AJax引擎
xmlHttp.send(null);
}else{
document.getElementById("spanUserId").innerHTML = "";
}
}
6 在后面提示span
<span id="spanUserId"></span>
另:避免重复提交
span上提示重复,提交时,为避免重复访问数据库判断,可以在客户端根据spanUserId是否有值,弹出提示框判断
if(document.getElementById("spanUserId").innerHTML != ""){
alert("用户代码已存在!");
userIdField.focus();
return;
}