SSH网上商城颗粒归仓【一. AjAX异步校验】

背景

最近在项目中用到了ssh框架，并且使用ajax来进行验证用户名是否已经存在，本博客设计到ajax的核心技术和再ssh中验证用户名的一套路线，如有疑问欢迎留言

---

Ajax核心

在使用Ajax的时候发现以前接触过，但是没有通过代码进行实践，Ajax主要是通过核心就是异步实现，不用刷新整个网站只需要刷新网页的一步分就可以，所以大大的减少了用户的响应时间，Ajax 技术主要分为4部分

1. 创建Ajax核心对象XHR

XHR是xmlHttpRequst的简写，XMLHttpRequest用于在后台服务器进行交互数据，它是异步操作，在不更新整个网页的情况下可以进行异步操作
想服务器反思请求，我们使用Open（）和send（）方法，Open为打开连接使用格式
Xmlhttp.open(“GET”,”test1.text”,true)
Xmlhttp.open(method,url,async),请求服务器的类型，文在在服务上的位置，async：true表示同步，false表示异步

---

2.设置监听
onreadystatechange存储函数，每当这个函数中的readyState属性值发生改变的时候就会触这个函数。readyState总共有4中状态“0”表示初始化 “1”服务器连接已经建立2请求已接受 3 请求处理 4 请求完成，且响应已经就绪

---

3打开链接，把我们想发送的数据通过参数的形式传过去

---

4发送，我们使用的是get，所以不传递参数，只能通过地址传递，其实跟angular2中与后台联调的时候是一样的

---

SSH框架实现Ajax异步

1.事件进行触发
2.编写AjAX代码：

1.提交代码
2.传递username
3.判断返回的状态是否正确

3编写Action

1.接受根据驱动模型接收username—-对比asp.net 是如何接受
2.user实体
3.User.hbm.xml

4配置spring中的Hibernate中和struts中的service注入和Dao注入
5编写Service

1.注入UserDao（不用实例化）
2.事物管理

6编写Dao

1.继承HibernateDaoSupport
2. 在配置中注入sessionFactory

---

代码实现

Jsp界面

从代码中我们可以看出有一个onblur事件，他表示当用户离开输入框的时候，突发该事件，当触发事件的时候我们走checkUsername()函数，这一段代码实现的就是ajax异步，而且里面的知识点我们在上面已经讲过，所以超级简单哦

<th><span class="requiredField">*span>用户名:th>
<td><input type="text" id="username" name="username"class="text" maxlength="20"                       onblur="checkUsername()" /> 

---

    function checkUsername() {
        //获得文本框中的值
        var username = document.getElementById("username").value;
        //1.创建异步交互对象
        var xhr = createXmlHttp();
        //2.设置监听,每当onreadystatechange中的readyStat属性改变则调用该函数
        xhr.onreadystatechange = function() {
        //4表示请求已经完成，并且响应就绪
            if (xhr.readyState == 4) {
                //如果状态为200代表成
                if (xhr.status == 200) {
                    //然后返回的结果通过innerhtml加载到页面上 ，这里的返回是从servive中调用的response而返回的   
                    document.getElementById("span1").innerHTML = xhr.responseText;
                }
            }
        }
        //3.打开连接,请求方式，请求路径，请求异步
        xhr.open("GET", "${pageContext.request.contextPath}/user_findByName.action?time=" + new Date().getTime() + "&username=" + username, true);
        //4.发送  ,null的原因是因为我们使用的是GET      
        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;
    }

---

applicationContext.xml，spring

进行service注入和Dao注入，注入的好处就是不用我们Service和dao在代码进行实例化了，直接让spring注入帮助我们实现，效率提高了，Dao层注入的是sessionFactory，是初始化hibernate进行与你的数据库进行映射的

    
    <bean id="userAction" class="cn.itcast.shop.user.action.UserAction"
        scope="prototype">
        
        <property name="userService" ref="userService" />
    bean>

---

    <bean id="userService" class="cn.itcast.shop.user.service.UserService">
        <property name="userDao" ref="userDao" />
    bean>

    
    <bean id="userDao" class="cn.itcast.shop.user.dao.UserDao">
        <property name="sessionFactory" ref="sessionFactory" />
    bean>

---

实体层+映射

hbm.xml的映射上面一部分是具体的实体与表，进行关联，下面是在spring中运用了hibernate来进行查找映射的文件

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

---

        <property name="mappingResources">
            <list>
                <value>cn/itcast/shop/user/vo/User.hbm.xmlvalue>
                <value>cn/itcast/shop/category/vo/Category.hbm.xmlvalue>
                <value>cn/itcast/shop/product/vo/Product.hbm.xmlvalue>
                <value>cn/itcast/shop/categorysecond/vo/CategorySecond.hbm.xmlvalue>
                <value>cn/itcast/shop/order/vo/Order.hbm.xmlvalue>
                <value>cn/itcast/shop/order/vo/OrderItem.hbm.xmlvalue>
                <value>cn/itcast/shop/adminuser/vo/AdminUser.hbm.xmlvalue>
            list>
        property>

---

Action

public String findByName() throws IOException {
        // 调用service进行查询
        // user.getUsername()表示得到user的值，所以返回的是一个user对象
        User existUser = userService.findByUsername(user.getUsername());

        // 获得response对象，向页面输出，在jsp有对应的response进行接收
        HttpServletResponse response = ServletActionContext.getResponse();
        // 因为有中文字所以我们要使用UTF-8的形式，字符集编码
        response.setContentType("text/html;charset=UTF-8");
         //判断数据库是否有此用户
        if (existUser != null) {
            //如果没有则向页面输出存在
            response.getWriter().println("用户名已经存在");
        } else {
            //如果没有则向页面输出可以使用
            response.getWriter().println("用户名可以使用");
        }
        //NONE表示不需要调整
        return NONE;
    }

Service

 */
//主要是对事物进行管理
@Transactional
  //按用户名查询用户的方法
  public User findByUsername(String username){
      return userDao.findByUsername(username);
  }

---

Dao层

// 按名次查询是否有该用户:
    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;
    }

---

总结

体悟到了知识就是需要不断的学习和复习，温故而知新就是这个道理