当前位置： 代码迷 >> 综合 >> 知识梳理：JavaWeb&Servlet&HttpServletRequest&事件绑定解除&事件冒泡捕获&内置对象&Date&Json&DOM&Audio&Audio
  详细解决方案

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

热度：54   发布时间：2024-02-13 16:13:56.0
目录：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 {@Overridepublic void init(ServletConfig servletConfig) throws ServletException {}@Overridepublic ServletConfig getServletConfig() {return null;}@Overridepublic void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {System.out.println("HelloServlet....");}@Overridepublic String getServletInfo() {return null;}@Overridepublic void destroy() {}
}

  2. 实现service的方法

        @Overridepublic 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>//全选实现1function 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(){})
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.