SSH网上商城之使用ajax完成用户名是否存在异步校验

小伙伴在上网的时候，需要下载或者观看某些视频资料，更或者是在逛淘宝的时候，我们都需要注册一个用户，当我们填写好各种信息，点击确定的时候，提示用户名已经存在，小编就想，为什么当我们填写完用户名的时候，她就自动提示用户名已经存在，我们也不需要浪费那么多感情，直到填写完那么多的信息之后在提示，在小编最近的项目中，就碰到这个问题，我们可以使用ajax完成用户名是否存在，今天这篇博客，小编就简单的总结一下，如何使用ajax来完成校验，还请小伙伴多多指教哦`(*∩_∩*)′！

       首先ajax完成用户名是否存在异步校验，那么我们该如何做呢？在这里，我们要由事件进行触发，也就是说，我们在用户名里面输入的时候，鼠标移开，这个事件叫做onblur，即失去焦点，与其相对的，鼠标放在里面获得焦点，我们称之为onfocus，那么失去焦点，我们该怎么操作呢？首先找到注册页面，在注册页面找到用户名那部分的代码，在后面加上onblur=checkUsername（），校验用户名即可，接着我们来编写方法checkUsername，具体代码如下所示：

<span style="font-size:18px;">function checkUsername() {     //获取文本框值:     var username = document.getElementById("username").value;     //1、创建异步交互对象     var xhr = createXmlHttp();     //2、设置监听     xhr.onreadystatechange = function() {       if (xhr.readyState == 4) {         if (xhr.status == 200) {           document.getElementById("span1").innerHTML = xhr.responseText;         }       }     }     //3、打开连接     xhr.open("GET",         "${pageContext.request.contextPath}/user_findByName.action?time="             + new Date().getTime() + "&username=", true)     //4、发送     xhr.send(null);   }   function createXmlHttp() {     var xmlHttp;     try {       xmlHttp = new XMLHttpRequest();     }     catch (e) {       try {         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");       }        catch (e) {         try {           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");         } catch (e) {}       }     }     return xmlHttp;   } </span> 

      接着，我们来建立实体Vo，实现模型驱动，自动实现封装，具体代码如下所示：

<span style="font-size:18px;">package cn.itcast.shop.user.vo; public class User {   private Integer uid;   private String username;   private String password;   private String name;   private String email;   private String phone;   private String addr;   private Integer state;   private String code;   public Integer getUid() {     return uid;   }   public void setUid(Integer uid) {     this.uid = uid;   }   public String getUsername() {     return username;   }   public void setUsername(String username) {     this.username = username;   }   public String getPassword() {     return password;   }   public void setPassword(String password) {     this.password = password;   }   public String getName() {     return name;   }   public void setName(String name) {     this.name = name;   }   public String getEmail() {     return email;   }   public void setEmail(String email) {     this.email = email;   }   public String getPhone() {     return phone;   }   public void setPhone(String phone) {     this.phone = phone;   }   public String getAddr() {     return addr;   }   public void setAddr(String addr) {     this.addr = addr;   }   public Integer getState() {     return state;   }   public void setState(Integer state) {     this.state = state;   }   public String getCode() {     return code;   }   public void setCode(String code) {     this.code = code;   } }</span>