当前位置：首页 > news >正文

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

news 文章来源：https://blog.csdn.net/mgzdwm/article/details/142696554 2025/5/10 9:49:01

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

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

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

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

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

在这里插入图片描述

引言

HTTP 协议（超文本传输协议）是万维网中数据通信的基础。它定义了客户端与服务器之间如何进行交互，确保信息能够准确、高效地在网络中传输。从简单的网页浏览到复杂的网络应用，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的原始数据

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

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

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

三. 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程序猿日常开发中常用的。

总结

http的初识：了解HTTP是应用层用来规定 传输方式和数据格式 的一种最常用的协议，没有之一。
http的抓包工具：掌握FIddler 的下载流程并且会进行基础的抓包操作。
http的报文格式：熟悉HTTP的报文的四种格式: 首行——》报头——》空行——》正文，并 熟悉Url 格式的理解。

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

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

在这里插入图片描述

引言

目录

一. http的初识

1. http协议是什么？

鱼式疯言

2. http 的特点

鱼式疯言

二. http的抓包工具

1. 抓包是什么？

2. 抓包工具

<1>. 下载流程

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

鱼式疯言

三. http的报文格式

1. 请求报文

<1>. 首行

<2>. 请求头（header）

鱼式疯言

<3>. 空行

<4>. 正文（body）

鱼式疯言

2. 效应报文

<1>. 首行

<2>. 响应头

<3>. 空行

<4>. 正文（body）

鱼式疯言

3. URL

URL的初识

鱼式疯言

总结

相关文章：