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.mzph.cn/news/100178.shtml

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