前言
本文将讲解在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>
<!-- 导入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 的资源就属于跨域。
解决跨域问题的方法
-
前端解决
-
后端解决:在响应时,告知浏览器允许来自于某些指定服务响应的内容,浏览器认为其是安全可靠的
-
跨域资源共享（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));
