HTTP使用指南 | 青训营笔记

叽歪怒的快乐
36 阅读5分钟

这是我参与「第五届青训营 」笔记创作活动的第2天

HTTP 协议简介

HTTP协议的基本定义

HTTP是一个客户端终端（用户）和服务器端（网站）请求和应答的标准（TCP）。通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）。我们称这个客户端为用户代理程序（user agent）。应答的服务器上存储着一些资源，比如HTML文件和图像。我们称这个应答服务器为源服务器（origin server）。在用户代理和源服务器中间可能存在多个“中间层”，比如代理服务器、网关或者隧道（tunnel）。

HTTP 协议的基本结构与发展历程

HTTP协议主要特征

  1. 支持用户/服务器端模式。
  2. 简单快速：当客户向服务器请求服务时，只需传送请求的方式和路径即可。常见的索赔方式有GET,HEAD,POST。每一种方法都指出客户与服务器联系的类型不同。因为HTTP协议简化了HTTP服务器程序，通信速度更快。
  3. 灵活性：HTTP允许任何类型的数据对象进行传输。传送类型是用Content-Type标记的。
  4. 无连接：无连接意味着每个连接只能处理一个请求。伺服器处理顾客要求，收到顾客回复后，断开。这将节省传输时间。
  5. 无状态：HTTP协议是无状态的。“无状态”意味着协议不记得事务处理。丢失状态意味着，如果后续处理需要之前的信息，则必须重新传输，这可能会增加每次连接传输的数据量。相反地，当服务器不需要之前的信息时，它可以更快地响应。

HTTP协议发展历程

image.png

HTTP/1 1997年， HTTP/2 2015年， 在2016年中68%的请求都是HTTP/2

HTTP协议的报文结构

什么是报文

浏览器和服务器之间通信是基于请求和响应的，浏览器向服务器发送请求(request)，服务器向浏览器返回响应(response),浏览器向服务器发送请求相当于浏览器给服务器写信，服务器向浏览器返回响应，相当于服务器给浏览器回信，这个信在HTTP协议中就被称为报文，而HTTP协议就是对这个报文的格式进行规定。

请求报文(request)

 GET /07_http%E5%8D%8F%E8%AE%AE/01_http%E5%8D%8F%E8%AE%AE.html?username=sunwukong HTTP/1.1
            Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
            Accept-Encoding: gzip, deflate, br
            Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,la;q=0.7
            Cache-Control: max-age=0
            Connection: keep-alive
            Host: 127.0.0.1:5500
            If-Modified-Since: Thu, 27 Oct 2022 11:10:28 GMT
            If-None-Match: W/"1b8-1841922e832"
            Referer: http://127.0.0.1:5500/07_http%E5%8D%8F%E8%AE%AE/01_http%E5%8D%8F%E8%AE%AE.html?username=sunwukong
            Sec-Fetch-Dest: document
            Sec-Fetch-Mode: navigate
            Sec-Fetch-Site: same-origin
            Upgrade-Insecure-Requests: 1
            User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
            sec-ch-ua: "Chromium";v="106", "Google Chrome";v="106", "Not;A=Brand";v="99"
            sec-ch-ua-mobile: ?0
            sec-ch-ua-platform: "Windows"

  1. 客户端发送给服务器的报文称为请求报文

  2. 格式如下： 请求首行 请求头 空行 请求体

  3. 请求首行就是请求报文的第一行 GET /index.html?username=sunwukong HTTP/1.1。

    第一部分get表示请求的方式，现为常用的方式就是get和post请求。get请求主要用来向服务器请求资源，post请求主要用来向服务器发送数据；

    如下为请求方式：

image.png

第二部分/index.html?username=sunwukong，表示请求资源的路径，？后边的内容叫做查询字符串，查询字符串是一个名值对结构，一个名字对一个一个值，使用=连接，多个名值对之间使用&分割；

第三部分HTTP/1.1表示协议的版本

  1. 请求头也是名值对结构，用来告诉服务器我们浏览器的信息，每一个请求头都有他的作用

image.png

  1. 空行用来分割请求头和请求体
  2. 请求体post请求通过请求体来发送数据

响应报文(response)

HTTP/1.1 200 OK
                Vary: Origin
                Access-Control-Allow-Credentials: true
                Accept-Ranges: bytes
                Cache-Control: public, max-age=0
                Last-Modified: Thu, 27 Oct 2022 11:31:54 GMT
                ETag: W/"20c-18419368696"
                Content-Type: text/html; charset=UTF-8
                Content-Length: 2017
                Date: Thu, 27 Oct 2022 11:52:29 GMT
                Connection: keep-alive
                Keep-Alive: timeout=5

  1. 响应报文：响应首行；响应头；空行；响应体

  2. 相应首行 HTTP/1.1 200 OK；200响应状态码，ok对响应状态码的描述；

    响应状态码的规则：

    1xx 请求处理中；

    2xx表示成功；

    3xx表示请求的重定向；

    4xx表示客户端错误；

    5xx表示服务器的错误；

image.png
  1. 响应头也是一个一个的名值对结构，用来告诉浏览器响应的信息。

image.png

  1. 空行空行用来分割响应头和响应体
  2. 响应体就是服务器返回给客户端的内容
<!DOCTYPE html>
                    <html lang="zh">
                        <head>
                            <meta charset="UTF-8" />
                            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                            <title>Document</title>
                        </head>
                        <body>
                            <form method="post" action="./02_target.html">
                                <input type="text" name="username" />
                                <input type="password" name="password" />
                                <button>提交</button>
                            </form>
                    </body>
                    </html>

常见场景中的 HTTP 协议应用

场景分析-静态资源

  1. 打开chrome
  2. 输入www.toutiao.com
  3. 打开控制台
  4. 切换到network

场景分析-登录

表单登录

扫码登陆

知识扩展，了解更多网络通信协议

WebSocket

  1. 浏览器与服务器进行全双工通讯的网络技术
  2. 典型场景：实时性要求高，例如聊天室
  3. URL使用ws:// 或 wss:// 等开头

QUIC

image.png

avatar
文章
阅读
粉丝