20220719_Filter_Listener_AJAX_Axios的用法

于 2022-07-20 00:24:06 发布
阅读量187 收藏
点赞数
分类专栏： JavaWeb 文章标签： ajax servlet java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ClarkGable/article/details/125873917
版权

特性部分过于简单不介绍了直接上小案例
过滤和监听功能部分，在本文项目MVC三层架构登录注册案例基础上扩展
首先清空浏览器的缓存数据，清楚办法各浏览器不一，不必清空cookie，清也可以
在基础案例的web包下添加一个filter包，写一个filter

package com.diy.web.filter;

import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.net.http.HttpRequest;

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

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        // get a HttpServletRequest ob, convert type form args
        HttpServletRequest hsr = (HttpServletRequest) req;

        /**
         * Block B
         */
        //get a session, judge if session contains a user
        HttpSession sess = hsr.getSession();
        Object User = sess.getAttribute("user");

        if (User != null){
            //let it pass
            chain.doFilter(req, resp);
        }else {
            hsr.setAttribute("loginFailedMsg","You didn't log on");
            hsr.getRequestDispatcher("/login.jsp").forward(hsr, resp);
            //hsr is instead of req, no problem usable
        }
    }
}

运行tomcat后直接访问资源而非登录页，如果浏览器缓存清空，会看见
请添加图片描述
请添加图片描述
登录后还是可以访问的，不过登录页和注册页会呈现这种效果，因为登录注册相关的资源，除了jsp静态的部分，都被拦截了，要放行，即使还没登录，所以，改造上面的filter代码

package com.diy.web.filter;

import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.net.http.HttpRequest;

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

    public void destroy() {
    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        // get a HttpServletRequest ob, convert type form args
        HttpServletRequest hsr = (HttpServletRequest) req;
        /**
         * block A
         */
        //judge visit path whether related with login or register, yes, let them pass
        String[] urls = {"/login.jsp","/css/","/imgs/","register.jsp","loginServlet","registerServlet","/checkCodeServlet"};
        //get the requested visit path
        String url = ((HttpServletRequest) req).getRequestURL().toString();

        //judge whether url included in urls
        for (String s : urls) {
            if (url.contains(s)){
                chain.doFilter(req,resp);
                //if contains, return, the code under won't run
                return;
            }
        }

        /**
         * Block B
         */
        //get a session, judge if session contains a user
        HttpSession sess = hsr.getSession();
        Object User = sess.getAttribute("user");

        if (User != null){
            //let it pass
            chain.doFilter(req, resp);
        }else {
            hsr.setAttribute("loginFailedMsg","You didn't log on");
            hsr.getRequestDispatcher("/login.jsp").forward(hsr, resp);
            //hsr is instead of req, no problem usable
        }
    }
}

按这个filter，如果用户已经登录，不是访问登录注册的相关资源，那么会执行Block B部分的代码后放行
如果用户没登录，会执行Block B部分的代码，不放行，但转到登录页，又收到登录或注册的访问请求，执行Block A的代码，允许页面效果资源response
然后return，不会执行下面的代码，不然就循环了
效果图
请添加图片描述
登录后正常
请添加图片描述

文章目录


监听器Listener
在web包下建一个listener包，写一个自定义的listener 

package com.diy.web.listener;

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

@WebListener
public class MyListener implements ServletContextListener {
    @Override
    public void contextInitialized(ServletContextEvent sce) {
//        ServletContextListener.super.contextInitialized(sce);

        System.out.println("My listener has initialized ~~~");
    }

    @Override
    public void contextDestroyed(ServletContextEvent sce) {
        ServletContextListener.super.contextDestroyed(sce);
    }
}

这个listener监听整个ServletContext，就是整个服务，所以服务器启动就会加载，控制台看见打印输出
请添加图片描述
listener已经不常用，这里不研究用法，将来在spring框架中会再遇到

文章目录


AJAX的使用
建一个AjaxServlet 

package com.diy.web.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //simulate a need 3000 millis request
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        resp.getWriter().write("<h1>Hello AJAX</h1>");
    }

    @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>
    <link href="css/register.css" rel="stylesheet">
</head>
<body id="body">

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="/AJAX_Demo/ajaxServlet" 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/fakeCheckCode.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn" />
        </div>
        <div class="buttons">
            <input value="发送异步请求" type="button" id="btn" />
        </div>
        <br class="clear">
    </form>

</div>

<script>
    document.getElementById("btn").onclick = function (){
        //1.get core object
        var xmlhttp
        if (window.XMLHttpRequest){
            //for new explorer
            xmlhttp = new XMLHttpRequest()
        }else {
            //for old IE
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }

        /**
         * 2.transit request,
         * use the long path name,
         * because, in reality, font end html and back end servlet may be deployed on different server
         */
        xmlhttp.open("GET","/AJAX_Demo/ajaxServlet")
        xmlhttp.send()

        //3.receive response
        xmlhttp.onreadystatechange = function (){
            if (this.readyState == 4 && this.status == 200){
                document.getElementById("body").innerHTML = xmlhttp.responseText

            }
        }
    }
</script>
</body>
</html>

运行tomcat，访问register.html
请添加图片描述
正常点击注册，会等3000毫秒重加载网页并显示hello ajax标题语句，但我这代码有问题,可能是该代码不适用我的浏览器，反正不知不知为啥，不显示
点击发送异步亲求后3000毫秒，会正确显示hello ajax语句

文章目录


AJAX实现用户名输入后即可检验是否已被占用
后台代码 

package com.diy.web.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/checkUserExistServlet")
public class CheckUserExistServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.receive username input by user
        req.getParameter("username");

        // 2. assume the username already exists, instead of invoke database
        boolean flag = true;

        //response
        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 id="body">

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login.html">登录</a>
    </div>
    <form id="reg-form" action="/AJAX_Demo/ajaxServlet" 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/fakeCheckCode.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn" />
        </div>
        <div class="buttons">
            <input value="发送异步请求" type="button" id="btn" />
        </div>
        <br class="clear">
    </form>

</div>

<script>
    document.getElementById("username").onblur = function (){

        var username = this.value

        var xmlhttp
        if (window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest()
        }else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
        }

        xmlhttp.open("GET","http://localhost:8080/AJAX_Demo/checkUserExistServlet?username="+username)
        xmlhttp.send()

        xmlhttp.onreadystatechange = function (){
            if (this.readyState == 4 && this.status == 200){
                // alert(this.responseText)
                if (this.responseText == "true"){
                    //username exists
                    document.getElementById("username_err").style.display = ''
                }else {
                    //username not exists
                    document.getElementById("username_err").style.display = 'none'
                }
            }
        }
    }
</script>
</body>
</html>

效果，访问这个新的register.html,输入任意名字，鼠标离开输入框，看见提示信息，并且发送为xhr，xmlhttp request
请添加图片描述

请添加图片描述

文章目录


axios的用法
后台 

package com.diy.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 method ~~~");
        //receive request parameters
        System.out.println(req.getParameter("username"));
        //transit response data
        resp.getWriter().write("Hello Axios ~~");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post method ~~~");

        this.doGet(req, resp);
    }
}

前台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--first import the axios file-->
  <script src="/js/axios-0.18.0.js"></script>
<!--then you can use axios-->
    <script>
        //1.GET
        // axios({
        //     method:"get",
        //     url:"http://localhost:8080/AJAX_Demo/axiosServlet?username=luoxiang"
        // }).then(function (resp){
        //     alert(resp.data)
        // })

        //axios request method alias GET
        // axios.get("http://localhost:8080/AJAX_Demo/axiosServlet?username=luoxiang").then(function (resp){
        //     alert(resp.data)
        // })

        //2.POST
        // axios({
        //     method:"post",
        //     url:"http://localhost:8080/AJAX_Demo/axiosServlet",
        //     data:"username=luoxiang"
        // }).then(function (resp){
        //     alert(resp.data)
        // })

        //axios request method alias POST
        axios.post("http://localhost:8080/AJAX_Demo/axiosServlet","username=luoxiang").then(function (resp){
            alert(resp.data)
        })

    </script>
</body>
</html>

正常来说，访问这个axiosDemo.html就能在后台输出username，并网页弹出hello语句，但我这里，可能浏览器的原因，弹不出来

用axios实现注册页面鼠标移开用户名输入框即可验证用户名是否存在
后台还是之前的后台，但script部分改写，建一个新的axios_register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body id="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/fakeCheckCode.jpg">
                    <a href="#" id="changeImg">看不清？</a>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn" />
        </div>
        <div class="buttons">
            <input value="发送异步请求" type="button" id="btn" />
        </div>
        <br class="clear">
    </form>

</div>
<script src="/js/axios-0.18.0.js"></script>
<script>
    document.getElementById("username").onblur = function (){

        var username = this.value

        axios.get("http://localhost:8080/AJAX_Demo/checkUserExistServlet?username="+username).then(function (resp){
            if (resp.data == true){
                document.getElementById("username_err").style.display = ''
            }else {
                document.getElementById("username_err").style.display = 'none'

            }
        })

        // axios.post("http://localhost:8080/AJAX_Demo/checkUserExistServlet","username="+username).then(function (resp){
        //     if (resp.data == true){
        //         document.getElementById("username_err").style.display = ''
        //     }else {
        //         document.getElementById("username_err").style.display = 'none'
        //     }
        // })

    }
</script>
</body>
</html>

这代码有问题，我不管怎么写 if判断的条件，也不能像原来xmlhttp写的那样，实现鼠标移出，用户名已占用的提示

PeterWarne
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax里的data的用法,Jquery中ajax方法data参数的用法
weixin_31710909的博客
08-05 4388
$.ajax({type: "POST",url: "some.php",data: "name=John&location=Boston", //第一种方式传参// data: {name:"John",location:"Boston"} //第二种方式传参// data: {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'...
vue-02
Anolzo
01-20 825
侦听器 watch侦听器 watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 const vm=new Vue({ el:'#app', data:{username:''}, watch:{ //监听username值的变化 //newVal 是“变化后的新值”，oldVal 是“变化之前的旧值” username(newVal,oldVal){ alert(newVal,oldVal
axios的大神跨域的配置
qq_41834059的博客
08-06 6785
'use strict' import axios from 'axios' import qs from 'qs' axios.interceptors.request.use(config =&gt; { // loading return config }, error =&gt; { return Promise.reject(error) }) axio...
关于Axios中的请求方式别名中的get和post方法中函数变量的类型
qq_45210508的博客
02-07 622
Axios中的请求方式别名中的get和post方法中的参数使用前要进行类型转换
Janus源码分析（3）——请求处理过程
点点滴滴
07-02 5990
从源码，分析Janus内部代码一个请求从接收到处理的完整过程及对应代码。
smsListener.rar_Radio_SMSListener_radio java_sms listener_广播接收
09-23
本文将详细解析"Radio_SMSListener_radio java_sms listener_广播接收"这一主题，以及如何创建并使用一个短信监听器。 首先，我们要明白标题中的"Radio_SMSListener"可能是指一个用于接收和处理短信的广播接收者，...
toolbar_view.rar_The Listener
09-14
Create the contents of the Browser Toolbar.Add a listener to receive a callback when the menu opens.
jpct-ae.zip_3d游戏_JPCT_android 3D_jpct listener_游戏
最新发布
09-23
在JPCT-AE中，"jpct listener"指的是事件监听机制，它允许开发者对用户交互、游戏状态变化等进行实时响应。例如，通过监听触摸屏事件，可以实现角色移动、视角转换等功能，提供流畅的用户体验。 五、游戏开发流程 ...
12_JavaWeb——Filter&Listener案例资源
05-02
此资源与我的博客12_JavaWeb——Filter&Listener中的案例对应，在11_JavaWeb——Cookie&Session案例资源基础上加上了过滤器，实现了对未登录用户的拦截，希望有所帮助。
debug-event-listener.rar_The Listener
09-21
例如，你可以使用`Debug.setListener`方法来设置一个全局的调试事件监听器。这个监听器函数会在每个源代码行执行之前被调用，允许你检查执行上下文，甚至改变执行流程。这样的功能在跟踪性能瓶颈或寻找未预期的行为...
ajax异步验证用户名是否存在
08-07
ajax异步验证用户名是否存在，非常小巧的实例，需要安装oracle数据，建立一个用户表，实例中有用户表的实体，可以仿照写一个数据库。
vue+axios新手实践实现登陆的示例代码
12-11
其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记 用到的：1、 vuex 2、axios 3、vue-route 登陆流程为： 1、提交登陆表单，拿到后台返回的数据 2、将数据存入vuex vuex配置 这里直接跳过安装之类的，百度一大堆，我直接上代码 // store index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 初始化时用sessionStore.getItem('token'),这样子刷新页面就无需重新登录 const state = { user:
axios的response.data
weixin_44325325的博客
06-30 6755
今天开发时，使用axios返回的response中data有多个数据： 如果是获取cn里的数据的，可以用： response.data.cn 1 但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 1 2 3 这样发现获取不到数据，这是因为vue.js把dkey当成data里的某一个key了，类似于上面的"cn"。 折腾了很久才突然想起，这个d
138-145(itheima):ajax、验证用户是否存在、Axios、json、json和（java、js）对象转换、查询所有展示前端、新增品牌
m0_45209551的博客
04-06 1146
3，Ajax 3.1 概述 ==AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。== 我们先来说概念中的 JavaScript 和 XML，JavaScript 表明该技术和前端相关；XML 是指以此进行数据交换。而这两个我们之前都学习过。 3.1.1 作用 AJAX 作用有以下两方面： 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。如下图 我们先来看之前做功能的流程，如下图
ajax 验证用户名是否已存在
程序人生
11-06 1万+
ajax验证用户名是否已存在ajax验证用户名是否已存在 ，一般选用的是同步请求，因为验证用户是否存在的同时， 一般还要验证用户名是否为空等表单验证。jsp页面以及ajax验证如下：&lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;UTF-8&quot;%&gt; &lt;% String path = req
后台返回这样的数据"response_data" = "<null>",应该怎么判断
weixin_33798152的博客
11-09 2531
2019独角兽企业重金招聘Python工程师标准>>> ...
返回类RESp封装
wcuu的博客
01-09 1917
import java.io.Serializable; import java.util.Map; public class Resp<T> implements Serializable { private static final long serialVersionUID = 1L; private final static String SUCCES...
Vue.js使用axios动态获取response里的data数据
热门推荐
轻功水上喵丶的博客
07-03 2万+
今天开发时，使用axios返回的response中data有多个数据： 如果是获取cn里的数据的，可以用： response.data.cn 但是需求是根据选择来获取数据的，会发生变化，最开始的想法是，用一个变量来记录需要获取的key: 假设need是需要获取的某个key const dkey = this.need; response.data.dkey 这样发现获取不到数据，这是因为v...
判断response.data是否为空
weixin_33720078的博客
07-24 1761
需要对response.data进行判断，是否有数据返回。如果是空的，将要处理一些事情，反之，又要处理另外一些事情。在jQuery程序中，有一个方法：$.isEmptyObject()。此方法在angularjs环境之下亦可以使用。   下面的演法，如果有数据反回，表格将显示，反之，表格头将隐藏。  ...
ST_Geometry在Oracle中的配置与使用指南
"这篇文档是关于ST_Geometry在ArcGIS GeoDatabase中的配置和使用的大全，涵盖了配置、存储结构、创建要素类以及SQL函数的详细介绍。" ST_Geometry是Esri公司地理信息系统（GIS）中用于处理空间数据的一种数据类型，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值