Javaweb入门系列8、Filter&Listener&Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/A9266a/article/details/129104296

文章介绍了JavaWeb中的Filter过滤器，用于拦截和处理请求，实现权限控制等功能；Listener监听器，监听session和application等对象的状态变化；以及Ajax技术，用于前端与后端的异步数据交互，提高用户体验。同时，文章提到了使用axios和JSON进行前后端数据交换的方式。

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

1.Filter

表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。过滤器可以把对资源的请求==拦截==下来，从而实现一些特殊的功能。

@WebFilter("/*")//拦截路径
publicclassFilterDemoimplementsFilter {

    @Override
    publicvoiddoFilter(ServletRequestrequest, ServletResponseresponse, FilterChainchain) throwsIOException, ServletException {
       
        放行前
HttpServletRequestreq= (HttpServletRequest) request;
        
        
        //判断访问资源路径是否和登录注册相关
//1,在数组中存储登陆和注册相关的资源路径
String[] urls= {"/login.jsp","/imgs/","/css/","/loginServlet","/register.jsp","/registerServlet","/checkCodeServlet"};
//2,获取当前访问的资源路径
Stringurl=req.getRequestURL().toString(); 

//3,遍历数组，获取到每一个需要放行的资源路径
for (Stringu : 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
        HttpSessionsession=req.getSession();
        Objectuser=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);
        
        放行后
    }

    @Override
    publicvoidinit(FilterConfigfilterConfig) throwsServletException {
    }

    @Override
    publicvoiddestroy() {
    }
}

2.Listener

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

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

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

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

ServletContextListener 接口中有以下两个方法

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

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

@WebListener
publicclassContextLoaderListenerimplementsServletContextListener {
    @Override
    publicvoidcontextInitialized(ServletContextEventsce) {
        //加载资源   以后在里面会加载spring框架
        System.out.println("ContextLoaderListener...");
    }

    @Override
    publicvoidcontextDestroyed(ServletContextEventsce) {
        //释放资源
    }
}

3.Ajax

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

我们先来说概念中的 JavaScript 和 XML，JavaScript 表明该技术和前端相关；XML 是指以此进行数据交换。而这两个我们之前都学习过。

AJAX 作用有以下两方面：

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

我们先来看之前做功能的流程

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

ajax代码：

<!DOCTYPEhtml>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    //1. 创建核心对象
    varxhttp;
    if (window.XMLHttpRequest) {
        xhttp=newXMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp=newActiveXObject("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>

//1. 给用户名输入框绑定 失去焦点事件
    document.getElementById("username").onblur=function (){

        var username=this.value();

        var xhttp;
        if (window.XMLHttpRequest){
            xhttp=new XMLHttpRequest();
        }else{
            //code for IE6,IE5
            xhttp=new ActiveXObject("Microsoft.XMLTYPE");
        }

        alert("我在这里3");
        //建立连接

        xhttp.open("GET","http://localhost:8080/MyWeb_war/registerServlet?username="+username);
        //发送请求
        xhttp.send();
        alert("我在这里4");
        xhttp.onreadystatechange=function (){
            alert("我在这里5");
            if(this.readyState==4&&this.status==200){
                alert("我在这里2");
                if (this.responseText=="true"){
                    document.getElementById("username_err").style.display='';
                }else {
                    document.getElementById("username_err").style.display='none';//用户名不存在
                }

            }
        };
    }

4.总结

前端后端交互最方便就是使用axios和JSON，只需要在HTML页面下就行

//后端接受和传递JSON
//接收
 BufferedReader reader=request.getReader();
        String str=reader.readLine();
        Household household=JSON.parseObject(str,Household.class);
//传递
 String jsonstr= JSON.toJSONString(households);
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonstr);

//前端接收和传递JSON
    document.getElementById("bu").onclick=function (){
  var hold={
    room_number:"",
    name:"",
    phone:"",
    check_in:"",
    check_out:""
  }
  hold.room_number=document.getElementById("room-number").value;
    hold.name=document.getElementById("name").value;
    hold.phone=document.getElementById("phone").value;
    hold.check_in=document.getElementById("check-in").value;
    hold.check_out=document.getElementById("check-out").value;

    axios({
    method:"post",
    url:"http://localhost:8080/Muweb1_war/RoomServlet",
    data:hold
}).then(function (resp) {
    let households=resp.data;
    for (let i=0;i<households.length;i++){
    let hold=households[i];
    let newRow = "<tr><td class='room'>"+hold.room_number+"</td>";

    for (let i = 1; i < 32; i++) {
    if (parseInt(hold.check_in)<=i&&i<parseInt(hold.check_out)){
    newRow += "<td class='booked'>客房</td>";
}else {
    newRow += "<td class='available'>空房</td>";
}
}
    newRow += "</tr>";
    $("#room-table tbody").append(newRow);
}
})