【网络协议大花园】应用层 http协议的使用小技巧，用好了都不用加班，效率翻两倍（上篇）

本篇会加入个人的所谓鱼式疯言

❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言

而是理解过并总结出来通俗易懂的大白话,

小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的.

🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人能接受我们这个概念 ！！！

引言

HTTP 协议（超文本传输协议）是万维网中数据通信的基础。它定义了客户端与服务器之间如何进行交互，确保信息能够准确、高效地在网络中传输。从简单的网页浏览到复杂的网络应用，HTTP 协议都发挥着至关重要的作用，是互联网世界不可或缺的一部分。

目录

1. http的初识

2. http的抓包工具

3. http的报文格式

一. http的初识

1. http协议是什么？

http： 叫超文本传输协议， 用于服务器和客户端互相通信的应用层协议。

http主要负责规定 客户端与服务器 之间的通信， 包括 传输的方式 和 数据格式 。

关于传输的方式和数据格式在下篇文章中， 小编会重点细细道来。

简单来说吧 ！ 它是 互联网上运用最广泛的协议 （没有之一）， 我们平常的日常生活中离不开 http 协议， 像 打开浏览器， 使用手机app， 后端开发使用分布式结构都离不开http协议 。

鱼式疯言

如果是作为一名Java程序猿， 作为 web开发 是经常和应用层协议打交道的， 所以日常开发中是离不开http的， 小伙伴要学好哦~

2. http 的特点

如上图：

在 http3.0 的版本之前是基于Tcp 实现的 ， 而 http 3.0 版本是基于 Udp实现的 。

而目前大规模互联网 见到最多使用的最多 的也就是 http1.1 版本。

http 协议是 一问一答模型 的协议

一问一答就是：

客户端——服务器

客户端发送一个请求， 服务器响应一个回复。

打开网页的过程， 就是一问一答的场景。

鱼式疯言

补充说明：

• 像其网络通信过程中有：

一问多答 ：文件下载

多问一答： 大文件传送

多问多答 ： 远程桌面（远程控制）

二. http的抓包工具

1. 抓包是什么？

要想学习好http 协议， 抓包 是每个程序猿必不可少的技能。

抓包： 把通过 网卡上的数据获取到， 并解析出来。

平常开发人员很少抓Tcp的包， 而是进行抓http的包。

我们可以通过抓包工具来获取到 http 请求和响应的详细情况 。

2. 抓包工具

在这里小编推荐使用 Fiddler 的抓包工具， 这个抓包工具简单操作， 门槛较低， 特别适合我们刚接触http的初学者。

下面我们来看看下载流程吧：

<1>. 下载流程

小伙伴先点开下方链接

Fidder 下载链接

使用经典版下载（最近版是收费的）

直接下载即可。

<2>. 下载完毕后的操作

点击打开 Fiddler 软件

安装配置， 注意点击的方位

下面必须勾选Yes， 否则是无法进行抓包的， 这点后面的文章详讲， 小伙伴们一定要记得勾选， 如果勾选到No 了， 就只能卸载重装了 。

然后就是操作了

如下图， 就是 Fiddler 可以正常使用了

像平常要查看一个自己包时

首先是 ctrl + A + delete

然后进行一个网站

就会得到 请求和响应的包 ， 我们 随机点击一个 ， 就可以接收到


如上图就可以得到一个 http请求报文

如上面的过程就是 查看自己 http 报文的基本抓包过程 ， 小伙伴多多抓包， 定能熟悉http 。

鱼式疯言

RAW标签页 是 http的原始数据

1. 当发送一段请求时， 是往 Tcp Socket 包中写入一段 字符串。

2. 当返回一段响应时， 是从 Tcp Socket 包中 读出一段字符串并解析 。

3. 注意抓包是 抓自己的包是允许的 ， 如果是 抓别人网站的包 就很 刑 的 。

---

三. http的报文格式

下面以百度服务器的请求和响应报文为例：

1. 请求报文

<1>. 首行

GET https://img-s.msn.cn/tenant/amp/entityid/BB1hxbpr?w=16&h=16&q=100&m=6&f=png&u=t HTTP/1.1

GET 是方法名 : 表示请求的动作 ， 其中GET 就是客户端要向服务器拿数据。

https://img-s.msn.cn/tenant/amp/entityid/BB1hxbpr?w=16&h=16&q=100&m=6&f=png&u=t : 称之为 URL ，涉及内容比较多也重要， 下面小编细细讲解

HTTP/1.1： 这个标志当下使用的 http 是1.1 版本的。

<2>. 请求头（header）

Host: img-s.msn.cn
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/129.0.0.0 Safari/537.36 Edg/129.0.0.0
sec-ch-ua: "Microsoft Edge";v="129", "Not=A?Brand";v="8", "Chromium";v="129"
sec-ch-ua-mobile: ?0
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8
X-Edge-Shopping-Flag: 1
Sec-MS-GEC: 18AE840C02E7BB0CBC4B5CD23B77A887FC776399E6AF2BC73D86108F8080A847
Sec-MS-GEC-Version: 1-129.0.2792.65
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: image
Referer: https://ntp.msn.cn/
Accept-Encoding: gzip, deflate, br, zstd...

类似以上这些 首行以下到空行结束 都是 报头内容 ， 并且每一行的报头都是 键值对 的形式， 由 ：和 空格 分割开。

鱼式疯言

http的报文是键值对 是很多的， 不同的键值对是http自身规定的 ， 但 人为也可以规定的

关于 面试常考， 工作常用 的 报头的键值对， 小编在下篇中会重点讲解~

<3>. 空行

空行唯一的作用就是 分隔报头和正文 ， 是作为 报头的结束标志。

<4>. 正文（body）

有些 请求报文有正文 ，有些 请求报文没有正文 ， 正文其实就是提供给服务器的数据 。

{"adRefreshVariant":"","locale":"zh-cn",
"rid":"67000138b1ed4560b8ac438861d00965","partnerId":"ntp","content":
{"sourceUrl":"https://ntp.msn.cn/edge/ntp","pageType":"edgechrntp","previousReservedRiverNativeAdCount":0,"previousRiverDualWideNativeAdCount":0,"previousRiverHalfNativeAdCount":0,"previousRiverNativeAdCount":0,
"verticalName":"edge","anaheimPageLayout":"informational","isXfeed":false,"audienceMode":"adult"}
,"user":
{"muid":"0642785F51D0686B1AEF6B1450936914","browserOptOut":false,"isAdblock":false,"gdpr":true},"placements":[{"region":"oneriver.main","indices":[1],"img":
{"w":300,"h":157}}],"extensions":{"taboola":
{"sessionId":"init"},"impressedCrids":
["SU1HOk9BREQyLjczNTMxMzkwMTk1MzBfMUpSUlhXTjNFVUJVUktOTERH","SU1HOk9BREQyLjgyNDY0MzI5MDIxMzlfMVZHM1c4NDZBWkFQVEpLMFA4"]},
"isCookieWallPresent":false,"isPeregrine":true,"device":{"isMobile":false}}

如上图： 空行以下为 正文（body） , 正文一般都是程序猿自己去定义的。

鱼式疯言

总结说明：

请求的 http报文格式 ： 首行——》 报头——》 空行——》 正文

一般来说， 使用 GET 方法的报文不含有正文 ， 使用POST 方法的报文含有正文， 因为 POST 方法 一般就是用于给 服务器传输文件数据 。

2. 效应报文

效应报文的结构和请求报文的结构相似，但也有不同的地方。

<1>. 首行

HTTP/1.1 200 OK

HTTP/ 1.1 : HTTP的版本号

200： 表示是 HTTP的状态码（下篇介绍）

OK： 对 状态码的说明

<2>. 响应头

Content-Type: application/json; charset=utf-8
Vary: Origin,Accept-Encoding
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Access-Control-Allow-Origin: https://ntp.msn.cn
Access-Control-Allow-Credentials: true
X-Content-Type-Options: nosniff
X-Cache: CONFIG_NOCACHE
Accept-CH: Sec-CH-UA-Arch, Sec-CH-UA-Bitness, Sec-CH-UA-Full-Version, Sec-CH-UA-Full-Version-List, Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version
X-MSEdge-Ref: Ref A: 877BE17A0D7B4A0A958F80023506182E Ref B: BJ1EDGE0718 Ref C: 2024-10-04T14:57:25Z
Date: Fri, 04 Oct 2024 14:57:26 GMT
Content-Length: 8441

响应报头和请求报头相似 ，这里小编就不赘述了 。

<3>. 空行

空行唯一的作用就是 分隔报头和正文 ， 是作为 报头的结束标志。

<4>. 正文（body）

define("superman-san/app/feed-ad/result_696f230",
["san","tslib","@searchfe/inject-js"],function(e,i,s){return l={0:function(t,a)
{t.exports=e},1:function(t,a){t.exports=i},10:function(t,a){t.exports=' <div 
class="from c-font-normal {{footData.layout === \'s-news-special-item-tpl-2\' ? 
\'from-tpl2\' : \'\'}}"> <span s-if="footData.tag" class="hot-point c-color-red 
c-gap-right">{{ footData.tag }}</span> <a s-if="footData.source" class="c-gap-
right c-color-gray" href="{{footData.src_link ? footData.src_link : 
footData.link_url}}" target="_blank" data-src="1" data-click="LOG_LINK">{{ 
footData.source }}</a> <span s-if="footData.src_time" class="src-time c-color-
gray2 c-gap-right">{{ footData.src_time }}</span> <span s-if="isAd" class="ad-
icon c-color-gray2">广告</span> <div s-if="showFeedback" class="{{isAd ? 
\'nativead-dustbin\' : \'dustbin\'}}" data-click="LOG_BTN_DUSTBIN"> <i class="c-
icon">&#xe610;</i> </div> <div s-if="showTts" class="homepage-feed-tts"> <span 
class="play-tts" data-nid="{{nid}}"> <i class="c-icon">&#xe680;</i> <p 
class="tts-button-text">播报</p> </span> <span class="pause-tts" data-nid="
{{nid}}"> <i class="c-icon">&#xe67d;</i> <p class="tts-button-text">暂停</p> 
</span> </div> </div> '},109:function(t,a){t.exports=' <div s-if="adData.picNum 
0" class="s-nativead-item s-news-special s-news-item {{adData.layout}} s-
opacity-blank8 clearfix" data-url="{{adData.link_url}}" data-rid="
{{adData.id}}" data-log="stype:11;picNum:{{adData.picNum}};title:
{{adData.title}};pos:{{pos}};st:nativead;" data-locate="{{pos}}" data-
imTimeSign="{{adData.imTimeSign}}" data-extra-

一般来说

响应的正文是 html , css,js, 图片， MP3， MP4 等…

鱼式疯言

响应报文： 首行——》 响应头——》空行——》 正文

3. URL

URL的初识

URL 是网络上 唯一资源的标识符 ， 相当于在一个一个小房间， 每个小房间都是唯一的一种标识 。

在上面请求报文的首行：

https://baike.baidu.com/item/%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92
%8C%E5%9B%BD%E5%9B%BD%E5%BA%86%E8%8A%82/1041892?fr=ge_ala

https : 协议名方案， 用于指明 URL给哪个协议使用！。

baike.baidu.com : 域名， 域名就相当于 IP地址 的 人为翻译版本 ，可以 方便阅读。

%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92 %8C%E5%9B%BD%E5%9B%BD%E5%BA%86%E8%8A%82/ ： 这些是将一些特定的字符（中文， 特殊标点） 通过 Url encode 转码得到的结果，由 % 加 十六进制数字 组成 相当于 转义字符的含义 ， 让服务器更好的去识别， 以免出现BUG问题 。

1041892: 这个为端口号， 用于 识别哪个应用程序的标识 。

https://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js?1728096134092 HTTP/1.1

//csdnimg.cn/public/common/libs/jquery/jquery

上面这个称之为： 层次的路径 ，与文件路径相似， 路径有了才能找到对应的文件。

 ?fr=ge_ala

以问号开头的后面内容为 查询字符串， 是 程序猿自行定义的 ， 针对访问的资源进行补充说明

鱼式疯言

讲解了那么多细节概念：

但是对于Url 来说：

最核心的还是：

• IP地址（域名）

• 端口号

• 层次的路径

• 查询字符串

其中层次的路径和 查询字符串是作为java程序猿日常开发中常用的。

总结

1. http的初识： 了解HTTP是应用层用来规定 传输方式和数据格式 的一种最常用的协议， 没有之一。

2. http的抓包工具：掌握FIddler 的下载流程并且会进行基础的抓包操作。

3. http的报文格式： 熟悉HTTP的报文的四种格式: 首行——》报头——》 空行——》正文 ， 并 熟悉Url 格式的理解。

如果觉得小编写的还不错的咱可支持 三连 下 (定有回访哦) , 不妥当的咱请评论区 指正

希望我的文章能给各位宝子们带来哪怕一点点的收获就是 小编创作 的最大 动力 💖 💖 💖