当焦点一离开就去检查
1.input对象的onblur事件
onblur="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",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; }原文链接:https://www.f2er.com/ajax/161877.html