Filter Listener Ajax学习笔记

最新推荐文章于 2024-07-19 12:00:00 发布
最新推荐文章于 2024-07-19 12:00:00 发布
阅读量457 收藏
点赞数
分类专栏： javaweb 文章标签： ajax 学习 servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SImple_a/article/details/128361744
版权

1 Filter

Filter用于请求的过滤，如请求时，做登录的全局性校验

1.1 示例

在创建Filter前，可以通过启动Tomcat访问index.jsp

http://localhost:8080/Mvc-Demo/index.jsp

添加Filter后，重新启动Tomcat，并再次访问index.jsp

@WebFilter("/*")
public class TestFilter1 implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("TestFilter1 doFilter");
    }

    @Override
    public void destroy() {

    }
}

此时浏览器不在展示Hello, World。 并且控制台输出doFilter()方法中的内容。
添加放行后， 重启Tomcat

filterChain.doFilter(servletRequest, servletResponse);

此时能够正常访问到webapp下的资源

1.2 拦截路径配置

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

1.3 过滤器链

每个web应用，可以配置多个过滤器，多个过滤器链式调用执行
代码演示:

两个过滤器

@WebFilter("/*")
public class TestFilter1 implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("TestFilter1 doFilter enter");
        filterChain.doFilter(servletRequest, servletResponse);
        System.out.println("TestFilter1 doFilter end");
    }

    @Override
    public void destroy() {

    }
}


@WebFilter("/*")
public class TestFilter2 implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("TestFilter2 doFilter enter");
        filterChain.doFilter(servletRequest, servletResponse);
        System.out.println("TestFilter2 doFilter end");
    }

    @Override
    public void destroy() {

    }
}

index.jsp页面

<html>
<body>
<h2>Hello World!</h2>

<% System.out.println("index.jsp"); %>
</body>
</html>

启动tomcat后，访问index.jsp，日志输出

TestFilter1 doFilter enter
TestFilter2 doFilter enter
index.jsp
TestFilter2 doFilter end
TestFilter1 doFilter end

从日志可以看出，拦截器的执行逻辑是先执行放行前的逻辑，再执行拦截后的逻辑。

拦截器的执行顺序: 按照拦截器的名字来顺序执行

2 Listener

Listener是监听器，是JavaWeb三大组件(Servlet, Filter, Listener)之一
监听器可以监听application, session, request三个对象的创建，销毁

示例:

@WebListener
public class ContextLoaderListener implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent servletContextEvent) {
        System.out.println("contextInitialized ...");
    }

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) {
        System.out.println("contextDestroyed ...");
    }
}

启动服务器，则可以看到在控制台输出的初始化日志
关闭服务器，也可以看到控制台中输出的销毁日志

3 Ajax

AJAX(Asynchronous JavaScript And XMl) 异步的JavaScript和XML
作用: 与服务器进行数据请求
示例:
服务端Servlet

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().write("hello ajax~");
    }

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

前端

</head>
<body>
  <script>
    var xhttp;
    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    } else {
        xhttp = new ActiveXObject("Microsoft.XML HTTP");
    }

    xhttp.open("GET", "http://localhost:8080/Mvc-Demo/ajaxServlet")
    xhttp.send();

    xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200) {
            console.log(this.responseText)
        }
    }
  </script>
</body>
</html>

请求 http://localhost:8080/Mvc-Demo/test_ajax.html 后，会看到servlet接口也有被请求
在这里插入图片描述

示例: 当光标失去焦点是，请求服务端
前端代码

<script>
    document.getElementById("username").onblur = function () {
        var username = this.value;
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
            xhttp = new ActiveXObject("Microsoft.XML Http")
        }

        xhttp.open("GET", "http://localhost:8080/Mvc-Demo/selectUserServlet?username=" + username)
        xhttp.send();

        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>

servlet

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //模拟结果， 写死成true
        boolean flag = true;
        resp.getWriter().write("" + flag);
    }

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

当输入框中失去焦点后，将会有用户名已存在的提示

4 axios

axios是对原生的ajax的封装
示例:
Servlet

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println("username = " + username);
        resp.getWriter().write("hello axios~");
    }

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

Html

<!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>
    axios({
        method:"post",
        url: "http://localhost:8080/Mvc-Demo/axiosServlet",
        data: "username=lisi"
    }).then(function (resp) {
        console.log("resp.data = " + resp.data)
    })
  </script>
</body>
</html>

请求http://localhost:8080/Mvc-Demo/test_axios.html后，日志输出

resp.data = hello axios~

5 JSON

JavaScript object Notation JavaScript对象表示法
定义示例:

{
	"name": "lisi",
	"age": 14,
	"city": "上海"
}

json解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script>
    var jsonStr = '{"name" : "lisi", "age" : 15, "city" : "上海"}'
    var jsonObj = JSON.parse(jsonStr);
    console.log("name = " + jsonObj.name + ", age = " + jsonObj.age)
 	
 	let jsonStr2 = JSON.stringify(jsonObj)
    console.log("jsonStr2 = " + jsonStr2);
  </script>
</body>
</html>

日志输出

name = lisi, age = 15    
jsonStr2 = {"name":"lisi","age":15,"city":"上海"}

json作为异步请求参数

var jsObject = {name: "lisi"}
    axios({
        method:"post",
        url: "http://localhost:8080/Mvc-Demo/axiosServlet",
        data: jsObject
    }).then(function (resp) {
        console.log("resp.data = " + resp.data)
    })

fastJson
fastjson是用来实现Java对象和字符串的转换
首先引入fastjson的依赖

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

测试代码

public class TestJson {

    public static void main(String[] args) {
        User user = new User();
        user.setId(1);
        user.setUsername("lisi");
        user.setPassword("876");

        String jsonStr = JSON.toJSONString(user);
        System.out.println("jsonStr = " + jsonStr);

        User user2 = JSON.parseObject(jsonStr, User.class);
        System.out.println("user2 = " + user2);
    }
}

日志输出

jsonStr = {"id":1,"password":"876","username":"lisi"}
user2 = User{id=1, username='lisi', password='876'}

6 案例

6.1 品牌列表示例

servlet代码

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService service = new BrandService();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Brand> brands = service.selectAll();

        String jsonStr = JSON.toJSONString(brands);
        resp.setContentType("text/json; charset=utf-8");
        resp.getWriter().write(jsonStr);
    }

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

js代码

<%--
  Created by IntelliJ IDEA.
  User: yl
  Date: 2022/11/30
  Time: 5:11 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>所有品牌</title>
</head>
<body>
  <h1>${user.username},欢迎您</h1>
  <hr>
  <a href="addBrand.jsp"> <input type="button" value="新增"></a><br>
  <table id="brandTable" border="1" cellspacing="0" width="80%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
  </table>
  <script src="js/axios-0.18.0.js"></script>
  <script>
      window.onload = function () {
          axios({
              method: "get",
              url: "http://localhost:8080/Mvc-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 += "<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" +
                      "              <td>\n" +
                      "                  <a href=\"/Mvc-Demo/selectByIdServlet?id=${brand.id}\">修改\n" +
                      "                  </a> <a href=\"#\"> 删除</a>\n" +
                      "              </td>\n" +
                      "          </tr>";
              }
              document.getElementById("brandTable").innerHTML = tableData;
          })
      }
  </script>
</body>
</html>

6.2 品牌添加示例

servlet代码

@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {
    private BrandService service = new BrandService();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        BufferedReader br = req.getReader();
        String params = br.readLine();

        System.out.println("params = " + params);

        Brand brand = JSON.parseObject(params, Brand.class);
        service.add(brand);
        resp.getWriter().write("success");
    }

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

js代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加品牌</title>
</head>
<body>
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称: <input id="brandName" name="brandName"><br> <br>
        企业名称: <input id="companyName"  name="companyName"><br> <br>
        品牌排序: <input id="ordered" name="ordered"><br> <br>
        描述信息: <textarea rows="5" cols="20" id="description" name="description"></textarea> <br> <br>
        状态:
        <input type="radio" name="status" value="0">禁用
        <input type="radio" name="status" value="1">启用 <br><br>

        <input type="button" id="submit" value="提交">
    </form>

    <script src="js/axios-0.18.0.js"></script>
    <script>
        document.getElementById("submit").onclick = function () {
            var formData = {
                brandName: "",
                companyName: "",
                ordered: "",
                description: "",
                status: "",
            };
            let brandName = document.getElementById("brandName").value;
            let companyName = document.getElementById("companyName").value;
            let ordered = document.getElementById("ordered").value;
            let description = document.getElementById("description").value;

            formData.brandName = brandName;
            formData.companyName = companyName;
            formData.ordered = ordered;
            formData.description = description;

            let status = document.getElementsByName("status");
            for (let i = 0; i < status.length; i++) {
                if (status[i].checked) {
                    formData.status = status[i].value;
                }
            }

            console.log("formData = " + formData)
            axios({
                method:"post",
                url: "http://localhost:8080/Mvc-Demo/addServlet",
                data: formData
            }).then(function (resp) {
                if (resp.data == "success") {
                    location.href = "http://localhost:8080/Mvc-Demo/brand.jsp";
                }
            })
        };
    </script>
</body>
</html>
小 黄 鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Filter过滤器学习心得笔记
Fatter$hday的博客
11-14 779
一、什么是Filter过滤器 1.Filter过滤器是JavaWeb的三大组件之一。三大组件分别是：Servlet程序、Listener监听器、Filter过滤器 2.Filter过滤器它是一个接口 3.Filter过滤器的作用是：拦截请求和过滤响应 3.1过滤器负责过滤的Web组件可以是：Servlet、JSP或HTML文件等等，过滤器的过滤过程如下图所示： ...
vue 学习笔记
weixin_43971312的博客
05-22 2191
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
ajax和filter总结
小符的博客
05-28 1735
回顾：   ajax: 异步请求   原生ajax（了解）   1.创建一个核心对象xmlHttpRequest   2.回调方法   4   200   3. open操作       xmlhttp.open("请求方式","请求路径");   4.send操作      send([参数])； post 请求头    jquery的ajax  掌握： $.get(u
JavaWeb笔记——Filter&Listener&Ajax
weixin_62993347的博客
10-29 491
JavaWeb笔记——Filter&Listener&Ajax Filter；Listener；Ajax；axios；JSON；案例
【JavaWeb学习】12Filter&Listener&Ajax
weixin_48074431的博客
08-17 284
JavaWeb（B站黑马）学习笔记 12Filter&Listener&Ajax
AJAX学习总结+Axios异步框架+Filter拦截器学习+JSON介绍+Listener监听器介绍
RuanFun的博客
09-09 788
AJAX学习总结+Axios异步框架+Filter拦截器学习+JSON介绍+Listener监听器介绍
【JavaWeb】十、 Filter&Listener&Ajax
weixin_42301220的博客
03-22 428
文章目录参考资料1. Filter1.1 Filter概述1.2 Filter快速入门1.2.1 开发步骤1.2.2 代码演示1.3 Filter执行流程1.4 Filter拦截路径配置1.5 过滤器链1.5.1 概述1.5.2 代码演示1.5.3 问题1.6 案例1.6.1 需求1.6.2 分析1.6.3 代码实现1.6.3.1 创建Filter1.6.3.2 编写逻辑代码1.6.3.3 测试并抛出问题1.6.3.4 问题分析及解决2. Listener2.1 概述2
学习笔记：尚硅谷Vue2基础篇
D_boj的博客
04-22 1028
通过B站尚硅谷学习，了解Vue2基本概述，以及基本使用。本章节主要了解选项式API以及组件化编程
【JavaWeb】--06.Filter、Listener、Ajax、Vue
qq_46656857的博客
05-16 336
JavaWeb笔记
JAVA WEB学习笔记
08-02
【JAVA WEB学习笔记】 Java Web是Java技术在Web开发领域中的应用，涵盖了从服务器端编程到客户端交互的各种技术。这份学习笔记将带你深入理解Java Web的核心概念和实践技巧。 1. **Servlet与JSP** - Servlet是...
java web学习笔记
11-21
Java Web学习笔记是深入理解Web开发技术的重要参考资料，尤其对于初学者来说，它提供了一条系统学习的路径。这份笔记的作者在学习过程中积累了丰富的知识，并将其归纳整理，旨在帮助那些希望进入Java Web领域的...
javaWeb学习笔记
07-23
JavaWeb学习笔记涵盖了多个核心JavaWeb开发的主题，包括基础理论、实战项目以及一些关键技术的应用。以下是对这些知识点的详细说明： 1. **Java基础知识**：JavaWeb开发的基础始于对Java语言的理解，包括语法、面向...
javaweb笔记+狂神+知识总结
04-01
6. **Filter和Listener**：Filter用于拦截请求和响应，可以进行权限控制、日志记录、字符编码转换等操作。Listener则监听特定事件，如session创建、销毁，或者ServletContext的变化，实现定制化的功能。 7. **JNDI...
JavaWeb前端后端笔记.zip
09-16
Filter和Listener是JavaWeb的重要组成部分。Filter可以拦截和修改请求或响应，常用于权限控制、字符编码转换等。Listener则监听Web应用中的特定事件，如用户的登录和注销、会话的创建和销毁等，实现相应的处理逻辑。...
Spark学习之SparkSQL
m0_58050808的博客
07-16 357
Spark SQL中的DataFrame DSL（Domain Specific Language，领域特定语言）是一种用于处理DataFrame的编程风格，它允许开发者以命令式的方式，通过调用API接口来操作DataFrame。这种风格**介于代码和纯SQL之间，**提供了一种更加灵活和强大的数据处理方式。DataFrame DSL（Domain Specific Language，领域特定语言）中的。idea里面将代码编写好打包上传到集群中运行，上线使用。
Ajax是什么？如何在HTML5中使用Ajax？
m0_70066267的博客
07-16 1839
Ajax，全称Asynchronous Javascript And XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，减少了数据传输量，并节省了网络带宽。Ajax并非一种新的编程语言，而是一种基于现有标准的技术，主要依赖于JavaScript和XMLHttpRequest对象来实现。：这是Ajax技术的核心，用于与服务器进行异步通信。
如何学习Spark：糙快猛的大数据之旅
最新发布
一个7年大数据开发工程师的碎碎念
07-19 1127
回顾我从零开始学习大数据的journey，我深深体会到"糙快猛"学习方法的重要性。在Spark这样复杂而强大的技术面前，我们不应该被完美主义所束缚。相反，我们应该勇于尝试，在实践中学习，在错误中成长。记住，当我们面对看似不可能的挑战时，要保持那份"可把我牛逼坏了，让我叉会腰儿"的自信和决心。每一次你解决了一个棘手的数据问题，优化了一个复杂的查询，或者部署了一个高性能的Spark应用，你都在向着成为大数据专家的目标迈进一步。在这个数据驱动的时代，Spark的学习之旅永无止境。
AJAX基本用法
2303_80137294的博客
07-18 830
JavaScript中的Promise是一种处理异步操作的编程模式，它提供了更加优雅的方式来组织和管理异步代码，相较于传统的回调函数，Promise能够避免回调地狱（Callback Hell），使得代码更加清晰和易于维护。在JavaScript中，当多个异步操作依赖于彼此的结果时，如果使用传统的回调函数处理，代码会迅速变得嵌套复杂，难以阅读和维护，这种现象被称为“回调地狱”（Callback Hell）。)后面，多个参数之间用&符号分隔。语法，它基于Promise，提供了更加简洁的异步编程方式。
Servlet学习笔记（五）Filter Listener
06-01
好的，我可以和你讨论Servlet中的Filter和Listener。 在Servlet中，Filter和Listener是两个重要的组件，它们可以用于在Servlet容器中拦截请求和响应，以及处理Servlet容器中的事件。 Filter是一种拦截器，它可以在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值