HTTP请求


▐ http超文本传输协议:

 ⦁  http超文本传输协议属于应用层协议,传输内容必须是超文本内容 (网页内容)

 ⦁  例如在网页上点击超链接,提交表单,都可以向后端发送一个http请求

 ⦁  一次http请求中包含请求行、请求头、请求体

请求行:包含请求方式(get/post)请求的资源(地址)...浏览器自动发送的

请求头:包含客户端的一些环境信息(浏览器版本、客户端ip...)

请求体:包含post请求向后端发送的数据

 

 get 请求和post 请求:

 ⦁ http请求分为get请求和post请求:

get:   超链接发送的默认是get 主要用于从后端获取数据,也可以向后端传递少量数据。

 ⦁ 发送的数据在请求地址中包含,不在请求体中,发送的数量会有限制,也不安全

post :表单 method=“post” 主要是从前端向后端发送数据的。

 ⦁ 数据不在地址栏中,在请求体中,可以发送大量数据且相对get方式更安全

▐ 一次请求的流程:

 服务器调我们的第程序这一步不用管,专门写服务器的人员已经写好了

过滤器


 过滤器概念:

过滤器是JavaEE中对请求和响应进行拦截的技术,通过定义一个类并实现Filter接口,可以让某些请求地址在到达servlet之前进入到指定的过滤器中,从而实现统一的处理,例如编码过滤、权限验证等进行统一过滤。

 ⦁  一个过滤器可以配置给多个资源使用

 ⦁  一个资源也可以配置多个过滤器,按照配置顺序调用

 

 过滤器的作用:

 ⦁  将前端发送的请求先进入指定过滤器进行“筛选”,或者设置公共的属性、配置、进行公共处理.

      提高代码复用性,提高可维护性     

 ⦁  可进行逻辑判断,若不满足条件,直接响应前端无需进入Servlet处理程序 " 请求拦截 "

 具体实现步骤:

Servlet 的API中提供了一个Filter接口,开发web应用时,如果编写的Java类实现了这个接口,则把这个java类称之为过滤器Filter。通过Filter技术,开发人员可以实现用户在访问某个目标资源之前,对访问的请求和响应进行拦截。

第一步:新建一个包,结合类名,让这个类实现 Filter接口.

由于过滤器是一个独立的功能,所以我们需要新建一个包(Filter),这里我们以创建一个编码过滤器为例,注意命名规范,以Filter结尾

< 注意是 java.servlet .* 这个包里的 Filter接口 >

第二步:重写 Filter接口中的抽象方法.

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

public class EncodingFilter implements Filter {
    /*
    初始化过滤器
     */
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }
    /*
     执行过滤器操作的方法
     */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

    }
    /*
    过滤器销毁时执行
     */
    @Override
    public void destroy() {

    }

}

补充: 

 这里其实只重写 doFilter方法就可以了,init 和destory是默认方法且我们日常学习阶段很少用到 , init 和 destory会默认调用父类的方法 。

 第三步:在 doFilter方法中设置字符集,并让过滤器继续向后执行.

  将下图代码写在 doFilter方法中:

        //设置请求编码集
        servletRequest.setCharacterEncoding("utf-8");
        //设置响应编码集
        servletResponse.setContentType("text/html;charset=utf-8");
        //让请求离开过滤器继续向下执行,下一个可能是过滤器或目标访问的servlet
        filterChain.doFilter(servletRequest,servletResponse);

  参考下图: 

第四步:在web.xml文件中配置过滤器.

 把 servlet标签换成 filter标签即可,可参考下图代码

<!--    注册编码过滤器-->
    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>webserver.filter.EncodingFilter</filter-class>
    </filter>
<!--    配置哪些地址可以进入到编码过滤器-->
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>  <!-- /* 表示所有向后端发送的请求,都进入到编码过滤器中-->
    </filter-mapping>

通过编码过滤器的设置,我们就不需要在每个Servlet接收post请求时都设置解码字符编码了,前端发送的请求会先进入到我们的编码过滤器,可以提高代码的复用性

 

 同步与异步请求


同步与异步概述:

同步请求:当前端向后端发送请求时,此时客户端一切操作都会终止,服务器响应回来的内容会覆盖当前网页中的内容,等于一次只能做一件事,与服务器交互时其它事情就不能做了。

异步请求:当客户端与服务器交互时,不影响客户端页面的其他操作,同时可以做两件事情,服务器响应回来的内容不会覆盖整个页面

简单理解就是,同步 同时只能做一件事,异步 同时可以做多件事

现在的前后端交互都是异步的,由于页面不用覆盖,体验感更好。

如何实现发送异步请求?

原始方式是在前端用一个JS对象: XML httpRequest 发送请求并接受响应,但由于用原始方式发送异步请求十分麻烦,所以实际中我们通常采用 axios异步框架来实现发送异步请求.

️axios下载地址:axios-js.com

在五部分 ' axios框架 ' 会详细讲解 

 跨域问题


 什么是跨域?

 •  跨域是指从一个域名的网页去请求另一个域名的资源。

 •  比如从 www.baidu.com页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略 造成的,是浏览器对 JavaScript 施加的安全限制。

 •  跨域的严格一点的定义是:只要协议域名端口有任何一个的不同,就被当作是跨域。

 •  所谓同源是指:域名,协议,端口均相同,只要有一个不同,就是跨域。

▐ 为什么要跨域访问?

由于现在的前后端分离开发,前端和后端各自在不同的服务站,同一家公司不同项目之间要交互,比如一个location.company.com,而应用是放在app.company.com,这时想从app.company.com去访问location.company.com的资源就属于跨域。

▐ 浏览器为什么要阻止跨域访问?

为了安全,不能让其他服务器的内容肆意的响应到自己的服务中

▐ 如何解决跨域问题?

可以在前端解决,也可以在后端解决,这里我将以后端为例解决(毕竟我是后端程序员哈哈哈)

后端解决就是在响应时,告知浏览器允许来自于某些指定服务响应的内容,让浏览器认为其是安全可靠的。

具体操作如下:

在后端添加一个过滤器,这样后端在向前端响应时,告诉浏览器我们本次响应是安全的 

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(urlPatterns = "/*")
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);
    }
}

 

  axios框架


 •  axios框架是来实现发送异步请求的

️axios下载地址:axios-js.com

如果前端是Vue项目,我们在控制台输入 npm install axios 命令安装即可, 若node_modules中出现axios文件夹就表名安装成功

 • 这里我以一个普通的前端html为例,Vue项目的做法稍后会讲解...

 • 在官网中将axios.min.js 文件下载到桌面,拖到js文件夹下并导入即可。

其他的用法请参考axios官方文档! 

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部