Http请求响应 Ajax 过滤器

10/10/2023

近期总结：

最近学的后端部署，web服务器运行，各种请求响应，内容很多，学的很乱，还是需要好好整理，前面JavaSE内容还没有完全掌握，再加上一边刷题，感觉压力很大哈哈。看群友们都在说找工作难，又会被打击，不过感觉一切都以实力说话，提升自己比什么都有说服力，继续加油！

一、HTTP请求

从前端网页中可以向后端发送HTTP请求：

1，在浏览器地址栏输入后端地址；

2，超链接向后端发送http请求；

3，表单向后端发送http请求。

一个http请求包括：请求头，请求行，请求体

http请求方式：

POST请求（从客户端向后端发送大量数据。数据在请求体中存放，相对安全，数据无大小限制）
GET请求（向后端发送请求，携带少量数据，从后端获取大量数据，不安全，传输数据量有限，1~2Kb）

http请求方法：

java 复制代码

servletRequest.setCharacterEncoding("utf-8");//设置请求正文的字符编码。它确保服务器使用 UTF-8 字符编码正确解释传入数据
String account=req.getParameter("account");//接收请求中我们自己提交的数据
req.getMethod();//获得请求方法
req.getRequestURL();//获得客户端请求地址
req.getHeader();//获得请求头
req.getRemoteAddr();//获得客户端ip

二、HTTP响应（响应行响应头响应体）

响应状态码

200 请求成功

404 请求资源不存在

500 服务器内部错误（代码异常）

http响应方法：

java 复制代码

servletResponse.setContentType("text/html;charset=utf-8");//不仅发送到浏览器的内容会使用UTF-8编码，而且还通知浏览器使用UTF-8编码方式进行显示
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

三、过滤器（Filter）

作用：在请求进入到Servlet之前，让请求进入过滤器进行统一处理。

例如：可以对编码进行统一处理（请求，响应），可以对权限验证进行统一处理....

以对编码处理过滤为例：

1，创建一个专门编写过滤器的文件夹，创建.java文件，编写专门处理编码问题的代码。

java 复制代码

import javax.servlet.*;
import java.io.IOException;

public class Encoding implements Filter {

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        servletRequest.setCharacterEncoding("utf-8");//设置请求正文的字符编码。它确保服务器使用 UTF-8 字符编码正确解释传入数据
        servletResponse.setContentType("text/html;charset=utf-8");//不仅发送到浏览器的内容会使用UTF-8编码，而且还通知浏览器使用UTF-8编码方式进行显示
        filterChain.doFilter(servletRequest,servletResponse);//继续向后执行，后一个可能是下一个过滤器，也可能是Servlet
    }
}

2，对web.xml进行配置，为什么要配置web.xml（原因很简单，因为每次启动servlet时，服务器都会首先读取web.xml文件，这样过滤器才能被读取）

XML 复制代码

<filter>
        <filter-name>Encoding</filter-name>
        <filter-class>com.ffyc.webserver.filter.Encoding</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>Encoding</filter-name>
        <url-pattern>/*</url-pattern>
<!--        /*代表所有地址均可进入过滤器   -->
    </filter-mapping>

四、前端向后端发送请求方式：

1，同步方式

在前端向后端发送请求后，后端返回的内容会打断前端用户操作。

2，异步方式（不同步）

后端响应回来的内容不会打断前端用户操作

异步请求已经成为前后端交互的标配

如何从前端向后端发送异步请求？

1，使用原生的js发送异步请求

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/axios.min.js"></script>
	<body>
		<form method="post">
			<input type="text" placeholder="账号" name="account" onblur="checkAccount(this.value)"><span id="msgid"></span><br>
			<input type="password" placeholder="密码" name="password"><br>
			<input type="submit" value="登录"/>
			
		</form>
		<script>
			function checkAccount(account){
				var reqobj=new XMLHttpRequest();
					reqobj.open("get","http://localhost:8088/webServer/LoginServlet?account="+account);//准备请求
					reqobj.send();//发送请求
					reqobj.onreadystatechange=function(){
						document.getElementById("msgid").innerHTML=reqobj.responseText;
					}
			}
		</script>
	</body>
</html>

2，使用ajax框架（网络请求库）例如axious

Ajax：可以无刷新状态更新页面，解决了打断前端用户操作的问题，实现了异步提交。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script src="js/axios.min.js"></script>
	<body>
		<form method="post">
			<input type="text" placeholder="账号" name="account" onblur="checkAccount(this.value)"><span id="msgid"></span><br>
			<input type="password" placeholder="密码" name="password"><br>
			<input type="submit" value="登录"/>
			
		</form>
		<script>
			function checkAccount(account){
				   axios.get("http://localhost:8088/webServer/LoginServlet?account="+account).then(a=>{
				 	document.getElementById("msgid").innerHTML=a.data;
				 })
			}
		</script>
	</body>
</html>

注意：记得在后端添加过滤器

java 复制代码

package com.ffyc.webserver.filter;

import javax.servlet.*;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


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);
    }
}

配置web.xml

XML 复制代码

    <filter>
        <filter-name>corss</filter-name>
        <filter-class>com.ffyc.webserver.filter.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>corss</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>