在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异步框架https://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>



<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 的资源就属于跨域。

解决跨域问题的方法

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

跨域资源共享（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));