Ajax和Filter过滤器详解【24/01/22】

原创于 2024-01-22 07:00:00 发布 · 551 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端 #javascript

本文详细介绍了Ajax的工作原理，如何创建和使用XMLHttpRequest对象进行异步请求，以及Ajax在避免页面刷新和提高用户体验中的作用。同时，还概述了Filter在Web应用中的实现步骤和配置，特别是与Servlet的配合使用。

Ajax

为什么要学习ajax？

我们在此之前使用servlet由客户端直接向服务端发送请求数据，每次发送数据都要刷新整个页面，这回导致当我们只需要刷新某个局部数据的时候，连同整个页面都会一起刷新，从而丢失之前的页面数据，而ajax就实现了局部刷新。

ajax的作用是什么？

        1.不刷新页面而更新网页(局部刷新)
        2.在页面加载后从服务器请求数据
        3.在页面加载后从服务器接收数据
        4.在后台向服务器发送数据

一如何使用Ajax

1.创建XMLHttpRequest对象

var httpRequest = new XMLHttpRequest() ; //大部分主流浏览器支持

var httpRequest = new ActiveXObject("Microsoft.XMLHTTP") ; //部分浏览器支持

所以为了防止浏览器不兼容的问题，我们先进行判断，再创建对应的对象：

<script type="text/javascript">

        var httpRequest;

        if(window.XMLHttpRequest) {

            //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
            httpRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject) {

            //在IE6以下的版本
            httpRequest = new ActiveXObject();
        }
 </script>

2.发送请求

            //创建http请求
            httpRequest.open("POST", "Servlet1", true);

            //因为我使用的是post方式，所以需要设置消息头
            httpRequest.setRequestHeader("Content-type", "application/x-www-form-                    
            urlencoded");

            //指定回调函数
            httpRequest.onreadystatechange = response22;

            //得到文本框的数据
            var name = document.getElementById("username").value;

            //发送http请求，把要检测的用户名传递进去
            httpRequest.send("username=" + name);

3.接收响应数据

<script>
<!--  先创建对象-->
  var httpRequest = new XMLHttpRequest() ;
  httpRequest.onreadystatechange = function (){
    //判断是否响应成功
    if (httpRequest.readyState==4&&httpRequest.status==200){
      //获取响应数据
      let msg = httpRequest.responseText ;
    //  得到了后端的响应结果msg 。 就可以把它应用到前端对应的数据中去
    }
  }
</script>

4.编写一个完整ajax程序

html代码：

创建的div只要用于显示服务器返回的数据用户点击按钮时，就触发事件。

<input type="text" id="username">
	<input type="button" onclick="checkUsername()" value="检测用户名是否合法">
	<div id="result">
	
	</div>

JavaScript代码：

创建XMLHttpRequest对象
创建http请求
把文本框的数据发送给http请求的目标
指定回调函数
编写回调函数
发送http请求
回调函数得到http返回的内容，把内容写在div上

 <script type="text/javascript">

        var httpRequest;
        function checkUsername() {

            if(window.XMLHttpRequest) {

                //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
                httpRequest = new XMLHttpRequest();
            }else if(window.ActiveXObject) {

                //在IE6以下的版本
                httpRequest = new ActiveXObject();
            }


            //创建http请求
            httpRequest.open("POST", "Servlet1", true);

            //因为我使用的是post方式，所以需要设置消息头
            httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            //指定回调函数
            httpRequest.onreadystatechange = response22;

            //得到文本框的数据
            var name = document.getElementById("username").value;

            //发送http请求，把要检测的用户名传递进去
            httpRequest.send("username=" + name);

        }

        function response22() {

            //判断请求状态码是否是4【数据接收完成】
            if(httpRequest.readyState==4) {

                //再判断状态码是否为200【200是成功的】
                if(httpRequest.status==200) {

                    //得到服务端返回的文本数据
                    var text = httpRequest.responseText;

                    //把服务端返回的数据写在div上
                    var div = document.getElementById("result");
                    div.innerText = text;
                }

            }
        }
    </script>

实现了局部刷新，不需要更新整个页面。

过滤器Filter

1.实现步骤

1.实现javax,servlet.filter接口

2.实现方法

public class AllFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("过滤器初始化...");

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
//       先强转成父类 ， 这样后面才能拿到请求头的信息 ， 如session
        HttpServletRequest request = (HttpServletRequest) servletRequest ;
        HttpServletResponse response = (HttpServletResponse) servletResponse ;
        servletRequest.setCharacterEncoding("UTF-8");
            servletResponse.setContentType("text/html;charset=utf-8");

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

//        根据登录信息存放在session中 ， 我们获取登录信息
        User user = (User) request.getSession().getAttribute("User");
        if(user==null){//说明没登陆
            //重定向到登录页面
        }else {
            //放行
        }
    }

    @Override
    public void destroy() {

    }
}

3.在web.xml文件中配置filter

 <filter>
        <filter-name>AllFilter</filter-name>
        <filter-class>com.fs.fillter.AllFilter</filter-class>
    </filter>
    
    <filter-mapping>
        <filter-name>AllFilter</filter-name>
<!--
        1.精准匹配：/LoginServlet（拦截LoginServlet请求被）
        2.模糊匹配：
            目录匹配：/cat/*  (拦截cat目录下所有资源)
            后缀名匹配：*.html  (拦截所有html资源)
                      *.do  (拦截所有servlet资源.do)
                      *  (拦截所有资源)
        注意：* 永远不能出现在中间
-->
        <url-pattern>/LoginServlet</url-pattern>
   </filter-mapping>