Ajax异步验证用户名是否已经存在
发布时间:2020-12-16 01:45:16 所属栏目:百科 来源:网络整理
导读:当我们注册一个新的用户的时候,都需要验证下注册的用户是否已经存在,经常发现网站上都是这样实现友好提示的,如下图: 那具体怎么实现这样异步验证用户名是否已经存在的呢? 这里用到了Ajax的异步操作,也就相当于,Ajax发送了一个需要验证用户名是否存在
当我们注册一个新的用户的时候,都需要验证下注册的用户是否已经存在,经常发现网站上都是这样实现友好提示的,如下图:
那具体怎么实现这样异步验证用户名是否已经存在的呢? 这里用到了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" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)"> <span id="spanUserId"></span> </td></span>整体的一个异步验证用户名是否存在的例子就完成了,这样提高了用户体验度,美化了界面! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |