【网络原理】从零开始深入理解HTTP的报文格式(二)

最新推荐文章于 2025-05-01 14:20:21 发布
最新推荐文章于 2025-05-01 14:20:21 发布
阅读量3.5k 收藏 110
点赞数 158
文章标签： 网络 http 网络协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_81886858/article/details/147620670
版权

在这里插入图片描述

本篇博客给大家带来的是网络HTTP协议的知识点, 续上篇文章,接着介绍HTTP的报文格式.
🐎文章专栏: JavaEE初阶
🚀若有问题 评论区见
❤ 欢迎大家点赞 评论 收藏 分享
如果你不知道分享给谁,那就分享给薯条.
你们的支持是我不断创作的动力 .

王子,公主请阅🚀

要开心

要快乐

顺便进步

1. HTTP响应

响应的构成主要涉及到前端的知识:
html css js 构成网页的主体.
html 表示页面的骨架.
css 表示页面的样式.
js 表示页面的行为.

1.1 认识"状态码"

在这里插入图片描述

状态码表示访问一个页面的结果. (是访问成功, 还是失败, 还是其他的一些情况)
以下是比较常见的状态码.

① 200 OK
表示访问成功.

这是一个最常见的状态码, 表示访问成功. 抓包抓到的大部分结果都是 200

在这里插入图片描述

② 404 Not Found
表示没有找到资源.

浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源. 如果这个 URL 标识的资源不存在,那么就会出现 404.例如, 在浏览器中输入 https://www.sogou.com/index.html
此时就在尝试访问 sogou 上的
/index.html 这个资源.如果输入正确, 则可以正确访问到. 但是如果输入错误, 比如 www.sogou.com/inde.html , 就会看到 404 这样的响应.

在这里插入图片描述
在这里插入图片描述

③ 403 Forbidden
表示用户没有权限访问.

查看码云的私有仓库, 如果不登陆, 就会出现 403. 访问受限403


在这里插入图片描述

④ 418 l am a teapot
这个状态码并没有实际的意义,只是"开个玩笑"，称为"彩蛋".
实际开发商业产品或者开源项目的时候, 还是不建议搞彩蛋,防止出现一些宗教信仰问题,导致开发成果"毁于一蛋".

⑤ 302 Move temporarily
临时重定向

重定向就相当于手机号码中的 “呼叫转移” 功能. 比如我本来的手机号是 1314, 后来换了个新号码 520, 那么不需要让我的朋友知道新号码,只要我去办理一个呼叫转移业务, 其他人拨打 1314 , 就会自动转移到 520 上.
在登陆页面中经常会见到 302. 用于实现登陆成功后自动跳转到主页.

码云的登陆页面: 码云页面登陆
抓包看到的响应结果:

在这里插入图片描述

⑥ 301 Moved Permanently
永久重定向
当浏览器收到这种响应时, 后续的请求都会被自动改成新的地址. 301 也是通过 Location 字段来表示要重定向到的新地址.

状态码小结

在这里插入图片描述

1.2 认识响应"报头"

响应报头的基本格式和请求报头的格式基本一致. 详细可见上一篇文章: 【网络原理】从零开始深入理解HTTP的报文格式(一)
类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致.

Content-Type

响应中的 Content-Type 常见取值有以下几种:
• text/html : body 数据格式是 HTML
• text/css : body 数据格式是 CSS
• application/javascript : body 数据格式是 JavaScript
• application/json : body 数据格式是 JSON

在这里插入图片描述
关于 Content-Type 的详细情况: MIME types

1.3 认识响应"正文"(body)

正文的具体格式取决于 Content-Type. 观察上面几个抓包结果中的响应部分.

① text/html

在这里插入图片描述
② text/css

在这里插入图片描述

③ application/javascript

在这里插入图片描述

④ application/json

在这里插入图片描述

2. 构造HTTP请求

2.1 通过form表单构造HTTP请求.

form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求. form 只支持 GET 或者 POST 请求

Ⅰ form发送GET请求

form 的重要参数:
• action: 构造的 HTTP 请求的 URL 是什么.
• method: 构造的 HTTP 请求的 方法 是 GET 还是 POST (form 只支持 GET 和 POST).

input 的重要参数:
• type: 表示输入框的类型. text 表示文本, password 表示密码, submit 表示提交按钮.
• name: 表示构造出的 HTTP 请求的 query string 的 key. query string 的 value 就是输⼊框的用户输入的内容.
• value: input 标签的值. 对于 type 为 submit 类型来说, value 就对应了按钮上显示的文本.

使用VSCode编译器,创建一个文件命名为form.html. 右侧输入 ! 再按TAB键代码基本框架就出来了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
</head>
<body>
    <form action="http://www.sogou.com/abc.html" method="get">
        <input type="text" name="key1">
        <input type="text" name="key2">
        <input type="text" name="key3">
        <input type="submit" value="提交">
    </form>
</body>
</html>

页面展示效果:

在这里插入图片描述
在输入框中随便填写数据,并提交

在这里插入图片描述

构造的get 请求如下: 

GET https://www.sogou.com/abc.html?key1=13&key2=14&key3=520 HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
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.7
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cookie: cuid=AAG2VbIdUwAAAAuipyOMMwAANgg=; SUV=1745486111856508; SNUID=4F22AF328583B539A426D88686764390; ABTEST=0|1745830865|v17; SUID=5B5768DF3EA7A20B00000000680F43D1; IPLOC=CN4400; LSTMV=345%2C204; LCLKINT=1918; browerV=3; osV=1

Ⅱ form发送POST请求

将上述代码中method = ‘‘get’’ 改成 method = '‘post’'即可.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
</head>
<body>
    <form action="http://www.sogou.com/abc.html" method="post">
        <input type="text" name="key1">
        <input type="text" name="key2">
        <input type="text" name="key3">
        <input type="submit" value="提交">
    </form>
</body>
</html>

构造的post请求如下: 

POST http://www.sogou.com/abc.html HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Content-Length: 24
Cache-Control: max-age=0
Origin: null
Content-Type: application/x-www-form-urlencoded
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
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.7
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

key1=13&key2=14&key3=520

主要的区别:
① method 从 GET 变成了 POST.
② 数据从 query string 移动到了 body 中.

2.2 利用ajax构造HTTP请求

从前端角度, 除了浏览器地址栏能构造 GET 请求, form 表单能构造 GET 和 POST 之外, 还可以通过ajax 的方式来构造 HTTP 请求. 并且功能更强大.
现在的网站,主体都是通过 ajax 的方式来进行交互的.
特点是可以不需要 刷新页面/页面跳转 就能进行数据传输.

Ⅰ 利用 ajax 发送 GET 请求

浏览器原生提供了 ajax 的 api 特别难用, 但好在有一些第三方库封装了 ajax. 本文使用的是 jquery 这个库.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        //就是编写自己的 js 代码.
        $.ajax({
            type: 'get',
            url: 'https://www.sogou.com/abc.html?',
            success: function(body) {
                console.log(body);
            }
        });
    </script>
</body>
</html>

构造get的请求如下: 

GET https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js HTTP/1.1
Host: cdn.bootcdn.net
Connection: keep-alive
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
sec-ch-ua-mobile: ?0
Accept: */*
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: script
Sec-Fetch-Storage-Access: active
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

Ⅱ 利用 ajax 发送POST请求

对于 POST 请求, 需要设置 body 的内容
1. 先使用 setRequestHeader 设置 Content-Type
2. 再通过 send 的参数设置 body 内容. 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ajax</title>
    </head>
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script>
            //就是编写自己的 js 代码.
            $.ajax({
                type: 'post',
                url: 'https://www.sogou.com/abc.html?',
                contentType: 'application/x-www-form-urlencoded',
                body: 'studentName=zhangsan',
                success: function(body) {
                    console.log(body);
                }
            });
        </script>
    </body>
    </html>

构造的post请求如下: 

POST https://www.sogou.com/abc.html? HTTP/1.1
Host: www.sogou.com
Connection: keep-alive
Content-Length: 0
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0
Accept: */*
sec-ch-ua: "Microsoft Edge";v="135", "Not-A.Brand";v="8", "Chromium";v="135"
Content-Type: application/x-www-form-urlencoded
sec-ch-ua-mobile: ?0
Origin: null
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6

2.3 利用postman构造HTTP请求

能够构造 http 请求的第三方工具,非常多的,本文章主要使用的 postman , 也有很多其他的工具, 都大同小异. 这些工具一般都来测试.

可以先下载postman
postman官方网站
下载完后再注册一个账号, 注册邮箱建议用@163.

注册完了之后:

① 创建一个仓库

在这里插入图片描述

② 构造HTTP请求

在这里插入图片描述

③ 还可以自动生成代码

不会写前端代码也没事.

在这里插入图片描述








本篇博客到这里就结束啦, 下篇文章再来介绍HTTPS, 感谢观看 ❤❤❤

🐎期待与你的下一次相遇😊😊😊

计算机网络原理实验（7）：分析IP报文结构
m0_72934718的博客
06-11 682
在计算机网络实验中研究IP报文结构，深刻理解了IP数据包的格式及字段含义。了解版本号、头部长度、服务类型、标识、偏移量、协议类型、源目标地址等关键信息在IP报文中的位置和作用。通过分析实际报文，掌握了数据传输中IP层的重要性，如何正确解析并利用IP报文头部信息来确保数据正确传输。这使我对计算机网络通信有了更深入的认识，理解了网络通信背后的复杂机制。
计算机网络知识汇总（超详细整理）从零基础入门到精通，看完这一篇就够了
2401_84296945的博客
05-04 3177
网络层在数据链路层提供的两个相邻端点之间的数据帧的传送功能上，进一步管理网络中的数据通信，将数据设法从源端经过若干个中间节点传送到目的端，从而向运输层提供最基本的端到端的数据传送服务。网络层基本功能目的IP地址源IP地址协议其它相关问题数据报长度大于传输链路的MTU的问题，通过分片机制标识、标志、片偏移防止循环转发浪费网络资源（路由错误、设备故障…），通过跳数限制生存时间TTLIP报头错误导致无效传输，通过头部机校验首部校验和IP地址。
【网络原理】从零开始深入理解HTTP的报文格式(一)
2302_81886858的博客
04-29 1615
本篇博客给大家带来的是网络HTTP协议的知识点, 重点介绍HTTP的报文格式.🐎文章专栏: JavaEE初阶🚀若有问题 评论区见❤如果你不知道分享给谁,那就分享给薯条.你们的支持是我不断创作的动力 .王子,公主请阅🚀1. 什么是HTTP2. Fiddler3. HTTP 协议格式4. HTTP请求4.1 认识URL4.2 认识 "方法" (method)4.2.1 GET方法4.2.2 POST方法4.2.3 其他方法4.3 认识请求"报头"(header)
【网络原理】从零开始深入理解TCP的各项特性和机制.(三)
2302_81886858的博客
04-27 2028
上篇介绍了网络原理传输层TCP协议的知识,本篇博客给大家带来的是网络原理剩余的内容, 总体来说,这部分内容没有上两篇文章那么重要,本篇知识有一个印象即可.🐎文章专栏: JavaEE初阶🚀若有问题 评论区见❤如果你不知道分享给谁,那就分享给薯条.你们的支持是我不断创作的动力 .王子,公主请阅🚀1. 网络层1.1 IP协议1.2 地址管理1.2.1 地址管理1.2.2 路由选择2. 数据链路层3.应用层协议DNS。
从零开始精通RTSP之深入理解RTP包
hope_wisdom的技术博客
04-25 1786
RTP包是用于在互联网上传输实时音视频，或其他类型时间敏感数据的标准数据包格式。它是多媒体通信领域中的核心组件，尤其在实时流媒体应用（比如：视频会议、在线直播、IP电话、安防监控等）中扮演着至关重要的角色。RTP包由RTP报文头和RTP负载两部分组成，其中，RTP报文头是固定的12个字节，而RTP负载则是可变的，取决于具体的媒体数据。RTP包的结构简单而高效，能够满足实时音视频传输的需求。通过详细分析RTP报文的各个字段，我们可以更好地理解RTP的工作原理，以及如何优化基于RTP的流媒体应用。
KCP】从零开始深入理解KCP原理（含TCP可靠机制原理）, 及源码解析。
热门推荐
08-16 1万+
KCP是什么？KCP商业案例KCP的实现原理停等式ARQ协议确认机制超时重传连续ARQ(1) 回退n帧（go-back-n）ARQ(2) 选择重传协议（selective repeat）（待补充）滑动窗口协议TCP应用的ARQ机制和其他机制（待更新）接下来看一下KCP和TCP的对比：（待补充）KCP源码解析KCP应用场景：（待补充）参考文章：查了不少KCP资料，可在很多文章中涉及到多种网络底层术语和符号，对于网络底层不怎么了解的，看的简直头疼，还有对ARQ也缺乏描述，死磕了一段时间的网络底层，才理解起来..
【网络原理】从零开始深入理解TCP的各项特性和机制.(一)
2302_81886858的博客
04-24 2962
本篇博客给大家带来的是网络原理的相关知识.其中传输层这一部分非常重要,面试中只要是涉及到网络这一部分知识,几乎是必定会考传输层TCP的.🐎文章专栏: JavaEE初阶🚀若有问题 评论区见❤如果你不知道分享给谁,那就分享给薯条.你们的支持是我不断创作的动力 .王子,公主请阅🚀1. 应用层★2. 传输层2.1 端口号2.2 UDP协议2.3 TCP协议2.3.1 TCP协议格式2.3.2 TCP的特点★2.3.3 TCP传输数据时的重要过程。
手把手教你Linux内核编译：从零开始编写
深度Linux
02-13 1858
Linux 内核作为操作系统的核心，其魅力在于多方面。首先，它负责资源管理和设备驱动等重要任务。学习 Linux 内核编程，能够让开发者深入了解操作系统内部工作机制。例如，Linux 的内核功能强大，包括进程管理、内存管理、文件系统、网络功能、硬件驱动和安全机制等。在进程管理方面，内核负责创建和销毁进程，处理进程与输入和输出设备的不同进程间的数据处理，调度器控制进程如何共享 CPU。
计算机网络原理
iso_wsy的专栏
09-03 667
比特(bit)是计算机中数据量的单位，一个“二进制数字”,一个比特就是二进制数字中的一个1或0。速率即数据率或比特率是计算机网络中最重要的一个性能指标。速率的单位是b/s,或Kb/s,Mb/s.Gb/s等。带宽本来是指信号具有的频带宽度，单位是赫(千赫、兆赫、吉赫等)现在“带宽”是数字信道所能传送的“最高数据率”的同义语单位是“比特每秒，或b/s(bit/s)。1.速率(rate)千比每秒，即Kb/s。兆比每秒，即Mb/s。吉比每秒，即Gb/s。太比每秒，即Tb/s。
理论联系实际：从零理解WebSocket的通信原理、协议格式、安全性
嘿嘿
05-10 914
摘要：本文来自云栖社区程序猿小卡的技术分享。 1、前言 WebSocket的出现，使得浏览器具备了实时双向通信的能力。本文由浅入深，介绍了WebSocket如何建立连接、交换数据的细节，以及数据帧的格式。 本文来自云栖社区程序猿小卡的技术分享。 1、前言 WebSocket的出现，使得浏览器具备了实时双向通信的能力。本文由浅入深，介绍了WebSocket如何建立连接、交换数据的细节，以...
从零开始：彻底理解输电I1接口的规约结构与应用要点
[从零开始：彻底理解输电I1接口的规约结构与应用要点](https://3d.upimgku.com/user/2020/07/27/moban_0e2e9cea0d.png) # 摘要 本文全面介绍了输电I1接口的相关技术细节及其在电力系统中的应用。首先对I1接口的基本...
【从零开始】：西门子V90 PN伺服通信报文全解析，轻松入门伺服控制
[【从零开始】：西门子V90 PN伺服通信报文全解析，轻松入门伺服控制](https://5.imimg.com/data5/WK/EK/QJ/SELLER-1228046/sinamics-s210-servo-systems-1000x1000.png) # 摘要 西门子V90 PN伺服驱动器的通信技术是...
CANoe.DiVa自动化测试流程全解析：从零开始的深入教程
本文详细介绍了CANoe.DiVa自动化测试工具在汽车行业中的应用，从基础理论和框架介绍，到实际案例的分析和高级测试策略的探讨。文章首先概述了CANoe.DiVa测试环境的搭建和配置，随后深入讲解了CAN及CAN FD通信协议，...
机器人“跨协议对话”秘籍：EtherNet IP转PROFINET网关应用实录
bjbxkj的博客
04-29 446
由于两种协议在通信标准和数据格式上存在差异，导致机器人手臂无法与现场的终端控制器直接通信，设备之间的数据交换无法顺利进行，严重影响了生产线的整体效率。通过该网关的及时引入，我们避免了大规模设备改造带来的高昂成本和生产延误风险，显著提高了设备协作效率和生产线整体性能，获得了生产部门的一致认可。针对这一问题，我们工程师团队经过详细分析和现场测试，决定采用EtherNet/IP转PROFINET通信协议网关（倍讯BX-606-EIP）来实现快速、稳定的协议转换。接受控制器主动发送的指令及数据请求。
Nginx核心功能——nginx代理
2401_88768957的博客
05-01 1016
主要作用是将客户端的请求转发给目标服务器，并将响应返回给客户端Nginx 的 正向代理 充当客户端的“中间人”，它赋予开发者精准控制URL的能力，让请求的流转不再受限于物理路径，而是通过逻辑规则灵活适配业务需求。Nginx的七层(应用层)反向代理基于HTTP/HTTPS 协议。Nginx的四层(网络层)反向代理基于 TCP/UDP 协议，改成break标记，使用浏览器请求，
网络原理初识
2401_83526138的博客
04-29 505
物理层规定了网络通信中一些硬件设施（网线，光纤，WIFI）的要求。
指定的网络名不再可用0x00000040原因分析及解决方法
电脑技术分享网的博客
04-30 600
如：用户是属于修复别人共享给我的打印机（客户端）或前面两种都是的两个选项场景，勾选修复了【共享主机】更新补丁选项，则可能会出现打印机报错的情况。出现此类问题时，可再次点击重新扫描，找到其中的【共享主机】更新补丁进行还原，即可解决大部分别人共享给我的打印机常见错误修复。2、物理连接问题：如果使用的是网络打印机，确保打印机与网络的连接没有问题，比如网线连接正常，打印机的网络设置正确等。可快速扫描当前连接打印机需要的驱动，在扫描出的打印机驱动中可选择相关打印机驱动版本进行修复安装。
ActiveMQ 性能优化与网络配置实战（一）
最新发布
qq_42190530的博客
05-01 674
NIO 与 BIO 模型选择、协议优化（OpenWire/Stomp）、生产者限流与消费者预取策略。
吴恩达强化学习复盘(11)连续状态空间|深度Q网络
wgc2k的博客
04-28 1004
这是是一个能让用户在月球上着陆模拟飞行器的应用，它类似于一个被很多强化学习研究者使用的电子游戏。在这个应用中，用户的任务是在月球着陆器快速接近月球表面时，在适当的时间点燃推进器，使其安全降落在着陆台上。
评论 121
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值