Ajax异步验证用户名是否已经存在

前端之家收集整理的这篇文章主要介绍了Ajax异步验证用户名是否已经存在前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

当我们注册一个新的用户的时候,都需要验证下注册用户是否已经存在,经常发现网站上都是这样实现友好提示的,如下图:



那具体怎么实现这样异步验证用户名是否已经存在的呢?

这里用到了Ajax的异步操作,也就相当于,Ajax发送了一个需要验证用户名是否存在的请求,然后在设置请求所返回的时间,完成用户名是否存在的请求。


下面看下具体的代码

  1. <span style="font-family:KaiTi_GB2312;font-size:18px;"> //定义一个请求
  2. var xmlHttp;
  3. function createXMLHttpRequest() {
  4. //表示当前浏览器不是ie,如ns,firefox
  5. if(window.XMLHttpRequest) {
  6. xmlHttp = new XMLHttpRequest();
  7. } else if (window.ActiveXObject) {
  8. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  9. }
  10. }
  11. //field为获取用户所填写的用户名
  12. function validate(field) {
  13. //判断用户名是否为空
  14. if (trim(field.value).length != 0) {
  15. //创建Ajax核心对象XMLHttpRequest
  16. createXMLHttpRequest();
  17. //将获取用户名发送到另一个jsp中去验证
  18. var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime();
  19. //设置请求方式为GET,设置请求的URL,设置为异步提交,true为异步,false为同步
  20. xmlHttp.open("GET",url,true);
  21. //将方法地址复制给onreadystatechange属性
  22. //类似于电话号码
  23. xmlHttp.onreadystatechange=callback;
  24. //将设置信息发送到Ajax引擎
  25. xmlHttp.send(null);
  26. } else {
  27. document.getElementById("spanUserId").innerHTML = "";
  28. }
  29. }
  30. //发送请求之后,返回的状体
  31. function callback() {
  32. //alert(xmlHttp.readyState);
  33. //Ajax引擎状态为成功
  34. if (xmlHttp.readyState == 4) {
  35. //HTTP协议状态为成功
  36. if (xmlHttp.status == 200) {
  37. if (trim(xmlHttp.responseText) != "") {
  38. //设置请返回的消息信息
  39. document.getElementById("spanUserId").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"
  40. }else {
  41. document.getElementById("spanUserId").innerHTML = "";
  42. }
  43. }else {
  44. alert("请求失败,错误码=" + xmlHttp.status);
  45. }
  46. }
  47. }</span>

获取用户名去验证:这里为user_validate.jsp页面,具体的后台代码就不作展示了!
  1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><%
  2. //Thread.currentThread().sleep(5000);
  3. String userId = request.getParameter("userId");
  4. if (UserManager.getInstance().findUserById(userId) != null) {
  5. out.println("用户代码已经存在");
  6. }
  7. %></span>


用户名HTML代码
  1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><td width="78%">
  2. <input name="userId" type="text" class="text1" id="userId"
  3. size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId %>" onblur="validate(this)">
  4. <span id="spanUserId"></span>
  5. </td></span>
整体的一个异步验证用户名是否存在的例子就完成了,这样提高了用户体验度,美化了界面!

猜你在找的Ajax相关文章