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> 

       我们要接收参数，实现模型驱动，actionsupport直接实现modeldriven即可，接着来编写我们的ajax代码，需要向action中进行提交，我们来编写useraction中的代码，具体代码如下所示：

<span style="font-size:18px;">package cn.itcast.shop.user.action; 
import java.io.ioexception; 
import javax.servlet.http.httpservletresponse; 
import org.apache.struts2.servletactioncontext; 
import cn.itcast.shop.user.service.userservice; 
import cn.itcast.shop.user.vo.user; 
import com.opensymphony.xwork2.actionsupport; 
import com.opensymphony.xwork2.modeldriven; 
/** 
 * 用户模块action的类 
 * @author flower 
 * 
 */ 
public class useraction extends actionsupport implements modeldriven<user> { 
  //模型驱动使用的对象 
  private user user = new user(); 
  public user getmodel(){ 
    return user; 
  } 
  //注入userservice 
  private userservice userservice; 
  public void setuserservice(userservice userservice){ 
    this.userservice=userservice; 
  } 
  /** 
   * 跳转到注册页面的执行方法 
   */ 
  public string registpage(){ 
    return "registpage"; 
  } 
  /** 
   * ajax进行异步校验用户名的执行方法 
   * @throws ioexception 
   */ 
  public string findbyname() throws ioexception{ 
    //调用service进行查询 
    user existuser = userservice.findbyusername(user.getusername()); 
    //获得response对象，向页面输出 
    httpservletresponse response = servletactioncontext.getresponse(); 
    response.setcontenttype("text/html;charset=utf-8"); 
    //判断 
    if(existuser != null){ 
      //查询到该用户：用户名已经存在 
      response.getwriter().println("<font color='red'>用户名已经存在</font>"); 
    }else{ 
      //没查询到该用户：用户名可以使用 
      response.getwriter().println("<font color='green'>用户名已经存在</font>"); 
    } 
    return none; 
  } 
  /** 
   * 用戶注册的方法： 
   */ 
  public string regist(){ 
    return none; 
  } 
} 
</span> 

        接着，我们需要做的就是把service和dao配置到applicationcontext中，代码如下所示：

<span style="font-size:18px;"><!-- service的配置 =========================== --> 
  <bean id="userservice" class="cn.itcast.shop.user.service.userservice"> 
    <property name="userdao" ref="userdao"/> 
  </bean>  
  <!-- userdao的配置 =========================== --> 
   <bean id="userdao" class="cn.itcast.shop.user.dao.userdao"> 
    <property name="sessionfactory" ref="sessionfactory"></property> 
</bean> </span> 

       配置好了之后，我们需要在userdao里面完成查询，具体代码如下所示：

<span style="font-size:18px;">package cn.itcast.shop.user.dao; 
import org.springframework.orm.hibernate3.support.hibernatedaosupport; 
import java.util.list; 
import cn.itcast.shop.user.vo.user; 
/** 
 * 用户模块持久层代码 
 * @author flower 
 * 
 */ 
public class userdao extends hibernatedaosupport { 
  //按名次查询是否有该用户 
  public user findbyusername (string username){ 
    string hql ="from user where username= ?"; 
    list <user> list=this.gethibernatetemplate().find(hql,username); 
    if(list !=null && list.size() > 0){ 
      return list.get(0); 
    } 
     return null; 
    } 
} 
</span> 

     接着，我们需要在service里面完成对dao的调用，具体代码如下所示：

<span style="font-size:18px;">package cn.itcast.shop.user.service; 
import org.springframework.transaction.annotation.transactional; 
import cn.itcast.shop.user.dao.userdao; 
import cn.itcast.shop.user.vo.user; 
/** 
 * 用户模块业务层代码 
 * @author flower 
 * 
 */ 
@transactional 
public class userservice { 
  //注入userdao 
  private userdao userdao; 
  public void setuserdao(userdao userdao){ 
    this.userdao =userdao; 
  } 
  //按用户名查询用户的方法 
  public user findbyusername (string username){ 
    return userdao.findbyusername(username); 
  } 
} 
</span> 

      接着我们需要在useraction中进行调用，具体代码如下所示：

<span style="font-size:18px;">package cn.itcast.shop.user.action; 
import java.io.ioexception; 
import javax.servlet.http.httpservletresponse; 
import org.apache.struts2.servletactioncontext; 
import cn.itcast.shop.user.service.userservice; 
import cn.itcast.shop.user.vo.user; 
import com.opensymphony.xwork2.actionsupport; 
import com.opensymphony.xwork2.modeldriven; 
/** 
 * 用户模块action的类 
 * @author flower 
 * 
 */ 
public class useraction extends actionsupport implements modeldriven<user> { 
  //模型驱动使用的对象 
  private user user = new user(); 
  public user getmodel(){ 
    return user; 
  } 
  //注入userservice 
  private userservice userservice; 
  public void setuserservice(userservice userservice){ 
    this.userservice=userservice; 
  } 
  /** 
   * 跳转到注册页面的执行方法 
   */ 
  public string registpage(){ 
    return "registpage"; 
  } 
  /** 
   * ajax进行异步校验用户名的执行方法 
   * @throws ioexception 
   */ 
  public string findbyname() throws ioexception{ 
    //调用service进行查询 
    user existuser = userservice.findbyusername(user.getusername()); 
    //获得response对象，向页面输出 
    httpservletresponse response = servletactioncontext.getresponse(); 
    response.setcontenttype("text/html;charset=utf-8"); 
    //判断 
    if(existuser != null){ 
      //查询到该用户：用户名已经存在 
      response.getwriter().println("<font color='red'>用户名已经存在</font>"); 
    }else{ 
      //没查询到该用户：用户名可以使用 
      response.getwriter().println("<font color='green'>用户名已经存在</font>"); 
    } 
    return none; 
  } 
  /** 
   * 用戶注册的方法： 
   */ 
  public string regist(){ 
    return none; 
  } 
} 
</span>

       最后，我们来编写映射文件里面的内容，具体代码如下所示：

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?> 
<!doctype hibernate-mapping public  
  "-//hibernate/hibernate mapping dtd 3.0//en" 
  "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd"> 
  <hibernate-mapping> 
    <class name="cn.itcast.shop.user.vo.user" table="user"> 
      <id name="uid"> 
        <generator class="native"/> 
      </id> 
      <property name="username"/> 
      <property name="password"/> 
      <property name="name"/> 
      <property name="email"/> 
      <property name="phone"/> 
      <property name="addr"/> 
      <property name="state"/> 
      <property name="code"/> 
    </class> 
  </hibernate-mapping></span> 

      不要忘记了，要把她陪到applicationcontext里面，具体代码如下所示：

<span style="font-size:18px;"><!-- 配置hibernate的其他的属性 --> 
    <property name="hibernateproperties"> 
      <props> 
        <prop key="hibernate.dialect">org.hibernate.dialect.mysqldialect</prop> 
        <prop key="hibernate.show_sql">true</prop> 
        <prop key="hibernate.format_sql">true</prop> 
        <prop key="hibernate.connection.autocommit">false</prop> 
        <prop key="hibernate.hbm2ddl.auto">update</prop> 
      </props> 
    </property> 
    <!-- 配置hibernate的映射文件 --> 
    <property name="mappingresources"> 
      <list> 
        <value>cn/itcast/shop/user/vo/user.hbm.xml</value> 
      </list> 
    </property> 
</span> 

代码到此结束，下面给大家展示下效果图：  

小编总结：    

实现的思路是这样滴`(*∩_∩*)′，首先是由onblur进行事件触发，第二，编写ajax的代码，向action中提交，传递参数username，第三步，编写action，接收username，实现模型驱动配置到spring中，第四步，编写dao，集成hibernatedaosupport，在配置中注入sessionfactory，最后编写service，注入userdao，还有事务管理，一个简单的demo，还请小伙伴多多指教，ssh网上商城，精彩未完待续~~~