HTTP协议的解析

本人小白,如有错误,请大佬指出
初学HTTP,后续会一直更新,改错

一.什么是HTTP协议:

1. HTTP协议是W3C制定的一种超文本传输协议,是一种规范(就像JS语法,不遵守语法规范就会报错)

2. 我们想要使用HTTP必须要遵守W3C指定的规范

3. HTTP协议用于浏览器与服务器通信

4. HTTP协议就是一种通信模板

二.HTTP协议分类

HTTP协议主要分为请求协议和响应协议

1.请求协议

1.1.什么是请求协议

请求协议就是浏览器向服务器发送数据,这个发送的数据会遵守一套标准

1.2.请求协议模板

模板是W3C规定的,无论哪个浏览器发送请求,都必须遵守该模板
请求协议模板是由请求行、请求头、空白行、请求体组成的

1.2.1.图片描述

//浏览器F12,选择NetWork选项卡,可以查看请求

GET /api/request?usercode=123&password=aaa HTTP/1.1     请求行 
Host: localhost:8808                                    请求头
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) 
Accept: text/html,application/xhtml+xml
Referer: http://127.0.0.1:8848/AJAX%E8%AF%B7%E6%B
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
                                                        空白行
                                                        请求体(由于是get请求,请求体是空的)

1.2.2.文字描述

1.请求行:

1.METHOD:请求方式: GET POST PUT DELETE...

2.URI(不是URL:统一资源定位符)

--URI是统一资源标识符,请求的地址路径(/api/post)

--URL包括URI,URL可以定位到资源

--GET请求的参数会放在请求行中,URI后面

3.HTTP版本号

4.注意:GET请求的请求参数会放在请求行中发给服务端，所以GET请求的参数会出现地址栏中

2.请求头:

1.HOST:请求的主机名

2.Content-Length:请求数据的字节长度(只用于POST请求)

3.Content-Type:请求数据的类型(只用于POST请求,会将请求数据转换为对应的类型再通过请求行传递)

3.空白行:

1.用于分割请求头和请求体

4.响应体:

1. POST请求的请求参数会放在请求体中,POST请求的参数不会出现在地址栏中

2.响应协议

2.1什么是响应协议

服务器向浏览器发送数据,这个发送的数据需要遵循一套标准

2.2响应协议模板

模板是W3C规定的,无论使用哪种后端语言响应数据,都必须遵守该模板
响应协议模板是由状态行、响应头、空白行、响应体组成的

2.2.1图片描述

//浏览器F12,选择NetWork选项卡,可以查看请求

HTTP/1.1 200 OK                                            状态行
X-Powered-By:  3.2.1                                       响应头
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, Content-Length
Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS
Content-Type: application/json; charset=utf-8
Content-Length: 15
ETag: W/"f-8RAMLx2zMfjPyozn3TbexH4nAxg"
Date: Sun, 19 Mar 2023 13:18:25 GMT
Connection: keep-alive
Keep-Alive: timeout=5                                            
                                                            空白行
 <h1>哈哈</h1>                                               响应体

2.2.2文字描述

1.状态行:

1.HTTP版本号

2.HTTP状态码

--200 请求响应成功

--404 请求的资源未找到

--500 服务端内部出现错误

3.HTTP状态码解释

--ok 请求成功

--not found 资源未找到

2.响应头:

1.Content-type:告诉客户端实际返回的内容的内容类型(会将响应数据先转换为对应类型再返回)

2.Content-Length响应数据的长度

3.空白行:

1.用于分割响应头和响应体

4.响应体:

1.服务端传递过来的数据

三.GET请求和POST请求

1.GET请求和POST请求的应用场景

请求方式	应用场景
GET	a标签 在地址栏输入URL form表单(method为get)
POST	form表单(method为post) 传送流媒体数据(声音、视频...)

2.GET请求和POST请求的区别

1.GET请求的参数会放在请求行中进行传递,会出现在地址栏中,POST请求的参数会放在请求体中进行传递,不会出现在地址栏中

2.GET请求的参数是有大小限制的,POST请求的参数理论上是无限的

3.GET请求参数只能传递普通字符串,POST请求的参数可以传递任何数据类型(包括流媒体)

4.W3C建议GET请求用于向服务器获取数据,POST请求用于向服务器传递数据

5. GET请求是安全的,因为GET请求只是从服务器获取数据,不会对服务器造成危险 POST请求是危险的,因为POST请求向服务器提交数据,如果这些数据通过后门的方式进入到服务器中,服务器是很危险的

6.GET请求是有缓存的(每一个GET请求路径都会被浏览器缓存起来),POST请求是没有缓存的

3.不希望GET请求走缓存怎么办

走缓存指的是第二次发送GET请求和第一次发送GET请求的URL地址一样,那么第二次发送GET
请求就会从浏览器中获取响应数据,而不走服务器

1. 走缓存的缺点

1. 由于走缓存会从浏览器的缓存中获取响应数据,那么就不能实时获取服务器中最新的响应数据

2.怎么解决走缓存问题

1. 走缓存主要是因为前后两次发送GET请求的URL地址完全一致,所以才可以从浏览器缓存中获取数据

2. 只需要让每次GET请求的URL地址不同,就可以解决走缓存问题

//比如发送一个AJAX请求
//以下是JS中的AJAX请求,这不是必须的,主要问题是如何解决GET请求走缓存
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {//HTTP状态码
            //获取响应数据,执行某些操作
        }
    }
}
//下面是和服务器建立连接,我们可以在URL后面发送一个时间戳参数,这样每次发送GET请求的URL都不同了
let time = new Date().getTime();//获取时间戳
xhr.open("GET", "http://localhost:8080/api/request?t=" + tiem, true);
xhr.send(null);

参考地址:

HTTP协议详解

视频讲解HTTP

总结:

博主学习HTTP协议主要是为了学习AJAX请求,后续会陆续发布关于AJAX、Promise等文章