Filter&Listener&Ajax&JSON

为爱发电中

已于 2023-03-26 16:00:35 修改

阅读量116

点赞数

分类专栏： web入门文章标签： servlet java 前端 Powered by 金山文档

于 2023-03-08 20:11:18 首次发布

本文链接：https://blog.csdn.net/weixin_52234593/article/details/129409069

版权

web入门专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Filter

Filter 表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一

过滤器可以把对资源的请求==拦截==下来，从而实现一些特殊的功能。

Filter快速入门

进行 Filter 开发分成以下三步实现

定义类，实现 Filter接口，并重写其所有方法

配置Filter拦截资源的路径：在类上定义 @WebFilter 注解。而注解的 value 属性值 /* 表示拦截所有的资源

在doFilter方法中输出一句话，并放行

Filter执行流程

Filter拦截路径配置

拦截路径表示 Filter 会对请求的哪些资源进行拦截，使用 @WebFilter 注解进行配置。如：@WebFilter("拦截路径")

拦截路径有如下四种配置方式：

拦截具体的资源：/index.jsp：只有访问index.jsp时才会被拦截

目录拦截：/user/*：访问/user下的所有资源，都会被拦截

后缀名拦截：*.jsp：访问后缀名为jsp的资源，都会被拦截

拦截所有：/*：访问所有资源，都会被拦截

通过上面拦截路径的学习，大家会发现拦截路径的配置方式和 Servlet 的请求资源路径配置方式一样，但是表示的含义不同。

过滤器链

我们现在使用的是注解配置Filter，而这种配置方式的优先级是按照过滤器类名(字符串)的自然排序。

比如有如下两个名称的过滤器： BFilterDemo 和 AFilterDemo 。那一定是 AFilterDemo 过滤器先执行。

案例：

@WebFilter("/*")
public class LoginFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest req = (HttpServletRequest) request;
        
        //判断访问资源路径是否和登录注册相关
        //1,在数组中存储登陆和注册相关的资源路径
        String[] urls = {"/login.jsp","/imgs/","/css/","/loginServlet","/register.jsp","/registerServlet","/checkCodeServlet"};
        //2,获取当前访问的资源路径
        String url = req.getRequestURL().toString(); 

        //3,遍历数组，获取到每一个需要放行的资源路径
        for (String u : urls) {
            //4,判断当前访问的资源路径字符串是否包含要放行的的资源路径字符串
            /*
                比如当前访问的资源路径是  /brand-demo/login.jsp
                而字符串 /brand-demo/login.jsp 包含了  字符串 /login.jsp ，所以这个字符串就需要放行
            */
            if(url.contains(u)){
                //找到了，放行
                chain.doFilter(request, response);
                //break;
                return;
            }
        }
   
        //1. 判断session中是否有user
        HttpSession session = req.getSession();
        Object user = session.getAttribute("user");

        //2. 判断user是否为null
        if(user != null){
            // 登录过了
            //放行
            chain.doFilter(request, response);
        }else {
            // 没有登陆，存储提示信息，跳转到登录页面

            req.setAttribute("login_msg","您尚未登陆！");
            req.getRequestDispatcher("/login.jsp").forward(req,response);
        }
    }

    public void init(FilterConfig config) throws ServletException {
    }

    public void destroy() {
    }
}

Listener

Listener 表示监听器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。

监听器可以监听就是在 application，session，request 三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。

request 和 session 我们学习过。而 application 是 ServletContext 类型的对象。

ServletContext 代表整个web应用，在服务器启动的时候，tomcat会自动创建该对象。在服务器关闭时会自动销毁该对象。

ServletContextListener 是用来监听 ServletContext 对象的创建和销毁。

ServletContextListener 接口中有以下两个方法

void contextInitialized(ServletContextEvent sce)：ServletContext 对象被创建了会自动执行的方法

void contextDestroyed(ServletContextEvent sce)：ServletContext 对象被销毁时会自动执行的方法

我们只演示一下 ServletContextListener 监听器

定义一个类，实现ServletContextListener 接口

重写所有的抽象方法

使用 @WebListener 进行配置

代码如下：

@WebListener
public class ContextLoaderListener implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent sce) {
        //加载资源
        System.out.println("ContextLoaderListener...");
    }

    @Override
    public void contextDestroyed(ServletContextEvent sce) {
        //释放资源
    }
}

启动服务器，就可以在启动的日志信息中看到 contextInitialized() 方法输出的内容，同时也说明了 ServletContext 对象在服务器启动的时候被创建了。

Ajax

==AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。==

作用

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器，

如下图是之前做功能的流程图：

如上图，Servlet 调用完业务逻辑层后将数据存储到域对象中，然后跳转到指定的 jsp 页面，在页面上使用 EL表达式和 JSTL 标签库进行数据的展示。

而我们学习了AJAX 后，就可以==使用AJAX和服务器进行通信，以达到使用 HTML+AJAX来替换JSP页面==了。如下图，浏览器发送请求servlet，servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 来进行数据展示。

异步交互

异步交互：可以在==不重新加载整个页面==的情况下，与服务器交换数据并==更新部分网页==的技术，如：搜索联想、用户名是否可用校验，等等…

快速入门

服务端实现

在项目的创建 .web.servlet ，并在该包下创建名为 AjaxServlet 的servlet

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 响应数据
        response.getWriter().write("hello ajax~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

客户端实现

在 webapp 下创建名为 01-ajax-demo1.html 的页面，在该页面书写 ajax 代码

创建核心对象，不同的浏览器创建的对象是不同的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1. 创建核心对象
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2. 发送请求
    xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
    xhttp.send();

    //3. 获取响应
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            alert(this.responseText);
        }
    };
</script>
</body>
</html>

axios

Axios 对原生的AJAX进行封装，简化书写。

axios 使用是比较简单的，分为以下两步：

引入 axios 的 js 文件

<scriptsrc="js/axios-0.18.0.js"></script>

使用axios 发送请求，并获取响应结果

发送 get 请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

发送 post 请求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

method 属性：用来设置请求方式的。取值为 get 或者 post。

url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。

data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

后端实现

定义一个用于接收请求的servlet，代码如下：

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get...");
        //1. 接收请求参数
        String username = request.getParameter("username");
        System.out.println(username);
        //2. 响应数据
        response.getWriter().write("hello Axios~");
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post...");
        this.doGet(request, response);
    }
}

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/axios-0.18.0.js"></script>
<script>
    //1. get
   /* axios({
        method:"get",
        url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })*/

    //2. post  在js中{} 表示一个js对象，而这个js对象中有三个属性
    axios({
        method:"post",
        url:"http://localhost:8080/ajax-demo/axiosServlet",
        data:"username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })
</script>
</body>
</html>

请求方法别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

get 请求： axios.get(url[,config])

delete 请求： axios.delete(url[,config])

head 请求： axios.head(url[,config])

options 请求： axios.option(url[,config])

post 请求：axios.post(url[,data[,config])

put 请求：axios.put(url[,data[,config])

patch 请求：axios.patch(url[,data[,config])

中括号代表可有可无，代码中无需书写。

入门案例中的 post 请求代码可以改为如下：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

JSON

概念：`JavaScript Object Notation`。JavaScript 对象标记法

JSON是通过JavaScript对象标记法书写的文本

json 格式数据的简单，以及所占的字节数少等优点。

其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

JSON 基础语法

JSON 本质就是一个字符串，但是该字符串内容是有一定的格式要求的。定义格式如下：

var 变量名 = '{"key":value,"key":value,...}';
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'

JSON 串的键要求必须使用双引号括起来，而值根据要表示的类型确定。value 的数据类型分为如下

数字（整数或浮点数）

字符串（使用双引号括起来）

逻辑值（true或者false）

数组（在方括号中）

对象（在花括号中）

null

JSON格式化校验工具：JSON格式化 (bt.cn)

js对象和JSON串的相互转换

parse(str) ：将 JSON串转换为 js 对象。使用方式是： ==var jsObject = JSON.parse(jsonStr);==

stringify(obj) ：将 js 对象转换为 JSON 串。使用方式是：==var jsonStr = JSON.stringify(jsObject)==

JSON串和Java对象的相互转换

学习完 json 后，接下来聊聊 json 的作用。以后我们会以 json 格式的数据进行前后端交互。前端发送请求时，如果是复杂的数据就会以 json 提交给后端；而后端如果需要响应一些复杂的数据时，也需要以 json 格式将数据响应回给浏览器。

后端我们就需要重点学习以下两部分操作：

请求数据：JSON字符串转为Java对象

响应数据：Java对象转为JSON字符串

接下来介绍一套 API，可以实现上面两部分操作。这套 API 就是 Fastjson

Fastjson 概述

Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库，是目前Java语言中最快的 JSON 库，可以实现 Java 对象和 JSON 字符串的相互转换。

Fastjson 使用

Fastjson 使用也是比较简单的，分为以下三步完成

导入坐标

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

将 Java 对象转换为 JSON 串，只需要使用 Fastjson 提供的 JSON 类中的 toJSONString() 静态方法即可。

JSON字符串转Java对象

User user = JSON.parseObject(jsonStr, User.class);

将 json 转换为 Java 对象，只需要使用 Fastjson 提供的 JSON 类中的 parseObject() 静态方法即可。

为爱发电中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Filter&Listener&Ajax&JSON

FilterFilter 表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一过滤器可以把对资源的请求==拦截==下来，从而实现一些特殊的功能。Filter快速入门进行 Filter 开发分成以下三步实现定义类，实现 Filter接口，并重写其所有方法配置Filter拦截资源的路径：在类上定义 @WebFilter 注解。而注解的 value 属性值 /* 表示拦截所有的资源在doFilter方法中输出一句话，并放行Filter执行流程。
复制链接

扫一扫