总结 HTTP 协议的基本格式, 相关知识以及抓包工具fiddler的使用

[1 HTTP是什么](#1 HTTP是什么)

[2 HTTP协议格式](#2 HTTP协议格式)

[3 HTTP请求(Request)](#3 HTTP请求(Request))

[3.1 认识URL](#3.1 认识URL)

[3.2 方法](#3.2 方法)

[3.3 认识请求"报头"(header)](#3.3 认识请求"报头"(header))

[4 HTTP响应详解](#4 HTTP响应详解)

[4.1 认识"状态码"(statuscode)](#4.1 认识"状态码"(statuscode))

[4.2 认识响应"报头"(header)](#4.2 认识响应"报头"(header))

[4.3 认识响应"正⽂"(body)](#4.3 认识响应"正⽂"(body))

[5 通过form表单构造HTTP请求](#5 通过form表单构造HTTP请求)

[6 通过ajax构造HTTP请求](#6 通过ajax构造HTTP请求)

[7 通过Javasocket构造HTTP请求](#7 通过Javasocket构造HTTP请求)

1 HTTP是什么

HTTP(全称为"超⽂本传输协议")是⼀种应⽤⾮常⼴泛的应⽤层协议.

什么叫超文本呢? 就是超越文本, 不止可以传输字符串, 还能够传输图片, 文字, 视频, 音频....

尤其对Java开发来说, http比tcp还重要.

http诞⽣与1991年.⽬前已经发展为最主流使⽤的⼀种应⽤层协议

但实际上, 我们的网络大多还是以1.1为主, 更何况是3.0了, 这应该是还存放在实验室的版本.

2 HTTP协议格式

HTTP是⼀个⽂本格式的协议.可以通过Chrome开发者⼯具或者Fiddler抓包 ,分析HTTP请求/响应的细节. 抓包工具本质就是一个代理.

抓包⼯具的使⽤

以Fiddler为例 (下载地址:https://www.telerik.com/fiddler/)

安装过程⽐较简单,⼀路next即可.

打开一个网页, 就会涉及到多次浏览器和服务器之间的交互, 接下来我会以sougou浏览器的抓包结果为例, 介绍http协议的格式.

这是打开sougou浏览器的请求

这是sougou浏览器的响应

协议格式总结

接下来, 我们一个部分挨个看.

3 HTTP请求(Request)

3.1 认识URL

这是首行

平时我们俗称的"⽹址"其实就是说的URL. 互联⽹上的每个⽂件都有⼀个唯⼀的URL，它包含的信息指出⽂件的位置以及浏览器应该怎么处理它. URL的详细规则由因特⽹标准RFC1738进⾏了约定. 同时这个RFC也是约定了UDP,TCP,IP等网络协议的细节.

以后你也去开发一个xxx网站, 此时的这个内容也是需要你自定义的, 这就要根据实际需求考虑了.

实际上，对于URL来说,上述的几个部分，有的是可以省略的, 不是哪个部分必须得有.

正是上述的灵活性 , 使http可以根据不同的需求场景, 进行一些"自定制"工作. 也就使 http协议成了非常广泛使用的协议.

关于URLencode

像 / ? : 等这样的字符,已经被url当做特殊意义理解了.因此这些字符不能随意出现.

⽐如,某个参数中需要带有这些特殊字符,就必须先对特殊字符进⾏转义.

⼀个中⽂字符由UTF-8或者GBK这样的编码⽅式构成,虽然在URL中没有特殊含义,但是仍然需要进⾏转义.否则浏览器可能把UTF-8/GBK编码中的某个字节当做URL中的特殊符号.

3.2 方法

GET请求一般没有body

POST请求最常见的场景

登录(以登录gitee为例)

有人会问, 那通过抓包是不是就可以分析出密码. 这是不可能的.

因为信息量有损失了, 比如, 给你猪肉,很容易把猪肉做成火腿肠.

并且两块一样的猪肉,做出的火腿肠也差不多.(服务器只要对比密文就知道密码是否正确了)

给你火腿肠,你能推导出猪肉是啥样的嘛?

上传

其他⽅法

• PUT与POST相似，只是具有幂等特性，⼀般⽤于更新

• DELETE删除服务器指定资源

• OPTIONS返回服务器所⽀持的请求⽅法

• HEAD类似于GET，只不过响应体不返回，只返回响应头

• TRACE回显服务器端收到的请求，测试的时候会⽤到这个

• CONNECT预留，暂⽆使⽤

这些方法比较少见, 认识一下即可.

header 的整体的格式也是"键值对"结构.

每个键值对占⼀⾏.键和值之间使⽤ :空格分割.

报头的种类有很多,此处仅介绍⼏个常⻅的.

Host

表⽰服务器主机的地址和端⼝.

Content-Length

表⽰body中的数据⻓度

Content-Type

表⽰请求的body中的数据格式.

在HTTP请求中,Content-Type有三种主要的情况.

User-Agent (简称UA)

互联网发展的早期, 网站,主要就是文字) (早期的网站,相当于就是把报纸,杂志这样的传统媒体,搬到电脑上), 随着浏览器不断更新，支持的功能越来越丰富了.

图片

js(交互)

播放视频/音频

浏览器可以支持更多的功能了.

新的浏览器支持的功能更多, 旧的浏览器支持的功能更少.

同一时刻, 市面上有的人使用的是新浏览器, 有的是使用旧浏览器.

如果你开发一个网站, 你该怎么处理这种差异呢? 不论站在哪边, 都会影响用户的体验.

因此聪明的程序员们就想了个办法. 浏览器在发起http请求的时候, 向服务器自报家门. 告诉服务器,

我是使用啥系统, 啥浏览器上网的. 服务器就可以根据这个信息,来分别对待. 这样就不会影响用户的体验.

到今天为止,各大浏览器的功能都差不多了. UA的意义就小了不少. UA现在主要用来区分，PC端还是移动端.

Referer

表⽰这个⻚⾯是从哪个⻚⾯跳转过来的.

如果你是通过浏览器地址来直接输入url / 点击收藏夹打开的网页，这个请求中是不带 referer.

但是如果你是点击了某个网页的内容，产生了跳转，就是带referer.

这个行为是违法行为, 被称为"运行商劫持", 当时百度搜狗这种公司没少和运行商打官司, 但是打官司是一个很长的流程, 官司100%能打赢!但是打赢之后,3年过去了!!!

3年里, 由于这种运营商劫持造成的损失已经难以估量了.

所以HTTPS乘势而出, 通过加密传输来反制这种现象, 所以我们现在的大部分网站都是HTTPS协议的.

Cookie

是浏览器本地存储的一种机制.

那有人可能会问了, 浏览器保存数据为啥要放到cookie中, 直接写入硬盘放入一个文件里, 不行吗? 显然是不行的, 如果让网页轻易的访问你的文件系统, 是非常危险的, 如果你上某些小网站, 网站给你写了个病毒程序或者将你硬盘的数据全部情况, 那你不就寄了.

为了保证安全, 浏览器会对网页的功能做出限制. (禁止直接访问硬盘,就是其中一个规则).

为了保证安全，同时又能存储数据, 浏览器就提供了Cookie 功能(后来又有了其他功能).

cookie里的数据是按照键值对的方式来存储一些字符串, 这些键值对往往都是服务器返回来的, 浏览器把这些键值对按照域名维度, 分类存储. 不同的网站的cookie是独立的, 这些cookie的内容都是程序员自定义的.

一个网站中的cookie会存储很多键值对, 这其中相当重要的一个键值对, 是用来表示用户的"身份信息". 这个身份信息标识当前请求是来自于哪个用户的.

生活中的例子：图书馆借书系统

假设你去图书馆借书，图书馆有一个借书系统，用来管理借书记录和用户信息。

你第一次去图书馆

注册：你第一次去图书馆，需要注册一个借书证。你填写了个人信息（如姓名、身份证号等），图书馆给你发了一个借书证。
借书证 ：借书证就像是浏览器中的 Cookie，它保存了你的身份信息。

你再次去图书馆

出示借书证：你再次去图书馆时，需要出示借书证。图书馆工作人员通过借书证上的编号，查找你的借书记录。
借书记录 ：图书馆的系统（服务器）会根据借书证上的编号，找到你的借书记录。这个借书记录就像是服务器中的 Session，它保存了你的借书历史和状态。

借书过程

借书：你选择了一本书，告诉图书馆工作人员。工作人员在系统中记录你的借书信息，并更新你的借书记录。
还书：你把书还回去时，工作人员再次通过借书证上的编号，找到你的借书记录，更新记录为"已还"。

技术对应关系

借书证 ：浏览器中的 Cookie，保存了用户的身份信息（如用户ID）。
借书记录 ：服务器中的 Session，保存了用户的具体信息（如借书历史、状态等）。
图书馆系统：服务器，管理所有的借书记录和用户信息。

具体过程

用户登录：
- 你第一次登录图书馆系统时，系统会生成一个唯一的用户ID，并保存在你的借书证上（Cookie）。
- 图书馆系统还会在服务器上创建一个Session，保存你的详细信息（如借书历史、状态等）。
后续访问：
- 你再次访问图书馆时，出示借书证（Cookie），图书馆系统通过借书证上的用户ID，找到对应的Session，获取你的详细信息。
- 图书馆工作人员根据Session中的信息，处理你的借书或还书请求。

Cookie：保存用户的身份信息（如用户ID），类似于借书证。
Session：保存用户的详细信息（如借书历史、状态等），类似于图书馆的借书记录。
服务器：管理所有的用户信息和借书记录，类似于图书馆的系统

4 HTTP响应详解

4.1 认识"状态码"(statuscode)

状态码表⽰访问⼀个⻚⾯的结果.(是访问成功,还是失败,还是其他的⼀些情况...).

以下是一些比较常见的状态码

响应报头的基本格式和请求报头的格式基本⼀致.

类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义⼀致.

Content-Type

响应中的Content-Type常⻅取值有以下⼏种:

text/html :body数据格式是HTML

• te xt/css :body数据格式是CSS

• a pplication/javascript :body数据格式是JavaScript

• a pplication/json :body数据格式是JSON

4.3 认识响应"正⽂"(body)

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

1) text/html

2) text/css

3) application/javascript

4) application/json

5 通过form表单构造HTTP请求

实际开发中, 经常需要手动的构造出http协议的请求来.

这些方式有

1.通过html中的form表单

⒉通过js的ajax

3.Java代码(其他各种语言的代码)

4.借助一些第三方工具

HTML也是一种编程语言.和Java，C风格差异很大. Java和C都是在表述一个"逻辑", 先干啥,后干啥,什么情况要干啥, 是一种动作. 而HTML则是在描述一个"形态", 一个网页上，都有啥.

这里推荐使用VSCode, 怎么用这里就不做过多赘述了.

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="https:www.sogou.com" method="get">
        <input type="text" name="aaa">
        <input type="text" name="bbb">
        <input type="text" name="ccc">
        <input type="submit" value="提交">
    </form>
</body>
</html>

form表单，只能支持get和post,不能支持put/delete/options 等其他方法.....

6 通过ajax构造HTTP请求

现在更经常会使用ajax的方式来构造http请求. ajax 全称Asynchronous Javascript And XML,是2005年提出的⼀种JavaScript给服务器发送HTTP请求的⽅式.

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        // 正式的 js 代码, 就要调用上面 jQuery 中的方法了. 
        $.ajax({
            type: 'post',
            url: 'https/www.sogou.com',
            contentType: 'application/x-www-form-urlencoded',
            data: 'aaa=111&bbb=222',
            success: function(body) {
                console.log('ok')
            }
        });
    </script>
</body>
</html>

7 通过Javasocket构造HTTP请求

事实上, 除了上述写代码的工具外, 还可以通过第三方工具构造http请求, 这其中介绍一款软件postman, 它还有个对象叫postwoman, 也是一个http客户端. postman还可以根据你这边构造的请求,自动生成代码.