【Fiddler抓包工具】第二节.HTTP协议概述(请求响应报文)

文章目录

  • 前言
  • 一、HTTP协议基本介绍
  • 二、HTTP 协议的工作过程
  •       2.1 HTTP 协议格式总览
  • 三、HTTP协议请求报文详解
  •       3.1 认识URL
  •       3.1 认识"方法"
  •       3.1 认识请求“报头”(header)
  • 四、HTTP协议响应报文详解
  •       4.1 认识"状态码"
  •       4.2 认识响应“报头”(header)
  • 五、通过 form 表单构造 HTTP 请求
  •       5.1 发送 GET 请求

  •       5.2 发送 POST 请求

  • 六、通过 ajax构造 HTTP 请求
  •      6.1 发送 GET 请求
  •      6.2 发送 POST 请求
  • 总结


前言


一、HTTP协议基本介绍

基础介绍

  • Hyper Text Transfer Protocol (超文本传输协议)
  • 用于从万维网服务器传输超文本到本地浏览器的传送协议
  • HTTP协议是基于TCP的应用层协议,它不关心数据传输的细节,主要是用来规定客户端和服务端的数据传输格式,最初是用来向客户端传输HTML页面的内容。默认端口是80 .
  • http是基于请求与响应模式的、无状态的、应用层的协议

通俗点讲,协议就是要保证网络通信的双方,能够互相对接上号。就像是两个人传递纸条通过互相指定的暗号,如果发送天亮了,表示可以打游戏了等等


二、HTTP 协议的工作过程

当我们在浏览器输入一个网址,此时浏览器就会给对应的服务器发送一个 HTTP 请求,对应的服务器收到这个请求之后,经过计算处理,就会返回一个 HTTP 响应。并且当我们访问一个网站时,可能涉及不止一次的 HTTP 请求和响应的交互过程


基础术语:

  • 客户端: 主动发起网络请求的一端
  • 服务器: 被动接收网络请求的一端
  • 请求: 客户端给服务器发送的数据
  • 响应: 服务器给客户端返回的数据

HTTP 协议的重要特点: 

一发一收,一问一答


2.1 HTTP 协议格式总览

整体介绍下 HTTP 协议格式


HTTP 请求格式:


HTTP 响应格式:


注意: 为什么 HTTP 报文中要存在空行呢?

  • 因为 HTTP 协议并没有规定报头部分的键值对有多少个,使用空行就相当于是报文的结束标记或报文和正文之间的分隔符
  • HTTP 在传输层依赖 TCP 协议,TCP 是面向字节流的。如果没有这个空行,就会出现”粘包问题“

三、HTTP协议请求报文详解

3.1 认识URL

1.URL 基本介绍:

  • 平时我们俗称的”网址“,其实就是 URL(Uniform Resource Locator),翻译为统一资源定位符
  • 互连网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它

2.URL 基本格式

URL 的标准格式如下:

协议类型:[//服务器地址[:端口号]][/资源层级 UNIX 文件路径]文件名[?查询字符串][#片段标识符]

(1)协议类型:


(2)服务器地址:


(3)端口号:


(4)资源层级 UNIX 文件路径


(5)文件名


(6)查询字符串,片段标识符


举例说明:

搜狗首页:https://www.sogou.com/
QQ 邮箱首页:https://mail.qq.com/cgi-bin/frame_html? sid=jXYSnAPw1gkphz9d&r=11a219ff7f0405c621f10f04a0cfb41d


3.1 认识"方法"

GET 方法的基本介绍:

GET 是最常用的 HTTP 方法,常用于获取服务器上的某个资源。

(1)几种方式都会触发 GET 方法的请求

  • 在浏览器中直接输入 URL 回车或点击浏览器收藏夹中的链接,此时浏览器就会发送出一个 GET 请求。
  • HTML 中的 link、img、script 等标签的属性中放的 URL,浏览器也会构造出 HTTP GET 请求
  • 使用 Javascript 重点 ajax,也能构造出 HTTP GET 请求
  • 各种编程语言(只要能够访问网络),就都能够构造出 HTTP GER 请求

(2)GET 请求的特点:

  • 首行里面的第一个部分就是 GET
  • URL 里面的 query string 可以为空,也可以不为空
  • GET 请求的 header 有若干个键值对结构
  • GET 请求的 body 一般是空的

(3)GET 请求示例: 搜狗首页请求


POST 方法的基本介绍:

POST 方法也是一种常见的方法,多用于提交用户输入的数据给服务器(如登录页面)。

(1)几种方法都会触发 POST 方法的请求:

  • 通过 HTML 中的 form 标签可以构造 POST 请求
  • 使用 JavaScript 的 ajax 可以构造 POST 请求

(2)POST 请求的特点:

  • 首行第一个部分就是 POST
  • URL 里面的 query string 一般是空的
  • POST 请求的 header 里面有若干个键值对
  • POST 请求的 body 一般不为空(body 的具体数据格式,由 header 中的 Content-Type 来描述;body 的具体数据长度,由 header 中的 Content-Length 来描述)

(3)POST 请求示例: QQ 邮箱登录请求


面试题:GET 和 POST 的区别

答题模板:

GET 和 POST 其实没有本质区别,使用 GET 的场景完全可以使用 POST 代替,使用 POST 的场景一样可以使用 GET 代替。

但是在具体的使用上,还是存在一些细节的区别:

  • GET 习惯上会把客户端的数据通过 query string 来传输(body 部分是空的);POST 习惯上会把客户端的数据通过 body 来传输(query string 部分是空的)
  • GET 习惯上用于从服务器获取数据;POST 习惯上是客户端给服务器提交数据
  • 一般情况,程序员会把 GET 请求的处理,实现成“幂等”的;对于 POST 请求的处理,不要求实现成“幂等”
  • GET 请求可以被缓存,可以被浏览器保存到收藏夹中;POST 请求不能被缓存

3.1 认识请求“报头”(header)

header 的整体格式是键值对结构,每个键值对占一行,键和值之间使用冒号+空格 进行分割


介绍几个常见的报头

(1)Host

HOST 的值表示服务器主机的地址和端口(地址可以是域名,也可以是 IP;端口号可以省略或者手动指定)

(2)Content-Length

Content-Length 表示 body 的数据长度,长度单位是字节

(3)Content-Type

Content-Type 表示 body 的数据格式

以下介绍三种请求中的数据格式:

1.application/x-www-form-urlencoded

这是 form 表单提交的数据格式,此时 body 的格式就类似于 query string(是键值对的结构,键值对之间使用 & 分割,键与值之间使用 = 分割

2.multipart/form-data

这是 form 表单提交的数据格式(需要在 from 标签上加上 enctyped="multipart/form-data"),通常用于 HTML 提交图片或者文件

3.application/json

此时 body 数据为 json 格式,json 格式就是源自 js 的对象的格式。用一个 { } 括住,里面有多个键值对,键值对之间使用逗号分割,键和值之间使用冒号分割


(4)User-Agent(简称 UA)

User-Agent 表示浏览器或者操作系统的属性

形如

Mozilla/5.0 (Windows NT 10.0; Win64; x64)

AppleWebKit/537.36 (KHTML, like Gecko)Chrome/91.0.4472.77 Safari/537.36

  • Windows NT 10.0; Win64; x64 表示操作系统信息
  • AppleWebKit/537.36 (KHTML, like Gecko)Chrome/91.0.4472.77 Safari/537.36 表示浏览器信息

(5)Referer

Referer 表示这个页面是从哪个页面跳转过来的,这是一个很有用的字段

举例说明:

假设我用 bing 浏览器搜索蛋糕,我们可以对该 HTTP 请求进行抓包,其中 Referer 字段的值就是 bing 浏览器,即表面该网页是从 bing 浏览器跳转过来的

注意: 如果直接在浏览器中输入 URL 或直接通过收藏夹访问页面时,是没有 Referer 的


(6)Cookie
1.Cookie 是什么?
Cookie 是浏览器提供的一种让程序员在本地存储数据的能力

2.Cookie 里面存的是什么?

Cookie 中存储了一个字符串,是键值对结构的,键值对之间使用 ;分割,键和值之间使用 = 分割

3.Cookie 来自哪里,如何往 Cookie 中存储数据?

Cookie 这个数据可能是客户端(网页)自行通过 JS 写入的,也可能来自于服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据。

Cookie 在浏览器这边是按照域名维度来存储的,例如我们打开 CSDN 的首页,点击网址栏左边的一把小锁就能找到 Cookie,我们就可以看到打开这个网页时,系统按照不同域名设置了 Cookie

每一组都是中都存储了 Cookie,我们点开 csdn.net 这组的 Cookie 就能看到具体的数据

通过抓包工具,我们也能得到 Cookie 的数据,可以发现,上述中的键和值都是存在的,例如 uuid_tt_d


四、HTTP协议响应报文详解

4.1 认识"状态码"

状态码表示访问一个页面的结果(如访问成功、失败,还是其它一些情况等等),它是一个3位的整数,从 1xx、2xx、3xx、4xx、5xx,分为五个大类,每个大类的含义都不同。

以下介绍一些常见的状态码及它的状态码解释

(1)200 OK

表示访问成功

(2)404 Not Found
表示没有找到资源
当你发送请求的 URL 在服务器中找不到该资源,就会出现 404

(3)403 Forbidden

表示访问被拒绝

有的页面通常需要用户有一定的权限才能访问,如未登录

(4)405 Method Not Allowed
表示访问的服务器不能支持请求中的方法或者不能使用该请求中的方法

(5)500 Internal Server Error
表示服务器出现内部错误

一般是服务器的代码执行过程中遇到了一些特殊的情况,造成服务器崩溃可能会产生这个状态码

(6)302 Move temporarily

表示临时重定向

重定向相当于手机呼号的呼叫转移功能,如果我们换了一个手机号,就可以去办理该呼叫转移业务,使朋友拨打你的旧号码时,自动跳转到新号码

(7)301 Moved Permanently

表示永久重定向,当浏览器收到这种响应时,后续的请求都会被自动改成新的地址


4.2 认识响应“报头”(header)

响应报头的基本格式和请求报头的格式基本一致,下面介绍响应报头的 Content-Type 参数


Content-Type

Content-Type 表示 body 的数据格式

以下介绍三种响应中的数据格式:

  • text/html:表示数据格式是 HTML
  • text/css:表示数据格式是 CSS
  • application/javascript:表示数据各式是 JavaScript
  • application/json:表示数据格式是 JSON

五、通过 form 表单构造 HTTP 请求

form 是 HTML 中的一个表单标签,可以用于给服务器发送 GET 或者 POST 请求。

form 的重要参数:

  • action:用来构造 HTTP 请求的 URL 是什么
  • method:用来构造 HTTP 请求的方法(form 只支持 GET 或 POST 方法)

input 的重要参数在 form 标签中的含义:

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

当我们用 form 表单构造好了 HTTP 请求,点击 submit 提交按钮,就可以将请求发送出去


5.1 发送 GET 请求

示例代码:

<form action="http://aaaaa/myPath" method="get">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" name="提交">
</form>

在构造的页面中,输入数据后,进行提交,我们再通过抓包,查询到了以下结果:


5.2 发送 POST 请求

示例代码:

<form action="http://aaaaa/myPath" method="post">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="submit" name="提交">
</form>

在构造的页面中,输入数据后,进行提交,我们再通过抓包,查询到了以下结果


六、通过 ajax构造 HTTP 请求

ajax的介绍

ajax(Asynchronous Javascript And XML) 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 ajax)如果需要更新内容,必需重载整个网页面。


注意:

  • 使用 ajax 不仅可以实现 GET 和 POST 方法的请求,也可以实现其它方法的请求
  • 使用 ajax 不能跨域,即访问的域名和构造的域名需要相同(可以跨域的前提是该服务器允许可以跨域)

6.1 发送 GET 请求

示例代码:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $.ajax({
    url: 'http://42.192.83.143:8089/AjaxMockServer/info',
    method: 'GET',
    success: function(data, status){
        console.log(data);
        console.log(status);
    }
});
</script>


6.2 发送 POST 请求

示例代码:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $.ajax({
    url: 'http://42.192.83.143:8089/AjaxMockServer/info',
    method: 'POST',
    contentType: 'text/plain',
    data: 'this is body',
    success: function(data, status){
        console.log(data);
        console.log(status);
    }
});
</script>

总结

  • 31
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值