知识梳理:JavaWeb&Servlet&HttpServletRequest&事件绑定解除&事件冒泡捕获&内置对象&Date&Json&DOM&Audio&Audio

时间:2020-8-23 作者:admin


目录:JavaWeb&Servlet&HttpServletRequest&事件绑定解除&事件冒泡捕获&内置对象&Date&Json&DOM&Audio&Audio

Servlet入门

Servlet 概述

Servlet(Server+Applet),服务端小程序;是一项运行在服务器端的java程序,可以接受来自客户端的http请求,并且对请求的信息作出相应。Servlet是一项接口技术,任何时候创建一个Servlet应用都必须从Servlet接口实现,实际上就是一个java类

创建一个Servlet包含三个基本步骤:

  1. 创建一个类从Servlet实现(继承HttpServlet)

    public class HelloServlet implements Servlet {
    
        @Override
        public void init(ServletConfig servletConfig) throws ServletException {}
    
        @Override
        public ServletConfig getServletConfig() {return null;}
    
        @Override
        public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
            System.out.println("HelloServlet....");
        }
    
        @Override
        public String getServletInfo() {return null;}
    
        @Override
        public void destroy() {}
    }
    
    
  2. 实现service的方法

        @Override
        public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
            //实现具体的操作
        }
    
  3. 配置Servlet(基于xml/基于注解)

    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>com.softeem.servlets.HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
    

    serlvet:

    配置servlet名称以及类路径

    servlet-mapping:

    servlet映射配置,配置servlet名称以及虚拟的访问路径

Servlet创建方式对比

  1. 实现javax.servlet.Servlet接口
  2. 继承javax.servlet.GenericServlet类
  3. 继承javax.servlet.HttpServlet类(推荐)

关于405错误状态码:

客户端请求服务端的method与服务端servlet接收处理的方法不一致,比如:

客户端发送的get请求,服务端使用doPost处理

Servlet执行原理

  1. 当web容器启动时,首先对web.xml初始化检查配置是否正确,比如url-pattern
  2. 客户端浏览器发起对servlet请求,通过请求的资源路径寻找对应的url-pattern
  3. 通过url-pattern对应的servlet-name寻找到servlet标签中的servlet-name
  4. 根据servlet-name所在标签找到servlet-class并且执行对应类中的service方法

获取客户端提交数据

HttpServletRequest

HttpServletRequest对象表示客户端请求,当客户端通过Http协议请求到Servlet时,所有的请求数据都会封装到HttpServletRequest对象中,通过该对象提供的相关方法可以获取客户端提交过来的数据信息。

获得客户机信息:

方法 解释
getRequestURL() 返回客户端发出请求时的完整URL。
getRequestURI() 返回请求行中的参数部分。
getQueryString () 方法返回请求行中的参数部分(参数名+值)
getRemoteHost() 返回发出请求的客户机的完整主机名。
getRemoteAddr() 返回发出请求的客户机的IP地址。
getPathInfo() 返回请求URL中的额外路径信息。额外路径信息是请求URL中的位于Servlet的路径之后和查询参数之前的内容,它以”/”开头。
getRemotePort() 返回客户机所使用的网络端口号。
getLocalAddr() 返回WEB服务器的IP地址。
getLocalName() 返回WEB服务器的主机名。

获得客户机请求头

方法 解释
getHeader(string name) 以 String 的形式返回指定请求头的值。如果该请求不包含指定名称的头,则此方法返回 null。如果有多个具有相同名称的头,则此方法返回请求中的第一个头。头名称是不区分大小写的。可以将此方法与任何请求头一起使用
getHeaders(String name) 以 String 对象的 Enumeration 的形式返回指定请求头的所有值
getHeaderNames() 返回此请求包含的所有头名称的枚举。如果该请求没有头,则此方法返回一个空枚举

获得客户机请求参数

方法 解释
getParameter(String name) 根据name获取请求参数(常用)
getParameterValues(String name) 根据name获取请求参数列表(常用)
getParameterMap() 返回的是一个Map类型的值,该返回值记录着前端(如jsp页面)所提交请求中的请求参数和请求参数值的映射关系。(编写框架时常用)
getParameterNames() 获取所有请求参数的name名称

案例

  1. 表单结构

    <form action="msg">
        用户名: <input type="text" name="name"><br>
        
        密码:<input type="password" name="pwd"><br>
        
        年龄:<input type="number" name="age"><br>
        
        <!--对于单选按钮,如果未指定value时,后台获取到的是on;如果未进行选择则获取null-->
        性别:<input type="radio" name="sex" id="sex_male" checked value=""><label for="sex_male"></label>
        <input type="radio" name="sex" id="sex_famale" value=""> <label for="sex_famale"></label> <br>
        
        兴趣爱好: <input type="checkbox" name="hobby" value="java">java
        <input type="checkbox" name="hobby" value="game">打游戏
        <input type="checkbox" name="hobby" value="doudou">打豆豆
        <input type="checkbox" name="hobby" value="sleep">睡觉 <br>
        
        所在城市:<select name="city">
        <option value="武汉">武汉</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        </select><br>
        
        个性签名: <textarea name="mark"  cols="50" rows="5"></textarea><br>
        
        出生日期: <input type="date" name="birth"><br>
    
        <button type="submit">注册</button>
    </form>
    
  2. servlet中doGet方法实现

    //设置请求编码(解决提交数据时的乱码问题)
    request.setCharacterEncoding("utf-8");
    //获取请求参数中指定参数名的参数值(参数即为表单控件的name属性)
    String name = request.getParameter("name");
    String pwd = request.getParameter("pwd");
    String age = request.getParameter("age");
    String sex = request.getParameter("sex");
    
    //        String hobby = request.getParameter("hobby");
    //获取多个参数名一致的参数值,并以数组的形式返回(复选框)
    String[] hobbies = request.getParameterValues("hobby");
    
    String city = request.getParameter("city");
    String mark = request.getParameter("mark");
    String birth = request.getParameter("birth");
    
    System.out.println(name);
    System.out.println(pwd);
    System.out.println(age);
    System.out.println(sex);
    
    for(String h:hobbies){
        System.out.println(h);
    }
    
    System.out.println(city);
    System.out.println(mark);
    System.out.println(birth);
    System.out.println("====================================");
    //获取请求中所有提交数据
    Map<String, String[]> parameterMap = request.getParameterMap();
    parameterMap.forEach((k,v)->{
        for(String s:v){
            System.out.println(k+"---->"+s);
        }
    });
    

事件绑定

javascript为元素绑定事件分为两种方式:

  1. 直接在html中为元素设置相关的事件属性

  2. 在javascript中通过dom对象获取目标元素之后为其设置事件属性

    //绑定指定名称的函数
    div.onclick=fun;
    function fun(){
        //执行体
    }
    
    //绑定匿名函数
    div.onclick=function(){
     	//执行体   
    }
    
  3. 在js中获取dom之后使用addEventListener函数绑定指定事件

    div.addEventListener('click',fun)
    function fun(){
        //执行体
    }
    
    div.addEventListener('click',function(){
        //执行体
    })
    

解除绑定

对于使用addEventListener绑定的事件,可以通过removeEventLitener解除

 div.removeEventListener('click',fun);

对于解除绑定,只能解除指定元素中被绑定的回调函数对象(函数指针必须是一致的),对一下方式无法解绑:

div.removeEventListener('click',function(){
    
})

事件冒泡与事件捕获

javascript中的事件流具备传播的能力,当为多个嵌套关系的元素绑定事件时,会导致在触发某一层元素事件时会导致其他元素的事件同时执行;js将这个事件传播特性分为两种方式:

  • 事件冒泡

    事件冒泡,即对内层元素触发事件时,逐级向外传播,导致外层事件逐步执行

  • 事件捕获

事件捕获即由外向内逐层捕获,需要将事件冒泡机制切换为事件捕获,只需要在为元素通过addEventListener绑定事件时传入第三参数即可

阻止事件传播

由于事件流的传播性,实际开发中这些特性会影响程序的事件处理,因此需要对事件传播进行阻止,如果需要阻止事件的传播,只需要在指定元素的触发时调用事件对象提供的stopPropergation()函数或者设置cancelBubble为true即可:

document.getElementById('box2').addEventListener('click',function(e){
    console.log('中间盒子')
    e.cancelBubble = true;
})

内置对象

Date

在JavaScript中,Date对象用来表示日期和时间。

要获取系统当前时间,用:

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份,注意月份范围是0~11,5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳

注意,当前时间是浏览器从本机操作系统获取的时间,所以不一定准确,因为用户可以把当前时间设定为任何值。

如果要创建一个指定日期和时间的Date对象,可以用:

var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

JavaScript的Date对象月份值从0开始,牢记0=1月,1=2月,2=3月,……,11=12月。

第二种创建一个指定日期和时间的方法是解析一个符合ISO 8601格式的字符串:

var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875

但它返回的不是Date对象,而是一个时间戳。不过有时间戳就可以很容易地把它转换为一个Date

var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getMonth(); // 5

使用Date.parse()时传入的字符串使用实际月份0112,转换为Date对象后getMonth()获取的月份值为011。

JSON对象

//json对象
var user = {
    id:101,
    name:'softeem',
    age:18,
    langs:['java','c++','python','javascript']
}

//json字符串
var user2 = "{\"id\":101,\"name\":\"softeem\",\"age\":18,\"langs\":[\"java\",\"javascript\"]}";
console.log(user);
console.log(user2);

//json字符串(来自后台)转换为json对象(javascript)
user2 = JSON.parse(user2);
console.log(user2);

//json对象序列化为json字符串
user = JSON.stringify(user);
console.log(user);

DOM

常见DOM操作

//根据元素的id获取元素(返回唯一结果)
var img = document.getElementById('img1');
//根据css选择器获取单个元素
var box = document.querySelector('.box>div>p');

//根据css选择器获取所有符合条件的元素
var inputs = document.querySelectorAll('.txt');
//根据class名称获取所有元素
var txt = document.getElementsByClassName('txt');

//根据标签名获取所有的元素
var div = document.getElementsByTagName('div');
//根据元素的name属性获取所有元素
var favs = document.getElementsByName('fav');

常见DOM操作

//根据元素的id获取元素(返回唯一结果)
var img = document.getElementById('img1');
//根据css选择器获取单个元素
var box = document.querySelector('.box>div>p');

//根据css选择器获取所有符合条件的元素
var inputs = document.querySelectorAll('.txt');
//根据class名称获取所有元素
var txt = document.getElementsByClassName('txt');

//根据标签名获取所有的元素
var div = document.getElementsByTagName('div');
//根据元素的name属性获取所有元素
var favs = document.getElementsByName('fav');

表单操作

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="checkbox" name="fav" value="java">学java
        <input type="checkbox" name="fav" value="js">学javascript
        <input type="checkbox" name="fav" value="mysql">学数据库
        <input type="checkbox" name="fav" value="jdbc">学jdbc <br>
        <input type="checkbox" 
               name="" 
               id="selectAll" 
               onclick="selectAll(this.checked)">全选1
        
        <input type="checkbox" name="" id="selectAll2">全选2
        
        <script>
            //全选实现1
            function selectAll(isSelected){
                var cks = document.getElementsByName('fav');
                for(var i = 0;i<cks.length;i++){
                    cks[i].checked = isSelected;
                }
            }

          //全选实现2  document.getElementById('selectAll2').addEventListener('click',function(){
                var cks = document.getElementsByName('fav');
                for(var i = 0;i<cks.length;i++){
                    cks[i].checked = this.checked;
                }
            })

        </script>
    </body>
</html>

Audio

//创建音频元素
var player = document.createElement('audio');
//设置属性
player.src = 'music/taotai.mp3';

document.getElementById('btnPlay').onclick=function(){
    //播放
    player.play();
}
document.getElementById('btnPause').onclick=function(){
    //暂停播放
    player.pause();

}
//为播放器绑定当前播放时间改变事件,一旦currentTime值产生变化就执行以下函数
player.addEventListener('timeupdate',function(){
//获取当前播放进度(秒)
var now = player.currentTime;
//获取歌曲的总播放时长(秒)
var total = player.duration;
var w = now / total * 100 + '%';
    //调用dom元素的css属性
    document.querySelector('.progress').style.width = w;
})

//当歌曲播放完成之后执行
player.addEventListener('ended',function(){

})
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。