在java中前后端进行交互使用的内容

前言

  本文将讲解在java前后端进行交互时会使用的内容, 

过滤器 ,

前后端交互时:

同步请求(了解)与异步请求,             后端响应json格式数据,         后端标准响应数据格式

过滤器

首先需要了解什么是过滤器:

        过滤器是javaEE中在前向后端发送请求时进行拦截的技术,作用是:可以让某些请求地址在到servlet之前进入到指定的过滤器中,从而实现统一处理,例如统一编码过滤  权限执行,跨域过滤等

        Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过 Filter技术,对web服务器管理的所有web资源:例如Servlet, 从而实现一些特殊的功能。例如实现URL级别的权限访问控制、过滤敏感词汇、压缩响应信 息等一些高级功能。

        作用:对服务器web资源进行拦截(权限控制,通过拦截资源进行权限控制, 是否可以访问)

        过滤器的搭建: Servlet API中提供了一个Filter接口,开发web应用时,如果编写的Java类实 现了这个接口,则把这个java类称之为过滤器Filter。

public class EncodFilter implements Filter {}

 Servlet API 中,与过滤器有关的API共有三个接口,分别是

         Filter

         FilterChain

         FilterConfig

Filter接口是过滤器类必须实现的接口,该接口中有三个方法。

        init(FilterConfig filterConfig):该方法是对filter对象进行初始化 的方法,仅在容器初始化filter对象结束后被调用一次。参数 FilterConfig可以获得filter的初始化参数。

         doFilter(ServletRequest request, ServletResponse response, FilterChain chain):该方法是filter进行过滤操作的方法,是最重要的方法。过滤器实现类必须实现该方法。方法体中可以对request 和response进行预处理。其中FilterChain可以将处理后的request 和response对象传递到过滤链上的下一个资源。

         destroy():该方法在容器销毁过滤器对象前被调用

在实现Filter接口时,这三个方法在jdk8之后只需要实现其中一个即可

在实现这些方法前 我们需要再web.xml文件中配置一个过滤器

<web-app>
<!--  配置统一编码过滤器  -->
    <filter>
        <filter-name>EncodFilter</filter-name>
        <filter-class>com.zhu.dormServer.filter.EncodFilter</filter-class>
        <init-param>
            <param-name>requestcod</param-name>
            <param-value>utf-8</param-value>
        </init-param>
        <init-param>
            <param-name>responsecod</param-name>
            <param-value>text/html;charset=utf-8</param-value>
        </init-param>
    </filter>

 <!--  配置通过编码过滤器的地址  -->
    <filter-mapping>
        <filter-name>EncodFilter</filter-name>
<!--        <url-pattern>/demo</url-pattern>-->
<!--        <url-pattern>/login</url-pattern>-->
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

配置好后init()方法可以将请求和响应进行编码初始化,

FilterConfig该接口类型作为Filter接口中的init方法的参数使用,FilterConfig接口 中有一个常用方法 getInitParameter(String name),该方法用来获得过滤器的初始化参数值。在web.xml中,可以为每一个filter配置需要的初始化参数,与Servlet的类似。过滤器的初始化参数即可通 过FilterConfig中的getInitParameter方法获取。

@Override
public void init(FilterConfig filterConfig) throws ServletException {
    //System.out.println("编码初始化");
    String request = filterConfig.getInitParameter("requestcod");
    String response = filterConfig.getInitParameter("responsecod");
}

而doFilter()方法则是用来实现过滤操作的方法,

FilterChain该接口类型作为Filter接口中doFilter方法的参数使用。FilterChain接口中有一个方法  doFilter(ServletRequest request,ServletResponse response), 该方法可以将当前的请求和响应传递到过滤链上的下一个资源,可能 是下一个过滤器,也可能是目标资源。

@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    System.out.println("编码过滤器");
    servletRequest.setCharacterEncoding(request);//设置请求数据编码格式
    servletResponse.setContentType(response);//设置响应数据编码格式
    //让请求离开当前的过滤器,继续向后运行
    filterChain.doFilter(servletRequest, servletResponse);
}

过滤器的使用场景

在多个资源需要进行同一个步骤更改时

一个资源也可以配置多个过滤器,按照配置顺序调用

同步操作和异步操作

同步:

        同时只能做一件事

同步请求

        当前端向后端发送请求时,此时客户端一切操作都会终止,服务器响应回来的内容会覆盖当前网页中的内容,一次只能做一件事,与服务器交互时其他事情就不能做了

异步:

        与同步相反,可以同时做多件事

异步请求

        当客户端与服务器交互时,不影响客户端页面的其他操作,同时来做两件事情,服务器响应回来的内容不会覆盖整个页面

如何实现异步请求

1,原始的方法

        在前端用一个js对象XMLhttpRequest 发送请求  接收响应

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function checkAccount(account){
                //异步请求,使用js对象发送请求
                var httpobj = new XMLHttpRequest();
                //封装请求地址和数据
                    httpobj.open("get","http://127.0.0.1:8088/dormServer/reg?account="+account,true);
                //发送请求
                    httpobj.send();
                //接收响应
                httpobj.onreadystatechange = function(){
                    document.getElementById("msgid").innerText = httpobj.responseText;//获得响应的内容
                }
            
            }
        </script>
    </head>
    <body>
    </body>
</html>

2,用异步框架

        axios异步框架

        下载地址       axios异步框架icon-default.png?t=N7T8https://unpkg.com/axios/dist/axios.min.js        复制地址在浏览器中打开会出现

        右键单击另存为保存在桌面

 将该文件复制粘贴到js目录中

进行引用

 <script src="js/axios.min.js"></script>

 代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 导入axios框架 -->
        <script src="js/axios.min.js"></script>
        <script>
            function checkAccount(account){
            axios.get("http://127.0.0.1:8088/dormServer/reg?account="+account)
              .then((resp)=> {
                console.log(resp);
                document.getElementById("msgid").innerHTML = resp.data;
              });
            }
        </script>
    </head>
    <body>
    </body>
</html>

在前后异步交互时会出现跨域问题

 跨域问题

不同服务器件进行访问,浏览器不允许js接收来自其他服务器响应的数据

跨域:

是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。

跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域.

所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域.

但为什么浏览器要限制跨域访问呢? 

        原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。

为什么要跨域?

        既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

解决跨域问题的方法

  1. 前端解决

  2. 后端解决:在响应时,告知浏览器允许来自于某些指定服务响应的内容,浏览器认为其是安全可靠的

  3. 跨域资源共享(CORS)

    W3C 的 Web 工作组推荐了一种新的机制,即跨域资源共享(Cross-origin Resource Sharing),简称CORS。其实这个机制就是实现了跨站访问控制,使得安全地进行跨站数据传输成为可能。

    服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许异步进行跨域的访问。

    只需要在后台中加上响应头来允许域请求!在被请求的Response header中加入设置,就可以实现跨域访问了!

    创建过滤器实现后端设置允许跨域访问:(代码展现)

    package com.zhu.dormServer.filter;
    
    import javax.servlet.*;
    import javax.servlet.annotation.WebFilter;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebFilter(urlPatterns = "/*")
    public class CorsFilter implements Filter {
        public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
                throws IOException, ServletException {
            HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
            HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
            //允许携带Cookie时不能设置为* 否则前端报错
            httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
            httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
            httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
            httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
    
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }

 后端响应json格式数据

json          JavaScript object Notation javaScript对象表示法

两种不同的语言之间如何进行数据交互

json是一种公认的js识别的对象表示方式,对于java而言就是一种特定格式的字符串

json就是一种固定格式的字符串

后端标准响应数据格式

代码实现

PrintWriter writer = resp.getWriter();//resp指响应
ObjectMapper objectMapper = new ObjectMapper();
String jsonstr = objectMapper.writeValueAsString(students);
writer.print(jsonstr);//打印响应一个学生对象

更简洁

 resp.getWriter().print(new ObjectMapper().writeValueAsString(students));
  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值