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>
相关推荐
小蜜蜂嗡嗡6 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼8 分钟前
如何简单使用 prompt
前端·aigc
cdbqss113 分钟前
VB.net编写的身份证类
前端·.net
钢铁男儿14 分钟前
C# 接口(什么是接口)
java·数据库·c#
丶小鱼丶27 分钟前
排序算法之【归并排序】
java·排序算法
上上迁29 分钟前
分布式生成 ID 策略的演进和最佳实践,含springBoot 实现(Java版本)
java·spring boot·分布式
永日4567030 分钟前
学习日记-spring-day42-7.7
java·学习·spring
骑自行车的码农31 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky35 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克40 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf