JavaEE：http请求 | 同步与异步请求 | 跨域问题 | axios框架 有这一篇就够！

前言

HTTP请求是现代Web开发中前后端沟通的基础。在开发过程中，开发者面临同步与异步请求的选择、跨域问题的挑战以及选择合适的HTTP库等问题。同步请求简单却往往阻塞用户界面，而异步请求能提高效率但增加复杂性。跨域问题则源自浏览器的同源政策，常常需要特定的解决方案。

在众多HTTP库中，axios因其简单易用和功能丰富而受到欢迎。它支持Promise，适合异步请求，同时内置了请求和响应拦截器、请求取消和JSON数据处理等功能。

本文将讨论HTTP请求的原理、同步与异步请求的利弊、跨域问题的解决方法，以及如何高效使用Axios框架。希望读者能更好理解HTTP请求并在开发中灵活应用。

▋Http请求

 http超文本传输协议,属于应用层协议,传输的内容是超文本内容（网页内容)

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

一次http请求中包含:请求行 请求头 请求体

请求行：包含请求方式（get/post） 请求的资源地址......... 浏览器自动发送

请求头：包含客户端的一些环境信息（浏览器的版本 客户端ip........）

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

get请求和post请求

get请求:主要用于从后端获取数据,也可以向后端传输少量的数据

-->发送的数据在请求地址中包含,不在请求体中,发送的数量会有限制,也不安全(超链接发送默认的是get请求)

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

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

▐  一次响应的流程

▋同步请求

1. 当网页与后端交互时,前端不能在进行其他操作.
2. 服务器端相应回来的内容,会把整个浏览器的内容覆盖掉

同步请求,当后端往前端返回数据会在一个新的网页呈现

▋异步请求

1. 我们同时做多件事情(前端与服务器交互,不影响前端网页其他操作)
2. 使用js中提供的XML HttpRequest对象实现发送起步请求和接受服务器响应

简单理解:同步请求只可以做一件事情,异步请求可以同时做多件事情

 ▐ 如何实现异步请求

原始的方法是在前端用一个js的对象:XML httpRequest 发送请求并接受响应,但是由于原始方法十分麻烦,所以axios封装这个方法,我们现在一般使用axios异步框架来实现异步请求

原始方法

				//创建请求对象
				var httpobj = new XMLHttpRequest();
				httpobj.open("get","http://127.0.0.1:8088/dormSever/check?account="+account);//请求封装
				httpobj.send()//发送请求

				//执行回调函数  接受响应结果
				httpobj.onreadystatechange = function(){
				 document.getElementById("msg").innerHTML = httpobj.responseText;//后端相应的内容
				}

axios框架下面会详细介绍

🖇️axios下载地址：axios-js.com

▌跨域问题

☞什么是跨域?

• 跨域是指从一个域名的网页去请求另外一个域名的资源
• 跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域
• 所谓同源是指：域名，协议，端口均相同，只要有一个不同，就是跨域

☞为什么要跨域?

例如:腾旭公司有许多产品,但是所有产品都可以使用微信登录,这里就存在跨域.我们不可能研发一个产品就研发一个登录方式.

我们有时需要在A域中访问B域,从而接受B域的响应(这就是跨域)

☞浏览器为什么要阻止跨域访问？

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

☞ 如何解决跨域问题?

前端与后端均可解决  这里以后端为例

解决方法:在数据向前端响应的时候,从而告诉前端这段数据是安全的即可.

➱具体操作如下：

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

package com.kid.dormServer.filter;

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 {
        System.out.println("跨域过滤器");
        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框架是来实现发送异步请求的

 原始的前端项目

1. 在官网中将axios.min.js 文件下载到桌面，拖到js文件夹下并导入即可
2. 文件地址https://unpkg.com/axios/dist/axios.min.js

 在vue项目中我们可以直接使用指令安装（ npm install axios）

---

---

 感谢大家的观看，本次分享就到这里。希望我的内容能够对您有所帮助。创作不易，欢迎大家多多支持，您的每一个点赞都是我持续更新的最大动力！如有不同意见，欢迎在评论区积极讨论，让我们一起学习、共同进步！如果有相关问题，也可以私信我，我会认真查看每一条留言。期待下次再见！

                                       希望路飞的笑容可以治愈努力路途中的你我!

博主vx:Dreamkid05 --->欢迎大家和博主讨论问题