目录：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对象中，通过该对象提供的相关方法可以获取客户端提交过来的数据信息。

获得客户机信息：

获得客户机请求头

获得客户机请求参数

案例

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()时传入的字符串使用实际月份01_{12，转换为Date对象后getMonth()获取的月份值为0}11。

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(){

})