SSH Online Mall using AJAX to complete the existence of a user name asynchronous checksum _ajax related

When the little buddy is surfing the internet, need to download or watch some video material, or in the time to visit Taobao, we all need to register a user, when we fill out a variety of information, click OK, prompts the user name already exists, small series on the thought, why when we fill out the user name, She automatically prompts that the username already exists, we do not need to waste so many feelings, until the completion of so much information in the prompt, in the small series of the recent project, on the encounter with this problem, we can use Ajax to complete the existence of the user name, today this blog, small series on a simple summary, How to use Ajax to complete the calibration, but also asked the small partners more advice oh ' (*∩_∩*)!

First Ajax to complete the existence of the user name asynchronous checksum, then how do we do? Here, we are triggered by the event, that is, we enter the user name inside the time, the mouse moved away, this event is called onblur, that is, lost focus, and its relative, the mouse on the inside to get focus, we call it onfocus, then lose focus, how do we operate? First find the registration page, in the registration page to find the user name that part of the code, followed by Onblur=checkusername (), verify the user name can, and then we write method Checkusername, the specific code as follows:

<span style= "FONT-SIZE:18PX;" 
    >function Checkusername () {//Get text box value: var username = document.getElementById ("username"). Value; 
    1, create asynchronous Interactive object var xhr = Createxmlhttp (); 
          2, set Listening Xhr.onreadystatechange = function () {if (xhr.readystate = = 4) {if (Xhr.status = = 200) { 
        document.getElementById ("Span1"). InnerHTML = Xhr.responsetext; }}//3, open connection Xhr.open ("Get", "${pagecontext.request.contextpath}/user_findbyname.action?t 
  Ime= "+ New Date (). GetTime () +" &username= ", True)//4, send 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"); 
  The catch (e) {}}} return xmlHttp; } </span>  

      Then, we'll build the entity Vo, implement the model drive, and automate the encapsulation, as shown in the following code:

<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; 
  The 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 () {returnPhone 
  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>

       we want to receive parameters, implement model-driven, Actionsupport directly implement Modeldriven, and then write our Ajax code, To commit to the action, we'll write the code in Useraction, as shown in the following code:

<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; /** * User Module Action class * @author Flower * * */public class Useraction extends Actionsupport implements modeldriven< 
  user> {//model-driven object private User user = new user (); 
  Public user Getmodel () {return user; 
  }//Inject userservice private userservice userservice; 
  public void Setuserservice (UserService userservice) {this.userservice=userservice; 
  /** * Jump to the registration page execution method/public String Registpage () {return "registpage"; 
    /** * Ajax to perform asynchronous validation of user name execution method * @throws IOException */public String Findbyname () throws ioexception{ Call service to query UsEr existuser = userservice.findbyusername (User.getusername ()); 
    Get the Response object, output httpservletresponse response = Servletactioncontext.getresponse () to the page; 
    Response.setcontenttype ("Text/html;charset=utf-8"); To determine if (Existuser!= null) {//query to the User: The username already exists response.getwriter (). println ("<font color= ' Red ' > username has been 
    by existence </font> "); 
    }else{//No query to this user: User name can use Response.getwriter (). println ("<font color= ' green ' > username already exists </font>"); 
  return NONE; 
  /** * User Registration Method: */Public String regist () {return NONE;  }} </span>

Next, all we have to do is configure the service and DAO into ApplicationContext, and the code looks like this:

<span style= "FONT-SIZE:18PX;" ><!--Service configuration ===========================--> 
  <bean id= "UserService" class= " Cn.itcast.shop.user.service.UserService "> 
    <property name=" Userdao "ref=" Userdao "/> 
  </bean >  
  <!--userdao configuration ===========================--> <bean id= "Userdao" 
   Cn.itcast.shop.user.dao.UserDao "> 
    <property name=" sessionfactory "ref=" Sessionfactory "></" Property> 

Once configured, we need to complete the query inside the Userdao, as shown in the following code:

<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; 
/** 
 * User module Persistence layer code 
 * @author Flower 
 * * * 
 /Public 
class Userdao extends Hibernatedaosupport { 
  // Query by rank whether there is this user 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; 
    } 
} 

Next, we need to complete the call to DAO in the service, as shown in the following code:

<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; 
/** 
 * User Module Business layer Code 
 * @author Flower 
 * 
/@Transactional public 
class UserService { 
  // Inject Userdao 
  private Userdao Userdao; 
  public void Setuserdao (Userdao userdao) { 
    This.userdao =userdao; 
  } 
  Methods to query users by user name public 
  user Findbyusername (String username) {return 
    userdao.findbyusername (username); 
  } 
} 

We then need to make a call in Useraction, as shown in the following code:

<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; /** * User Module Action class * @author Flower * * */public class Useraction extends Actionsupport implements modeldriven< 
  user> {//model-driven object private User user = new user (); 
  Public user Getmodel () {return user; 
  }//Inject userservice private userservice userservice; 
  public void Setuserservice (UserService userservice) {this.userservice=userservice; 
  /** * Jump to the registration page execution method/public String Registpage () {return "registpage"; 
    /** * Ajax to perform asynchronous validation of user name execution method * @throws IOException */public String Findbyname () throws ioexception{ Call service to query UsEr existuser = userservice.findbyusername (User.getusername ()); 
    Get the Response object, output httpservletresponse response = Servletactioncontext.getresponse () to the page; 
    Response.setcontenttype ("Text/html;charset=utf-8"); To determine if (Existuser!= null) {//query to the User: The username already exists response.getwriter (). println ("<font color= ' Red ' > username has been 
    by existence </font> "); 
    }else{//No query to this user: User name can use Response.getwriter (). println ("<font color= ' green ' > username already exists </font>"); 
  return NONE; 
  /** * User Registration Method: */Public String regist () {return NONE; }} </span>

Finally, we'll write the contents of the mapping file, as shown in the following code:

<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 "> 
   
 

Don't forget to take her to the ApplicationContext, the specific code looks like this:

<span style= "FONT-SIZE:18PX;" ><!--Configure Hibernate's other properties--> 
    <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> 
    <!--Configure hibernate mapping file--> 
    <property name= " Mappingresources "> 
      <list> 
        <value>cn/itcast/shop/user/vo/User.hbm.xml</value> 
      </list> 
    </property> 

The code ends here, showing you the following effects:

Small Series Summary:

Implementation of the idea is such drops ' (*∩_∩*), first of all by the onblur event trigger, second, write Ajax code, submit to action, pass parameters username, step three, write action, receive username, Implement model-driven configuration into spring, step fourth, write DAO, integrate Hibernatedaosupport, inject sessionfactory in configuration, finally write service, inject Userdao, and transaction management, a simple demo, Also asked the small partners more advice, SSH online mall, wonderful not to be continued ~ ~ ~