JavaWeb 笔记——5

最新推荐文章于 2024-05-28 16:18:14 发布
最新推荐文章于 2024-05-28 16:18:14 发布
阅读量299 收藏
点赞数
分类专栏： Java 文章标签： 笔记 java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74155781/article/details/131607626
版权

JavaWeb 笔记——5

一、Filter

1.1、概述

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

在这里插入图片描述

1.2、Filter快速入门

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

public class FilterDemo implements Filter {
	public void init(FilterConfig filterConfig)
	public void doFilter(ServletRequest request)
	public void destroy(){}
}
  1. 配置Filter拦截资源的路径：再类上定义@WebFilter注解
@WebFilter("/*")
	public class FilterDemo implements Filter {}
  1. 在doFilter方法中输出一句话，并放行
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("Filter....");
        //放行
        filterChain.doFilter(servletRequest,servletResponse);
    }

1.3、Filter执行流程

在这里插入图片描述

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

在这里插入图片描述

1.4、Filter使用细节

Filter拦截路径配置

  • Filter 可以根据需求，配置不同的拦截资源路径
     @WebFilter("/*")
    • 拦截具体的资源:/index.jsp:只有访问index.jsp时才会被拦截。
    • 目录拦截:/user/*:访问/user下的所有资源，都会被拦截
    • 后缀名拦截: *.jsp:访问后缀名为jsp的资源，都会被拦截
    • 拦截所有:/*:访问所有资源，都会被拦截

过滤器链

  • 一个Web应用，可以配置多个过滤器，这多个过滤器被称为过滤器链

在这里插入图片描述

  • 注解配置的Filter，优先级按照过滤器类名(字符串)的自然排序

1.5、Filter-案例-登陆验证

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

在这里插入图片描述

二、Listener

2.1、Listener概述与分类

  • 概念: Listener表示监听器，是JavaWeb三大组件(Servlet、Filter、Listener)之一。
  • 监听器可以监听就是在application,session,request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件
  • Listener分类: JavaWeb中提供了8个监听器
监听器分类监听器名称作用
ServletContext监听ServletContextListener用于对ServletContext对象进行监听(创建、销毁)
ServletContextAttributeListener对ServletContext对象中属性的监听(增删改属性)
Session监听HttpsessionListener 对Session对象的整体状态的监听（创建、销毁)
HttpSessionAttributeListener 对Session对象中的属性监听(增删改属性)
HttpSessionBindingListener监听对象于Session的绑定和解除
HttpSessionActivationListener对Session数据的钝化和活化的监听
Request监听ServletRequestListener对Request对象进行监听(创建、销毁)
ServletRequestAttributeListener对Request对象中属性的监听（增删改属性)

2.2、ServletContextListener使用

  1. 定义类，实现ServletContextListener接口
public class ContextLoaderListener implements ServletContextListener {
	/**
	* ServletContext对象被创建:整个web应用发布成功
	* @param sce
	*/
	public void contextInitialized(ServletcintextEvent sce){}
	/*
	* ServletContext对象被销毁:整个web应用卸载
	* @param sce
	*/
	public void contextDestroyed(ServletContextEvent sce){}
	}
  1. 在类上添加@WebListener注解
package com.Smulll.web.Linstener;

import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.annotation.WebListener;

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

    @Override
    public void contextDestroyed(ServletContextEvent servletContextEvent) {

    }
}

在这里插入图片描述

三、AJAX

3.1、AJAX概述

  • 概念: AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML

  • AJAX作用:

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

在这里插入图片描述
在这里插入图片描述

3.2、AJAX快速入门

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

  2. 创建XMLHttpRequest 对象:用于和服务器交换数据

    var xmlhttp;
if (window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}else {
//code for lE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

  3. 向服务器发送请求

    xmlhttp.open("GET","url");
xmlhttp.send();//发送请求

  4. 获取服务器响应数据

    xmlhttp.onreadystatechange = function () {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
		alert(xmlhttp.responseText)
	}
};

3.3、使用Ajax验证用户名是否存在

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在

在这里插入图片描述

package com.Smulll.web.Servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/selectServlet")
public class SelectServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取数据
        String username = req.getParameter("username");
        //使用service判断是否有该数据
        boolean flag = true;
        //响应数据给前端
        resp.getWriter().write(""+flag);
    }

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">
        <table>
            <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>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>
</body>
<script>
    document.getElementById("username").onblur = function (){
        //获取用户名数据
        var username = this.value;
        // 创建 XMLHttpRequest 对象
        const xhttp = new XMLHttpRequest();
        // 定义回调函数
        xhttp.onload = function() {
            // 您可以在这里使用数据
        }
        // 发送请求
        xhttp.open("GET", "http://localhost:8080/ajax_demo/selectServlet?username="+username);
        xhttp.send();
        //获取服务器响应请求
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200){
               if (xhttp.responseText == "true"){
                   //此时查询到没有该数据
                   document.getElementById("username_err").style.display = "";
               }else {
                   //查询到有该数据
                   document.getElementById("username_err").style.display = "none";
               }
            }
        };
    }
</script>
</html>

3.4、Axios异步框架

  • Axios对原生的AJAX进行封装，简化书写
  • 官网: Axios官网
  1. 引入axios 的js文件
<script src="jslaxios-0.18.0.js"</script>
  1. 使用axios 发送请求，并获取响应结果
axios({
        method:"get",
        url:"http://localhost:8080/ajax_demo/axiosServlet?username=zhangsan"
    }).then(function (resp){
        alert(resp.data);
    });

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

Servlet代码

package com.Smulll.web.Servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("get!!");
        //获取数据
        String username = req.getParameter("username");
        System.out.println(username);
        //回响数据
        resp.getWriter().write("hello axios~~~");
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Post!!!!");
        this.doGet(req, resp);
    }
}

Axios请求方式别名

  • 为了方便起见， Axios已经为所有支持的请求方法提供了别名。
方法名作用
get(url)发起GET方式请求
post(url,请求参数)发起POST方式请求

在这里插入图片描述

    axios.get("http://localhost:8080/ajax_demo/axiosServlet?username=zhangsan")
        .then(function (resp){
            alert(resp.data)
        })

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">
        <table>
            <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>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>
            <tr>
                <td>验证码</td>
                <td class="inputs">
                    <input name="checkCode" type="text" id="checkCode">
                    <img src="imgs/a.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>
</div>
</body>
<script src="js/axios-0.18.0.js"></script>
<script>
    document.getElementById("username").onblur = function (){
    axios.get("http://localhost:8080/ajax_demo/selectServlet?username="+username)
        .then(function (resp){
            console.log(resp.data)
            if ("true" == resp.data.toString()){
                //此时没有查询到数据
                document.getElementById("username_err").style.display = "";
            }else {
                //查询到有该数据
                document.getElementById("username_err").style.display = "none";
            }
        })
    }
</script>
</html>

3.5、JSON-概述和基础语法

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

JSON基础语法

  • 定义：

    var 变量名 ={
	"key1": value1,
	"key2": value2,
	...
	};

  • value的数据类型为:

    • 数字 (整数或浮点数)

    • 字符串 (在双引号中)

    • 逻辑值 (true或false)

    • 数组 (在方括号中)

    • 对象 (在花括号中)

    • null

    • 示例

    	var json ={
		"name": "zhangsan",
		"age": 23,
		"addr":["北京","上海","广州"]
		};

  • 获取数据:

    变量名.key

    json.name

3.5、JSON数据和Java对象的转换

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

在这里插入图片描述

  • Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。
  • 使用：
    1. 导入坐标
<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>fastjson</artifactId>
	<version>1.2.62</version>
</dependency>

2.Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

3.JSON字符串转Java对象

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

package com.Smulll.web.json;

import com.alibaba.fastjson.JSON;

public class jsondemo1 {
    public static void main(String[] args) {
        User user = new User("zhangsan","123",22,1);
        //将对象转化为字符串
        String json = JSON.toJSONString(user);
        System.out.println(json);
        //将json字符串转化为对象
        User u = JSON.parseObject(json, User.class);
        System.out.println(u);
    }
}

3.6、案例-查询所有

在这里插入图片描述

3.7、案例-新增品牌

在这里插入图片描述

Smulll_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动力节点老杜javaweb笔记
10-03
动力节点老杜javaweb笔记
JavaWeb开发——JSP技术
03-24
此文章包含JSP简介、JSP运行原理、JSP标签与标签库及其使用、JSP的内置对象与作用域对象、EL表达式和MVC模式的简介，...适用于任何学习JavaWeb开发中，需要了解JSP技术的人群，希望这篇文章能对大家的学习有所帮助！
JavaWeb 笔记——2
weixin_74155781的博客
06-30 501
提供了一套标准化的项目结构提供了一套标准化的构建流程（编译，测试，打包，发布…)提供了一套依赖管理机制标准化的项目结构Maven提供了一套标准化的项目结构，所有IDE使用Maven构建的项目结构完全一样，所有IDE创建的Maven项目可以通用提供了一套标准化的构建流程（编译，测试，打包，发布…)Maven提供了一套简单的命令来完成项目构建提供了一套依赖管理机制依赖管理其实就是管理你项目所依赖的第三方资源(jar包、插件…)
JavaWeb 笔记——1
weixin_74155781的博客
06-29 286
Web：全球广域网，也称为万维网(www)，能够通过浏览器访问的网站JavaWeb：是用Java技术来解决相关web互联网领域的技术栈网页:展现数据数据库:存储和管理数据JavaWeb程序:逻辑处理JDBC就是使用Java语言操作关系型数据库的一套API全称：(Java DataBase Connectivity ) Java数据库连接官方(sun公司)定义的一套操作所有关系型数据库的规则，即接口各个数据库厂商去实现这套接口，提供数据库驱动jar包。
JavaWeb 笔记——4
weixin_74155781的博客
07-08 277
概念: Java Server Pages，Java服务端页面一种动态的网页技术，其中既可以定义HTML、JS、CSS等静态内容，还可以定义Java代码的动态内容JSP作用：简化开发，避免了在Servlet中直接输出HTML标签会话:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应会话跟踪:一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同一次会话的多次请求间共享数据HTTP协议是无状态。
JavaWeb 笔记——3
weixin_74155781的博客
07-05 260
概念:HyperTextTransferProtocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则基于TCP协议：面向连接，安全基于请求-响应模型的：一次请求对应一次响应HTTP协议是无状态的协议:对于事务处理没有记忆能力。每次请求-响应都是独立的。缺点：多次请求间不能共享数据。->Java中使用会话技术(Cookie、Session)来解决这个问题优点：速度快。
JavaWeb笔记——会话技术
weixin_62993347的博客
10-28 295
JavaWeb笔记——会话技术 会话跟踪技术的概述；Cookie；Session；用户登录注册案例
JavaWeb笔记——MySQL数据库
weixin_62993347的博客
08-30 456
数据库介绍 MySQL——MySQL数据模型；SQL简介、语法、分类；DDL；DML;DQL；聚合函数；过滤分组数据；子函数；组合查询；数据库范式
JavaWeb笔记——JDBC
weixin_62993347的博客
08-30 1430
JDBC：综述；发展史；常用API；URL协议；JDBC操作的基本步骤；增删改查；DBUtil类的设计；insert语句获取自增长ID；PreparedStatement工作方式；事务（Transaction）；ORM；数据库连接池
JavaWeb笔记——环境配置Tomcat、Maven
threewsl的博客
06-05 544
idea配置tomcat和maven
尚硅谷JavaWeb笔记——jsp
weixin_43725818的博客
02-24 1572
文章目录Java server pages(jsp)jsp简介jsp语法jsp头部的page指令jsp中常用的脚本声明脚本（**很少使用**）表达式脚本代码脚本jsp中的三种注解html注释java注释jsp注释jsp对象九个内置对象四个域对象输出对象jsp中常用标签jsp静态包含jsp动态包含jsp标签-转发jsp练习题练习一：在jsp页面中输出九九乘法表练习二：jsp输出一个表格，里面有10个学生信息 Java server pages(jsp) jsp简介 什么是jsp，它有什么作用？ 答：jsp全程
javaweb笔记+狂神+知识总结
04-01
Java+javaweb笔记+狂神+知识总结
javaweb笔记.pdf
11-29
javaweb笔记.pdf
javaweb笔记+代码(狂神说java)
08-27
javaweb笔记+代码(狂神说java)
Git笔记
985小菜鸡
05-21 376
完成以上步骤后，您的本地项目应该已经成功上传到 GitHub 仓库中了。您可以在 GitHub 网站上查看并访问您的项目。，如果您使用的是其他分支，请将其替换为您的分支名称。这里假设您的本地分支是。
Linux学习笔记（二）
最新发布
weixin_42515203的博客
05-28 197
Linux的学习笔记
【加密与解密（第四版）】第四章笔记
m0_58213960的博客
05-21 734
x64系统通用寄存器的名称，第1个字母从“E”改为“R”(例如“RAX”)，大小扩展到 64 位，数量增加了8个(R8~R15)，扩充了8个128位XMM寄存器(在64位程序中，XMM寄存器经常被用来优化代码)。64位寄存器与x86下的32位寄存器兼容，例如RAX(64位)EAX(低32)、AX(低16位)、AL(低8位)和AH(8~15位)。x64新扩展的寄存器高低位访问，使用WORD、BYTE、DWORD后级，例如R8(64位)R8D(低32位)、R8W(低16位)和R8B(低8位)。
Vue学习笔记3——事件处理
qq_44778824的博客
05-22 425
尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好。)来监听DOM事件，并在事件触发时执行对应的JavaScript。// 读取data里面数据的方法：this.count。// 所有方法或者函数都放在这里,跟data同级。为解决这一问题，Vue 为。对象和通过事件传递数据。
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值