使用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完成用户名是否存在异步校验，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！