AJAX Unit01： Ajax 、编码问题

最新推荐文章于 2022-10-21 18:05:15 发布

KopWelkin

最新推荐文章于 2022-10-21 18:05:15 发布

阅读量267

点赞数

分类专栏： Java

Java 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

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-jdbc
step2. 在配置文件当中，添加
    SqlSessionFactoryBean
step3. 实体类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>