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

2017-12-26 19:07:49来源:CSDN作者:dtttyc人点击

分享

背景

最近在项目中用到了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进行与你的数据库进行映射的

    <!-- 用户模块的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>

实体层+映射

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

<hibernate-mapping> <!-- 表示来自哪一个实体,与那个表进行映射 -->    <class name="cn.itcast.shop.user.vo.User" table="user">   <!--id主键,用native-->     <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>    

<!-- 配置Hibernate的映射文件 -->        <property name="mappingResources">            <list>                <value>cn/itcast/shop/user/vo/User.hbm.xml</value>                <value>cn/itcast/shop/category/vo/Category.hbm.xml</value>                <value>cn/itcast/shop/product/vo/Product.hbm.xml</value>                <value>cn/itcast/shop/categorysecond/vo/CategorySecond.hbm.xml</value>                <value>cn/itcast/shop/order/vo/Order.hbm.xml</value>                <value>cn/itcast/shop/order/vo/OrderItem.hbm.xml</value>                <value>cn/itcast/shop/adminuser/vo/AdminUser.hbm.xml</value>            </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("<font color='red'>用户名已经存在</font>");        } else {            //如果没有则向页面输出可以使用            response.getWriter().println("<font color='green'>用户名可以使用</font>");        }        //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;    }

总结

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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台