AJAX Unit01: Ajax 、 编码问题

来源:互联网 发布:网游加速器 知乎 编辑:程序博客网 时间:2024/06/05 10:00

1. Spring集成MyBatis (方式二 了解)

(1)集成步骤

step1.导包。spring-webmvc,mybatis,mybatis-spring,dbcp,ojdbc,spring-jdbc,junit。step2.添加spring配置文件。注:不再需要MyBatis的配置文件,可以在spring的配置文件里面添加SqlSessionFactoryBean来代替。step3.实体类step4.映射文件    注:namespace不再要求等于接口名。step5.DAO接口    注:接口方法没有特定要求step6.写一个DAO接口的实现类    注:可以注入SqlSessionTemplate。

这里写图片描述
这里写图片描述

2. 使用Spring集成MyBatis的方式重写AdminDAO

step1. 导包    需要添加 mybatis,mybatis-spring,spring-jdbcstep2. 在配置文件当中,添加    SqlSessionFactoryBeanstep3. 实体类Admin     要注意属性与表的字段名不一样,建议用别名解决step4. 映射文件    AdminMapper.xml        namespace="cn.tedu.netctoss.dao.AdminDAO"    <select id="findByAdminCode"         parameterType="java.lang.String"        resultType="cn.tedu.netctoss.entity.Admin">        SELECT ...    </select>step5. Mapper映射器 (AdminDAO)    不用写了 step6. 配置MapperScannerConfigurer step7. 测试 AdminDAO  

3. ajax (asynchronous javascript and xml 异步的javascript和xml)

(1)ajax是什么?

是一种用来改善用户体验的技术,本质上是利用浏览器提供的一个特殊对象(XMLHttpRequest对象,一般也可以称之为ajax对象)向服务器发送异步请求;服务器返回部分数据,浏览器利用这些数据对当前页面做部分更新;整个过程,页面无刷新,不打断用户的操作。注:    异步请求,指的是,当ajax对象发送请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它操作。

这里写图片描述

(2)如何获得ajax对象?

function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){        //非ie浏览器        xhr = new XMLHttpRequest();    }else{        xhr = new ActiveXObject('MicroSoft.XMLHttp');    }    return xhr;}

(3)ajax对象的几个重要属性

onreadystatechange: 绑订事件处理函数,用来处理readystatechange    事件。    注:当ajax对象的readyState属性值发生了任何的改变,比如    从0变成了1,就会产生readystatechange事件。readyState:有5个值(分别是0,1,2,3,4),用来获取ajax对象与服务    器通信的进展。其中,4表示ajax对象已经获得了服务器返回的所    有的数据。responseText:获得服务器返回的文本数据。responseXML:获得服务器返回的xml数据。status:获得状态码。

(4)编程步骤

step1. 获得ajax对象    比如   var xhr = getXhr();step2. 调用ajax对象的方法,发送请求    方式一 get请求    xhr.open('get','check.do?adminCode=king',true);    xhr.onreadystatechange = f1;    xhr.send(null);    注:        true: 异步 (浏览器不会销毁当前页面,用户仍然可以                对当前页面做其它操作)        false:同步 (浏览器不会销毁当前页面,但是会锁定当前                页面,用户不能够对当前页面做任何操作)。    方式二 post请求step3. 编写服务器端的程序    注:不需要返回完整的页面,只需要返回部分数据。step4. 编写事件处理函数    if(xhr.readyState == 4 &&         xhr.status == 200){        //ajax对象已经获得了服务器返回的所有数据,        //而且服务器处理正确。        var txt = xhr.responseText;        页面更新...    }

示例代码:

这里写图片描述

/ajax01/src/main/java

web
ActionServlet.java

package web;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ActionServlet     extends HttpServlet{    @Override    public void service(            HttpServletRequest request,             HttpServletResponse response)                throws ServletException,                IOException {        System.out.println("service()");        //分析请求路径,依据分析结果调用不同        //的分支来处理。        // 获得请求资源路径          String uri =                 request.getRequestURI();        System.out.println("uri:" + uri);        // 为了方便分析,截取请求资源路        //径的一部分        String action =             uri.substring(uri.lastIndexOf("/"),            uri.lastIndexOf("."));        System.out.println("action:"+action);        response.setContentType(                "text/html;charset=utf-8");        PrintWriter out =                 response.getWriter();        if("/check".equals(action)){            String adminCode =                 request.getParameter(                        "adminCode");            System.out.println("adminCode:"                        + adminCode);            if("king".equals(adminCode)){                out.println("帐号已经存在");            }else{                out.println("可以使用");            }        }    }}

web-app

ajax.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript">function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){        //非ie浏览器        xhr = new XMLHttpRequest();    }else{        xhr = new ActiveXObject(                'MicroSoft.XMLHttp');    }    return xhr;}</script></head><body style="font-size:30px;">    <a href="javascript:alert(getXhr());">    ClickMe</a></body></html>

regist.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><script type="text/javascript"     src="js/ajax.js"></script><script type="text/javascript">    function check(){        //step1. 获得ajax对象        var xhr = getXhr();        //step2. 发送请求        xhr.open('get',                'check.do?adminCode='                        + $F('adminCode'),true);        xhr.onreadystatechange = function(){            //step4. 处理服务器返回的数据            if(xhr.readyState == 4 &&                     xhr.status == 200){                //获得服务器返回的数据                var txt = xhr.responseText;                //更新页面                $('msg').innerHTML = txt;            }        };        xhr.send(null);    }</script></head><body style="font-size:30px;">    <form action="">        帐号:<input id="adminCode" name="adminCode"         onblur="check();"/>        <span id="msg"></span><br/>        密码:<input type="password"             name="pwd"/><br/>        <input type="submit" value="确定"/>       </form></body></html>

js/ajax.js

function $(id){    return document.getElementById(id);}function $F(id){    return $(id).value;}function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){        //非ie浏览器        xhr = new XMLHttpRequest();    }else{        xhr = new ActiveXObject(                'MicroSoft.XMLHttp');    }    return xhr;}

WEB-INF

web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">  <servlet>    <servlet-name>action</servlet-name>    <servlet-class>web.ActionServlet</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>action</servlet-name>    <url-pattern>*.do</url-pattern>  </servlet-mapping></web-app>
原创粉丝点击