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 {@Overridepublic 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>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发送异步请求

<!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:可以无刷新状态更新页面,解决了打断前端用户操作的问题,实现了异步提交。

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

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

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");//是否携带cookiefilterChain.doFilter(servletRequest, servletResponse);}
}

配置web.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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/130318.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python接口自动化测试之token参数关联

前言 在做自动化接口测试时&#xff0c;有时候会遇到token的动态关联&#xff0c;例如查询余额接口&#xff0c;需要关联登录接口的token动态值&#xff0c;如何利用python脚本进行接口token关联呢?今天我们爱学习一下吧&#xff01; 一&#xff1a;获取登录接口返回的token…

【Java 进阶篇】CSS 选择器详解

CSS&#xff08;层叠样式表&#xff09;是一种用于描述网页上元素样式的语言。要想有效地使用CSS&#xff0c;了解CSS选择器是至关重要的&#xff0c;因为它们允许你选择要应用样式的HTML元素。在本文中&#xff0c;我们将详细介绍CSS选择器的各种类型和用法&#xff0c;以便你…

【每日一记】OSPF区域划分详讲、划分区域的优点好处

个人名片&#xff1a; &#x1f43c;作者简介&#xff1a;一名大二在校生&#xff0c;喜欢编程&#x1f38b; &#x1f43b;‍❄️个人主页&#x1f947;&#xff1a;小新爱学习. &#x1f43c;个人WeChat&#xff1a;hmmwx53 &#x1f54a;️系列专栏&#xff1a;&#x1f5bc…

3d环形图开发(vue3+vite+ts)

开发效果&#xff08;待完善&#xff09;&#xff1a; 技术支持&#xff1a; Echarts echarts-gl 安装&#xff1a; 注&#xff1a;echarts与echarts-gl版本需对应&#xff0c;可参考官网 pnpm add echarts4.9.0 echarts-gl1.1.2 组件封装&#xff1a; <template><…

归纳所猜半结论推出完整结论:CF1592F1

https://www.luogu.com.cn/problem/CF1592F1 场上猜了个结论&#xff0c;感觉只会操作1。然后被样例1hack了。然后就猜如果 ( n , m ) (n,m) (n,m) 为1则翻转4操作&#xff0c;被#14hack了。然后就猜4操作只会进行一次&#xff0c;然后就不知道怎么做下去了。 上面猜的结论都…

dockerfile lnmp 搭建wordpress、docker-compose搭建wordpress

-----------------安装 Docker--------------------------- 目前 Docker 只能支持 64 位系统。systemctl stop firewalld.service setenforce 0#安装依赖包 yum install -y yum-utils device-mapper-persistent-data lvm2 --------------------------------------------------…

第 366 场周赛 LeetCode 周赛题解

A 分类求和并作差 模拟 class Solution { public:int differenceOfSums(int n, int m) {int res 0;for (int i 1; i < n; i)res i % m ! 0 ? i : -i;return res;} };B 最小处理时间 排序&#xff1a;设四个 p r o c e s s o r T i m e processorTime processorTime 的元…

JavaScript 解决dayjs在周日获取当前周第一天显示下一周第一天问题

原因&#xff1a;默认情况下&#xff0c;Day.js 将星期天视为每周的第一天。 方法&#xff1a;判断当天是不是周日&#xff0c;如果是就减一周。 import dayjs from dayjs const weekday dayjs().day() const we weekday 0 ? 0 - 1 : 0 // dayjs().add(7, day)、da…

配置Hive使用Spark执行引擎

配置Hive使用Spark执行引擎 Hive引擎概述兼容问题安装SparkSpark配置Hive配置HDFS上传Spark的jar包执行测试速度对比 Hive引擎 概述 在Hive中&#xff0c;可以通过配置来指定使用不同的执行引擎。Hive执行引擎包括&#xff1a;默认MR、tez、spark MapReduce引擎&#xff1a; 早…

JRebel在IDEA中实现热部署 (JRebel实用版)

JRebel简介&#xff1a; JRebel是与应用程序服务器集成的JVM Java代理&#xff0c;可使用现有的类加载器重新加载类。只有更改的类会重新编译并立即重新加载到正在运行的应用程序中&#xff0c;JRebel特别不依赖任何IDE或开发工具&#xff08;除编译器外&#xff09;。但是&…

bert入门

bert是什么 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是一种自然语言处理&#xff08;NLP&#xff09;中的预训练模型&#xff0c;它是基于Transformer架构的一种深度学习模型。BERT的主要目标是在大规模文本语料库上进行预训练&a…

Maven 自动化构建

自动化构建定义了这样一种场景: 在一个项目成功构建完成后&#xff0c;其相关的依赖工程即开始构建&#xff0c;这样可以保证其依赖项目的稳定。 比如一个团队正在开发一个项目 bus-core-api&#xff0c; 并且有其他两个项目 app-web-ui 和 app-desktop-ui 依赖于这个项目。 …