自学内容网 自学内容网

【网络协议大花园】应用层 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 包中写入一段 字符串
  1. 返回一段响应时, 是从 Tcp Socket 包中 读出一段字符串并解析
  1. 注意抓包是 抓自己的包是允许的 , 如果是 抓别人网站的包 就很 的 。

三. 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, 图片MP3MP4 等…

鱼式疯言

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

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 格式的理解

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

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

在这里插入图片描述


原文地址:https://blog.csdn.net/mgzdwm/article/details/142696554

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!