Http请求响应 Ajax 过滤器

10/10/2023

近期总结：

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

一、HTTP请求

从前端网页中可以向后端发送HTTP请求：
1，在浏览器地址栏输入后端地址；

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

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

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

http请求方式：

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

http请求方法：


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响应方法：


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文件，编写专门处理编码问题的代码。


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文件，这样过滤器才能被读取）


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

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

1，同步方式

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

2，异步方式（不同步）

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

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

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

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


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>
<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>

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


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


    <filter>
        <filter-name>corssfilter-name>
        <filter-class>com.ffyc.webserver.filter.CorsFilterfilter-class>
    filter>
    <filter-mapping>
        <filter-name>corssfilter-name>
        <url-pattern>/*url-pattern>
    filter-mapping>

相关阅读:
教育在线学习系统，教育培训都能用，支持多个终端
 API阶段测试
 Python爬虫零基础入门教程
 Gin vs Beego: Golang的Web框架之争
 3. 该微信用户未开启“公众号安全助手”的消息接收功能，请先开启后再绑定
 Apache初体验
 【文本分类】《融合知识感知与双重注意力的短文本分类模型》
关于Flask_运行导入Flask的py文件的两种方式
 Spring 容器加载Bean过程分析
 Spring面试（源码手撕）
原文地址：https://blog.csdn.net/m0_71385141/article/details/133756538