Filter&Listener&AJAX-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73886108/article/details/129946467

本文介绍了JavaWeb中的Filter概念及使用，包括过滤器的生命周期、配置和执行流程。接着讲解了Listener监听器的作用和分类。此外，还详细阐述了AJAX的异步数据交换功能及其在用户验证中的应用。最后，提到了JSON数据格式和Fastjson库在Java对象与JSON之间的转换操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Filter

概念: Filter表示过滤器，是JavaWeb 三大组件(Servlet. Filter、 Listener)之一。
过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。
过滤器一般完成一些通用的操作，比如:权限控制、统一编码处理、敏感字符处理等等…

快速入门

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

public class FilterDemo implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

    }

    @Override
    public void destroy() {

    }
}

配置Filter拦截资源的路径:在类上定义@WebFilter注解

@WebFilter("/*")
public class FilterDemo implements Filter {

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

public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("过滤器执行。。。");

        //放行
        filterChain.doFilter(servletRequest,servletResponse);
    }

Filter执行流程

在这里插入图片描述

放行后访问对应资源，资源访问完成后，还会回到Filter中吗？会
如果回到Filter中，是重头执行还是执行放行后的逻辑呢? 放行后逻辑

执行放行前逻辑-- >放行–>访问资源–>执行放行后逻辑

Filter使用细节

拦截路径配置

拦截具体的资源: /index.jsp: 只有访问index.jsp时才会被拦截
目录拦截: /user/*: 访问/user下的所有资源，都会被拦截
后缀名拦截: .jsp: 访问后缀名为jsp的资源，都会被拦截
拦截所有:/:访问所有资源，都会被拦截

过滤器链

一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链
注解配置的Filter，优先级按照过滤器类名(字符串)的自然排序

案例-登陆验证

需求:访问服务器资源时，需要先进行登录验证，如果没有登录，则自动跳转到登录页面

@WebFilter("/*")
public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig config) throws ServletException {
    }

    @Override
    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest req= (HttpServletRequest) request;
        //判断访问资源路径是否和登录注册相关
        String[] urls={"/login.jsp","/css/","/loginServlet","/register.jsp","/registerServlet","/checkCodeServlet"};
        //获取当前访问的资源路径
        String url = req.getRequestURL().toString();
        //遍历判断
        for (String u:urls){
            if(url.contains(u)){
                //找到了，放行
                chain.doFilter(request,response);
                return;
            }
        }

        //判断session中是否有user
        HttpSession session = req.getSession();
        Object user = session.getAttribute("user");


        //判断user是否为null
        if(user!=null){
            //登录过，放行
            chain.doFilter(request,response);
        }else {
            //没有登录，储存提示信息，跳转到login.jsp
            req.setAttribute("login_msg","您尚未登录");
            req.getRequestDispatcher("/login.jsp").forward(request,response);
        }

        chain.doFilter(request, response);


    }
}

Listener

概念: Listener 表示监听器，是JavaWeb 三大组件(Servlet. Filter. Listener)之一
监听器可以监听就是在application,session,request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件
Listener分类: JavaWeb中提供了8个监听器

AJAX

概念: AJAX(Asynchronous JavaScript And XML): 鼻步的JavaScript 和XML
AJAX作用:

与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据

使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了
异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用校验，等等

同步

在这里插入图片描述

异步

在这里插入图片描述

AJAX快速入门

服务端

编写AjaxServlet，并使用response输出字符串

客户端

<!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.发送请求
  /**
   * open(method, url, async)
   *
   * 规定请求的类型
   * method：请求的类型：GET 还是 POST
   * url：服务器（文件）位置
   * async：true（异步）或 false（同步）默认true
   */
  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>

案例：使用AJAX验证用户名是否存在

需求:在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在
在这里插入图片描述

<tr>
    <td>用户名</td>
    <td class="inputs">
        <input name="username" type="text" id="username">
        <br>
        <span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
    </td>

</tr>
<script>
    //失去焦点
    document.getElementById("username").onblur=function (){
        //发送ajax请求
        //获取用户名的值
        let username = this.value;

        //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/selectUserServlet?username="+username);
        xhttp.send()
        //3.获取响应
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                //判断
                if(this.responseText=="true"){
                    //用户名存在
                    document.getElementById("username_err").style.display='';
                }else {
                    //不存在
                    document.getElementById("username_err").style.display='none';
                }
            }
        };
    }
</script>

Axios使用

引入axios的jis 文件

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

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

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

JSON

概念: JavaScript Object Notation。 JavaScript 对象表示法
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
如下是 JavaScript 对象的定义格式：

{
	name:"zhangsan",
	age:23,
	city:"北京"
}

接下来我们再看看 JSON 的格式：

{
	"name":"zhangsan",
	"age":23,
	"city":"北京"
}

通过上面 js 对象格式和 json 格式进行对比，发现两个格式特别像。只不过 js 对象中的属性名可以使用引号（可以是单引号，也可以是双引号）；而 json 格式中的键要求必须使用双引号括起来，这是 json 格式的规定。

JSON 基础语法

定义格式

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

var 变量名 = '{"key":value,"key":value,...}';

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

数字（整数或浮点数）
字符串（使用双引号括起来）
逻辑值（true或者false）
数组（在方括号中）
对象（在花括号中）
null

JSON 数据和Java对象转换

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

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() 静态方法即可。

案例

查询所有

在这里插入图片描述

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

<script>
    //1. 当页面加载完成后，发送ajax请求
    window.onload = function () {
        //2. 发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            //获取数据
            let brands = resp.data;
            let tableData = " <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";

            for (let i = 0; i < brands.length ; i++) {
                let brand = brands[i];

                tableData += "\n" +
                    "    <tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";
            }

            // 设置表格数据
            document.getElementById("brandTable").innerHTML = tableData;
        })
    }

</script>

查询所有

在这里插入图片描述

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {

    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("utf-8");
        //1. 接收数据,request.getParameter 不能接收json的数据
       /* String brandName = request.getParameter("brandName");
        System.out.println(brandName);*/

        // 获取请求体数据
        BufferedReader br = request.getReader();
        String params = br.readLine();

        // 将JSON字符串转为Java对象
        Brand brand = JSON.parseObject(params, Brand.class);


        //2. 调用service 添加
        brandService.add(brand);

        //3. 响应成功标识
        response.getWriter().write("success");
    }

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