使用AJAX完成用户名是否存在异步校验

使用ajax完成用户名是否存在异步校验:

1.事件触发:

* onblur

2.编写ajax代码:

* 项action中提交:传递username参数

3.编写action

* 接收username:模型驱动接收.

4.* 编写实体类

* user

* user.hbm.xml

* 配置到spring中.

5.编写dao

* 继承hibernatedaosupport

* 在配置中注入sessionfactory

6.编写service:

* 注入userdao

* 事务管理:

核心代码实现：

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="+username,true); 
    // 4.发送 
    xhr.send(null); 
  } 
  function createxmlhttp(){ 
      var xmlhttp; 
      try{ // firefox, opera 8.0+, safari 
        xmlhttp=new xmlhttprequest(); 
      } 
      catch (e){ 
        try{// internet explorer 
           xmlhttp=new activexobject("msxml2.xmlhttp"); 
         } 
        catch (e){ 
         try{ 
           xmlhttp=new activexobject("microsoft.xmlhttp"); 
         } 
         catch (e){} 
         } 
      } 
      return xmlhttp; 
     } 

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; 
  } 

private userdao userdao; 
  public void setuserdao(userdao userdao) { 
    this.userdao = userdao; 
  } 
  // 按用户名查询用户的方法: 
  public user findbyusername(string username){ 
    return userdao.findbyusername(username); 
  } 

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; 
  } 

<?xml version="1.0" encoding="utf-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
  xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" 
  xmlns:context="http://www.springframework.org/schema/context" 
  xmlns:aop="http://www.springframework.org/schema/aop" 
  xmlns:tx="http://www.springframework.org/schema/tx" 
  xsi:schemalocation="http://www.springframework.org/schema/beans  
  http://www.springframework.org/schema/beans/spring-beans.xsd 
  http://www.springframework.org/schema/context 
  http://www.springframework.org/schema/context/spring-context.xsd 
  http://www.springframework.org/schema/aop 
  http://www.springframework.org/schema/aop/spring-aop.xsd 
  http://www.springframework.org/schema/tx  
  http://www.springframework.org/schema/tx/spring-tx.xsd"> 
  <!-- 配置连接池: --> 
  <!-- 引入外部属性文件 --> 
  <context:property-placeholder location="classpath:jdbc.properties"/> 
  <!-- 配置c3p0连接池: --> 
  <bean id="datasource" class="com.mchange.v2.c3p0.combopooleddatasource"> 
    <property name="driverclass" value="${jdbc.driver}"/> 
    <property name="jdbcurl" value="${jdbc.url}"/> 
    <property name="user" value="${jdbc.user}"/> 
    <property name="password" value="${jdbc.password}"/> 
  </bean> 
  <!-- hibernate的相关信息 --> 
  <bean id="sessionfactory" class="org.springframework.orm.hibernate3.localsessionfactorybean"> 
    <!-- 注入连接池 --> 
    <property name="datasource" ref="datasource"/> 
    <!-- 配置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> 
  </bean> 
  <!-- 事务管理: --> 
  <!-- 事务管理器 --> 
  <bean id="transactionmanager" class="org.springframework.orm.hibernate3.hibernatetransactionmanager"> 
    <property name="sessionfactory" ref="sessionfactory"/> 
  </bean> 
  <!-- 开启注解事务 --> 
  <tx:annotation-driven transaction-manager="transactionmanager"/> 
  <!-- action的配置 ===========================--> 
  <!-- 首页访问的action --> 
  <bean id="indexaction" class="cn.itcast.shop.index.action.indexaction" scope="prototype"> 
  </bean> 
  <!-- 配置验证码action --> 
  <bean id="checkimgaction" class="cn.itcast.shop.user.action.checkimgaction" scope="prototype"> 
  </bean> 
  <!-- 用户模块的action --> 
  <bean id="useraction" class="cn.itcast.shop.user.action.useraction" scope="prototype"> 
    <!-- 注入service --> 
    <property name="userservice" ref="userservice"/> 
  </bean> 
  <!-- service的配置 ===========================--> 
  <bean id="userservice" class="cn.itcast.shop.user.service.userservice"> 
    <property name="userdao" ref="userdao"/> 
  </bean> 
  <!-- dao的配置 ===========================--> 
  <bean id="userdao" class="cn.itcast.shop.user.dao.userdao"> 
    <property name="sessionfactory" ref="sessionfactory"/> 
  </bean> 
</beans> 
[html] view plain copy 在code上查看代码片派生到我的代码片
<?xml version="1.0" encoding="utf-8" ?> 
<!doctype struts public 
  "-//apache software foundation//dtd struts configuration 2.3//en" 
  "http://struts.apache.org/dtds/struts-2.3.dtd"> 
<struts> 
  <constant name="struts.devmode" value="false" /> 
  <constant name="struts.enable.dynamicmethodinvocation" value="true"/> 
  <package name="shop" extends="struts-default" namespace="/"> 
    <global-results> 
      <result name="msg">/web-inf/jsp/msg.jsp</result> 
    </global-results> 
    <!-- 配置首页访问的action --> 
    <action name="index" class="indexaction"> 
      <result name="index">/web-inf/jsp/index.jsp</result> 
    </action> 
    <!-- 配置用户模块的action --> 
    <action name="user_*" class="useraction" method="{1}"> 
      <result name="registpage">/web-inf/jsp/regist.jsp</result> 
      <result name="input">/web-inf/jsp/regist.jsp</result> 
      <result name="loginpage">/web-inf/jsp/login.jsp</result> 
      <result name="login">/web-inf/jsp/login.jsp</result> 
      <result name="loginsuccess" type="redirectaction">index</result> 
      <result name="quit" type="redirectaction">index</result> 
      <result name="checkcodefail">/web-inf/jsp/regist.jsp</result> 
    </action> 
    <!-- 验证码action --> 
    <action name="checkimg" class="checkimgaction"></action> 
  </package> 
</struts> 

以上所述是小编给大家介绍的使用ajax完成用户名是否存在异步校验，希望对大家有所帮助