一、Filter

1.1 过滤器

过滤器：JavaEE的一种技术，主要是实现对请求和响应的过滤处理，处理的结果要么放行，要么拦截返回结果
运行在Tomcat上

1.2 为什么使用过滤器

在日常开发中，我们经常需要对请求进行过滤，比如校验时候包含某个参数，实现登陆校验、参数的校验、统一结果等等的操作
1.项目中可以有多个过滤器
2.需要注册（1.基于注解 @WebFilter 2.基于xml ）
3.实现Filter接口，重写doFilter方法

1.3 Filter的使用

实现步骤：
1.创建类
2.实现接口Filter
3.重写方法
重点：doFilter
默认是拦截

4.注册过滤器
完整代码：

  1. @WebFilter("/*") //注册 生效
  2. public class HelloFilter implements Filter {
  3.     //初始化
  4.     @Override
  5.     public void init(FilterConfig filterConfig) throws ServletException {
  6.         System.err.println("初始化……");
  7.     }
  8.     //核心方法-实现过滤的方法
  9.     @Override
  10.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  11.         HttpServletRequest request= (HttpServletRequest) servletRequest;
  12.         System.err.println("前：过滤……"+request.getRequestURI());
  13.         System.err.println("传递的参数："+request.getParameter("name"));
  14.         //放行
  15.         filterChain.doFilter(servletRequest,servletResponse);
  16.         System.err.println("后：过滤");
  17.     }
  18.     //销毁
  19.     @Override
  20.     public void destroy() {
  21.         System.err.println("销毁……");
  22.     }
  23. }

过滤器的两种注册方式：
1.注解
@WebFilter(“/过滤的路径”) 一般都是/*
2.xml
在web.xml文件中

  1.   <filter>
  2.     <filter-name>Hello</filter-name>
  3.     <filter-class>com.qfedu.web.filter.HelloFilter</filter-class>
  4.   </filter>
  5.   <filter-mapping>
  6.     <filter-name>Hello</filter-name>
  7.     <url-pattern>/*</url-pattern>
  8.   </filter-mapping>

1.4 基于Filter实现参数校验

需求：对应当前传递的参数进行非空校验，通过就放行，不通过就拦截请求，并返回结果
参考代码：

  1. @WebFilter("/*")
  2. public class ParamFilter implements Filter {
  3.     @Override
  4.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  5.         //获取请求的参数
  6.         HttpServletRequest request= (HttpServletRequest) servletRequest;
  7.         Map<String, String[]> map= request.getParameterMap();
  8.         boolean r=true;
  9.         //遍历所有的参数
  10.         lb:for(String k:map.keySet()){
  11.             //遍历参数的所有的值
  12.             for(String v:map.get(k)){
  13.                 if(v==null || v.length()==0){
  14.                    r=false;
  15.                    break lb;
  16.                 }
  17.             }
  18.         }
  19.         if(r){
  20.             //放行
  21.             filterChain.doFilter(servletRequest, servletResponse);
  22.         }else{
  23.             //拦截
  24.             //返回验证信息
  25.             HttpServletResponse response=(HttpServletResponse)servletResponse;
  26.             response.setContentType("text/html;charset=UTF-8");
  27.             response.getWriter().print("亲,传递的参数值非法！");
  28.         }
  29.     }
  30. }

思考题：如何实现登陆的范围过滤校验？
有些接口需要登陆才可以访问，如果不登陆，就必须跳转到登陆页面

二分查找算法：
折半查找：数组先排序，每次取中间值进行比较，如果要查找的内容大于中间值，应该右边再次进行折半查找，依次类推。如果小于应该在左边进行折半查询

  1. /**
  2.      *
  3.      *二分查找算法
  4.      * @param arr 数组升序排列*/
  5.     public static int check(int[] arr,int num){
  6.         int index=-1,start=0,end=arr.length;
  7.         while (start<end){
  8.             //每次去中间值
  9.             int mid=(end+start)/2;
  10.             if(num>arr[mid]){
  11.                 //右边
  12.                 start=mid+1;
  13.             }else if(num<arr[mid]){
  14.                 //左边
  15.                 end=mid-1;
  16.             }else if (num==arr[mid]){
  17.                 index=mid;
  18.                 break;
  19.             }
  20.         }
  21.         return index;
  22.     }

二、Listener

2.1 监听器

监听器：JavaEE给出一种用来监听ServletContext、HttpSession、HttpServletRequest的变化的一种技术
监听器分为三类：
1.监听ServletContext(application)
1.初始化和销毁:ServletContextListener
2.域中的数据变化:ServletContextAttributeListener
2.监听HttpSession(session)
1.初始化和销毁 HttpSessionListener
2.域中的数据变化
3.钝化和活化
3.监听HttpServletRequest(request)
1.初始化和销毁
2.域中的数据变化

2.2 为什么使用监听器

开发中，需要知道某些内容（ServletContext、HttpSession、HttpServletRequest）的变化，就需要使用监听器获取变化
比如Spring框架的底层就是一个全局监听器（ServletContext初始化和销毁）

2.3 监听器的使用

使用步骤：
1.创建类
2.实现接口ServletContextListener
监听ServletContext的初始化和销毁
3.重写初始化和销毁的方法
4.注册
示例代码：

  1. @WebListener
  2. public class MyServletContext implements ServletContextListener,ServletContextAttributeListener {
  3. //    初始化
  4.     @Override
  5.     public void contextInitialized(ServletContextEvent sce) {
  6.         System.err.println("系统启动运行中……");
  7.     }
  8. //  销毁
  9.     @Override
  10.     public void contextDestroyed(ServletContextEvent sce) {
  11.         System.err.println("系统已停止……");
  12.     }
  14.     @Override
  15.     public void attributeAdded(ServletContextAttributeEvent scae) {
  16.         //往ServletContext中添加了内容
  17.         System.err.println("添加了内容："+scae.getName()+"---->"+scae.getValue());
  18.     }
  19. }

Listener的注册有2种：
1.注解
@WebListener
2.xml

com.qfedu.web.listener.MyServletContext

2.4 基于监听器实现在线用户

一个HttpSession的创建就是一个用户，如果HttpSession销毁了用户就退出了
我们使用HashSet存储在线用户的HttpSession的id（唯一）
实现步骤：
1.监听ServletContext 完成在线用户容器的初始化
核心代码：

  1. @WebListener
  2. public class ApplicationListener implements ServletContextListener {
  3.     @Override
  4.     public void contextInitialized(ServletContextEvent sce) {
  5.         //完成初始化
  6.         sce.getServletContext().setAttribute("users",new HashSet<>());
  7.     }
  8. }

2.监听HttpSession的创建和销毁
核心代码：

  1. @WebListener
  2. public class HttpSessionCreateListener implements HttpSessionListener {
  3.     @Override
  4.     public void sessionCreated(HttpSessionEvent se) {
  5.         //新建会话  添加
  6.         //获取当前的在线用户的id
  7.         HashSet<String> set= (HashSet<String>) se.getSession().getServletContext().getAttribute("users");
  8.         //将当前的用户添加
  9.         set.add(se.getSession().getId());
  10.         //重新赋值
  11.         se.getSession().getServletContext().setAttribute("users",set);
  12.     }
  14.     @Override
  15.     public void sessionDestroyed(HttpSessionEvent se) {
  16.         //销毁会话  移除
  17.         HashSet<String> set= (HashSet<String>) se.getSession().getServletContext().getAttribute("users");
  18.         //将当前的用户添加
  19.         set.remove(se.getSession().getId());
  20.         System.err.println("退出："+se.getSession().getId());
  21.         //重新赋值
  22.         se.getSession().getServletContext().setAttribute("users",set);
  23.     }
  24. }

思考题：Listener和Filter和Servlet 区别？启动的顺序？

三、jQuery

3.1 jQuery是什么

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery:就是对Js进行的封装，目的是为了简化js的操作

回顾：
js:Java Script:浏览器脚本交互语言
1.基本语法
1.数据类型
原始类型：基本类型 数字、浮点数、布尔
引用类型：数组、对象、Number、Date
2.运算符
算术、逻辑、赋值、比较
3.分支
if
4.循环
for
2.函数
实现特定功能的代码块
语法格式：
function 函数名(参数名,……){
实现特定功能的代码
return 返回值;
}
3.Dom操作
基于js操作html的标签
document.getElementById(“”)
实现对标签的css样式改变、事件、内容等操作
4.Bom操作
基于js实现浏览器默认提供的各种对象的操作
window 、location、cookie 、setInterval
https://www.runoob.com/js/js-tutorial.html

3.2 jQuery的特点

可以更方便的操作dom对象信息，扩展性，兼容性
封装了很多原始的操作，让我们操作html标签变得越来越简单

3.3 jQuery使用

实现步骤：
1.html页面中引入js库
2.操作html标签
语法格式：
$(“选择器”).行为(函数|其他)
选择器：
1.id选择器 #
2.class选择器 .
3.标签选择器

行为：
1.标签的事件
image.png
事件的值是个函数
2.标签的样式
css
获取CSS 属性的值:$(“选择器”).css(“样式名称”)
设置CSS属性的值：$(“选择器”).css(“样式名称”,”值”)
3.操作标签的内容
获取或设置（传递要设置的内容）内容：
text()——innerText 获取标签的内容，过滤html元素
html()——innerHtml 获取标签的内容，包含html元素
val()———form表单的标签的value属性
append()——追加内容

3.4 jQuery核心

掌握行为的三种类型：1.事件 2.样式 3.内容

思考题：完成一个全选/全不选的案例

  1. <!-- 全选、全不选 -->
  2.         <div>
  3.             <h1>你喜欢的明星：</h1>
  4.             <div><input type="checkbox" id="ckall">全选\全不选</div>
  5.             <div>
  6.                 <input type="checkbox" class="ckchild" name="likes" />肖战
  7.                 <input type="checkbox" class="ckchild"  name="likes" />易烊千玺
  8.                 <input type="checkbox" class="ckchild"  name="likes" />嘎子
  9.                 <input type="checkbox" class="ckchild"  name="likes" />潘叔
  10.                 <input type="checkbox" class="ckchild"  name="likes" />赵丽颖
  11.                 <input type="checkbox" class="ckchild"  name="likes" />栋哥
  12.             </div>
  13.         </div>
  1. //全选、全不选
  2.         $("#ckall").click(function(){
  3.             //验证当前的复选框的状态
  4.             console.log(this.checked);
  5.             //为子选项设置相同的结果
  6.             //prop 遍历元素
  7.             $(".ckchild").prop("checked",this.checked);
  8.         })
  9.         //监听 子选项
  10.         $(".ckchild").click(function(){
  11.             if(this.checked){
  12.                 var cks=$(".ckchild");
  13.                 for(i in cks){
  14.                     if(i<=cks.length-1){
  15.                         if(!cks[i].checked){
  16.                             return;
  17.                         }
  18.                     }
  19.                 }
  20.                 //选中  都选中 需要将全选按钮 变得选中 判断所有复选框的状态
  21.                 $("#ckall")[0].checked=true;
  22.             }else{
  23.                 //未选中
  24.                 if($("#ckall")[0].checked){
  25.                     $("#ckall")[0].checked=false;
  26.                 }
  27.             }
  28.         })

四、Ajax

4.1Ajax是什么

AJAX（Asynchronous JavaScript and XML）)是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
就是网页中请求后端接口的一种技术，可以请求的时候传递数据，并获取服务器接口的返回数据

4.2 Ajax的作用

实现网页中局部加载数据，可以请求后端接口地址
接口：返回值

4.3 Ajax的使用

基于jQuery实现Ajax的使用
1.后端接口
https://v1.jinrishici.com/all.json
2.前端代码
结合接口的请求方式进行代码的编写

  1. <div>
  2.             <h1><button id="btn1">每日诗词</button></h1>
  3.         </div>
  4.         <div>
  5.             <h2 id="dvtitle"></h2>
  6.         </div>
  7.         <script>
  8.             $("#btn1").click(function(){
  9.                 /**
  10.                  * 发起get请求，参数说明：1.请求的路径  2.回调函数  接收接口的返回值*/
  11.                 $.get("https://v1.jinrishici.com/all.json",function(res){
  12.                     console.log(res);
  13.                     $("#dvtitle").html(res.content);
  14.                 })
  15.             });
  16.         </script>

4.4 jQuery中的Ajax的封装

1.get请求
$.get(接口地址,回调函数(变量名){

})
2.post请求
$.post(接口地址,键值对对象,回调函数(变量名){

})
3.ajax请求
$.ajax({
url:”接口地址”,
data:”请求的参数”,
method:请求方式,
success:function(变量名){

}
})

名称 值/描述
async 布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache 布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status) 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。

| | contentType | 发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。 | | context | 为所有 AJAX 相关的回调函数规定 “this” 值。 | | data | 规定要发送到服务器的数据。 | | dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 | | dataType | 预期的服务器响应的数据类型。 | | error(xhr,status,error) | 如果请求失败要运行的函数。 | | global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。

| | ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 | | jsonp | 在一个 jsonp 中重写回调函数的字符串。 | | jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 | | password | 规定在 HTTP 访问认证请求中使用的密码。 | | processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 | | scriptCharset | 规定请求的字符集。 | | success(result,status,xhr) | 当请求成功时运行的函数。 | | timeout | 设置本地的请求超时时间（以毫秒计）。 | | traditional | 布尔值，规定是否使用参数序列化的传统样式。 | | type | 规定请求的类型（GET 或 POST）。 | | url | 规定发送请求的 URL。默认是当前页面。

| | username | 规定在 HTTP 访问认证请求中使用的用户名。 | | xhr | 用于创建 XMLHttpRequest 对象的函数。 |

五、Json

5.1 什么是json

JSON:是一种特殊的字符串，符合一定的语法格式
JSON中的语法：
{}:对象
[]:数组，元素
“”属性名称或者字符串类型的值
: 连接属性和值的符号
, 连接多个属性或者多个元素

eg:
[“id”:1,”name”:”abc”] 错误的
[{“id”:1,”name”:”abc”}] 对的
{1,2,3} 错误的
[1,2,3] 对的
{“id”:1} 对的

5.2 json的生成

阿里巴巴-Fastjson
JSON.toJSONString(对象|集合)
示例代码：

  1.     public static void main(String[] args) {
  2.         //准备
  3.         Student st=new Student(1,"魏总","男");
  4.         //生成 对象变为字符串
  5.         String json= JSON.toJSONString(st);
  6.         System.err.println(json);
  8.         //演示生成json数组
  9.         List<Student> list=new ArrayList<>();
  10.         for(int i=1;i<10;i++){
  11.             list.add(new Student(i,"小魏-"+i,"男"));
  12.         }
  13.         System.err.println(JSON.toJSONString(list));
  14.     }

5.3 json的解析

解析json对象的
JSON.parseObject(要解析的json字符串,对应的Class);
解析json数组的
JSON.parseArray(要解析的json字符串,对应的Class);
示例代码：

  1. public static void main(String[] args) {
  2.         String json1="{\"id\":1,\"name\":\"魏总\",\"sex\":\"男\"}";
  3.         String json2="[{\"id\":1,\"name\":\"小魏-1\",\"sex\":\"男\"},{\"id\":2,\"name\":\"小魏-2\",\"sex\":\"男\"},{\"id\":3,\"name\":\"小魏-3\",\"sex\":\"男\"},{\"id\":4,\"name\":\"小魏-4\",\"sex\":\"男\"},{\"id\":5,\"name\":\"小魏-5\",\"sex\":\"男\"},{\"id\":6,\"name\":\"小魏-6\",\"sex\":\"男\"},{\"id\":7,\"name\":\"小魏-7\",\"sex\":\"男\"},{\"id\":8,\"name\":\"小魏-8\",\"sex\":\"男\"},{\"id\":9,\"name\":\"小魏-9\",\"sex\":\"男\"}]";
  4.         //解析json字符串 把字符串转变为对象
  5.         Student student=JSON.parseObject(json1,Student.class);
  6.         System.err.println(student.getName());
  7.         //解析数组
  8.         System.err.println(JSON.parseArray(json2,Student.class).size());
  9.     }

MIME类型：标记资源的类型
组成格式：大类型/小类型
text/html