目录
一、HTTP协议
1. HTTP：HTTP全称为"超文本传输协议"，是一种应用非常广泛的应用层协议。
2. HTTP往往是基于传输层TCP协议实现的，其中HTTP1.0，HTTP1.1，HTTP2.0均为TCP实现，HTTP3.0是基于UDP实现。目前最主流的还是HTTP1.1和HTTP2.0。
3. 协议：为了使数据再网络上从源头到目的，网络通信的参与方必须遵守相同的规则，这套规则称为协议。
二、HTTP协议工作的过程
当我们在浏览器中输入一个搜狗搜索的网址时，浏览器会给搜狗的服务器发送一个HTTP请求，搜狗的服务器会返回一个HTTP响应。这个相应的结果被浏览器解析后就能展示这个页面的内容，这个过程浏览器可能会给服务器发送多个HTTP请求，服务器会返回多个响应。也就是说可能涉及多次请求和响应的交互过程。
HTTP协议是一种"一问一答"的结构模型协议。
除了一问一答（访问网站），还有多问一答（上传文件），一问多答（下载文件），多问多答（远程桌面）。
三、HTTP协议格式
HTTP是一个文本格式协议，可以通过Chrome开发者工具或者Fiddler抓包，分析HTTP请求/响应的细节。
1.抓包工具介绍
以Fiddler为例。下载地址：https://www.telerik.com/fiddler/
选择经典版的安装，安装好即可。当我们的Fiddler安装好后打开会出现这个页面。
但是此时的Fiddler是不能够抓取HTTPS请求的， 需要进行一些操作。
在Tools里面选择Options，然后选择HTTPS，勾选所有的选项，然后确定，完成之后就可以抓取HTTPS请求了。
Fiddler的使用：
打开Fiddler，然后打开网站，访问该网站的HTTP请求和响应就会在Fiddler上显示。
在左侧的窗口显示了所有的HTTP请求/响应，可以选中某个请求查看详情。
在右侧上方显示了HTTP请求的报文内容。（切换到Raw可以看到详细的数据格式）
在右侧下方显示了HTTP响应的报文内容。（切换到Raw可以看到详细的数据格式）
请求和响应的详细数据，可以通过右下角的View in Notepad通过记事本打开查看。
可以使用ctrl + a全选左侧的抓包结果，delete 清除所有被选中的结果。
在上面左侧出现蓝色的，得到的响应是HTML，需要重点关注。
HTTP协议是文本格式的协议，在协议里的内容都是字符串。HTTP的响应也是文本格式的，在查看前需要先解压缩，否则会出现乱码。
2.抓包工具的原理
Fiddler就相当于一个"代理"，浏览器访问sogou.com时，就会把HTTP请求先发给Fiddler，Fiddler再把请求发给sogou的服务器，然后sogou的服务器会先把数据返回给Fiddler，再由Fiddler把数据交给浏览器。因此Fiddler对于浏览器和sogou服务器之间的交互数据是非常详细的。
3.抓包的结果
下面是一个HTTP请求/响应的抓包过程
HTTP请求
1.首行
在HTTP请求的第一行，有三部分信息，三个部分使用空格分割。
1）GET：HTTP请求的"方法"。
2）URL：唯一的资源定位符，描述了一个资源在网络上的位置。
3）版本号：HTTP/1.1。
2.请求头（header）
是一个键值对结构的数据，其中有很多的键值对，每个键值对都是独占一行，键和值之间使用
：+空格来区分，键值对是"标准规定"的。
3.空行
在请求头结束之后会有一行空行，就是请求头的结束标记。
4.正文（body）
有的HTTP请求有，有的没有，此处是没有的。
HTTP响应
1.首行
1）版本号：HTTP/1.1。
2）状态码（200）：描述了请求的结果。
3）状态码（OK）：表示访问成功。
2.响应头（header）
也是键值对结构，有多个键值对，每个键值对独占一行，键和值之间使用：+空格来区分，键值对是"标准规定"的。
3.空行
在请求头结束之后会有一行空行，就是请求头的结束标记。
4.正文（body）
正文里的内容可能会很长，可能有很多种格式。
思考问题：在HTTP报文中为什么要存在"空行"？
这是因为HTTP协议并没有规定报头部分的键值对有多少个，空行就相当于"报头的结束标记"，或者是"报头和正文之间的分隔符"。因为HTTP在传输层依赖TCP协议，TCP是面向字节流的，如果没有这个空行，就会出现"粘包问题"。
四、HTTP请求
1.认识URL
URL的基本格式
平时我们所称的"网站"就是URL（统一资源定位符），互联网上的每一个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎样处理它。
协议方案名：常见的有http和https，也有其他的类型。（例如访问mysql时用的jdbc：mysql）
登录信息：一般都会省略。
服务器地址：既可以是IP地址，也可以是域名。（域名会通过DNS系统解析成一个具体的IP地址）
服务器端口号：URL中的端口号有时候可以省略，对于http请求，默认是访问80端口，对于https请求，默认是443端口。
带层次的文件路径：描述了要访问服务器的哪个资源。
查询字符串（query string）：是一种键值对结构的数据，以？开头的，键值对之间使用&来分隔，键和值之间使用=来分割。
query string中的内容是键值对结构，其中的key和value的取值个数，完成是可以自定义的，可以通过这样的方式来自定制传输我们需要的信息给服务器。
片段标识符：主要用于页面内跳转。
URL中可以省略的部分：
1）协议名：可以省略，省略后默认为http://。
2）IP地址/域名：在HTML中可以省略，省略后表示服务器的ip/域名与当前HTML所属的ip/域名一致。
3）端口号：可以省略，对于http协议，端口号自动设置为80，对于https协议，端口号自动设置为443。
4）带层次的文件路径：可以省略，省略后相当于/。
5）查询字符串和片段标识符都可以省略。
2.关于URL encode
像/？：等这样的字符，已经被url当作特殊的意义理解了，因此这些字符就不能随意出现了，如果某个参数带有这些特殊字符，就需要先对这些特殊字符进行转义。转义的规则：将需要转码的字符转为16进制，然后从右到左，取4位（不足4位直接处理），每2位做一位，前面加上%，编译成%XY格式。
例如：用sogou搜索+号的时候，会出现下面的情况。
会直接把+号转义成2B，因为url encode本质上就是一种"转义字符"，+号的ascii值就是2B，2B前面的%就是表示转义的结果。
在使用URL的时候，要记得针对query string的内容进行url encode。
3.认识"方法"（method）
| 方法 | 说明 | 支持的HTTP协议版本 |
| GET | 获取资源 | 1.0、1.1 |
| POST | 传输实体主体 | 1.0、1.1 |
| PUT | 传输文件 | 1.0、1.1 |
| HEAD | 获得报文首部 | 1.0、1.1 |
| DELETE | 删除文件 | 1.0、1.1 |
| OPTIONS | 询问支持的方法 | 1.1 |
| TRACE | 追踪路径 | 1.1 |
| CONNECT | 要求用隧道协议连接代理 | 1.1 |
| LINK | 建立和资源之间的联系 | 1.0 |
| UNLINE | 断开连接关系 | 1.0 |
1.GET方法
GET是最常见的HTTP方法，常用于获取服务器上的某个资源，在浏览器中直接输入URL，此时浏览器会发送一个GET请求，另外，HTML中的link，img，script等标签也会触发GET请求。使用JavaScript中的ajax也能构造GET请求。
使用Fiddler来观察GET请求
在最上面的200 HTTPS www.sogou.com /是通过浏览器地址发送的GET请求。
选中第一条观察请求的详细结果
GET请求的特点：
1）首行的第一个部分为GET
2）URL的query string可以为空，也可以不为空
3）header部分有若干个键值对结构
4）body部分为空
注意：
1.关于GET请求的URL长度问题，在网上有些资料的描述中get请求的长度最多1024kb，这种说法是错误的。
2.HTTP协议由RFC2616标准定义的，标准原文明确说明："Hypertext Transfer Protocol --
HTTP/1.1," does not specify any requirement for URL length.没有对URL的长度有任何限制。3.实际上URL的长度取决于浏览器的实现和HTTP服务器的实现，在浏览器端，不同的浏览器最大长度是不同的，但是现代浏览器支持的长度一般都很长，在服务器端，一般这个长度是可以配置的。
2.POST方法
POST方法也是一种常见的方法，多用于提交用户输入的数据给服务器（登录页面）。
通过HTML中的form标签可以构造POST请求，使用JavaScript的ajax也可以构造POST请求。
使用Fiddler来观察POST方法
我们在一个登录界面，输入用户名和密码之后点击登录，就可以看到POST请求了。
我们点击第一个请求，查看详情
POST请求的特点
1）首行第一个部分为POST
2）URL的query string一般为空
3）header部分由若干个键值对结构
4）body部分一般不为空，body内的数据格式通过header中的Countent-Type指定，body的长度由header中的Content-Length指定。
经典面试题：谈谈GET和POST的区别
GET和POST没有本质的区别
1.语义不同：GET一般用于获取数据，而POST一般用于提交数据。
2.GET的body一般为空，需要传递的数据通过query string传递，POST的query string一般为空，需要传递的数据通过body传递。
3.GET请求一般是幂等的，POST请求不是幂等的。
4.GET请求可以被浏览器缓存，POST不可以。（如果请求是幂等的就可以，否则不行）
5.GET请求可以被浏览器收藏夹收藏，而POST不能。
关于幂等： 如果多次请求得到的结果一样就认为请求 是幂等的。上面说GET请求一般时幂等的，那是不是会存在不幂等的情况。广告搜索，因为广告数据就是通过GET请求获取的，这些GET请求设计的时候一定不幂等，因为广告的顺序，出哪些广告背后涉及一些列复杂的逻辑。
关于GET和POST之间的区别，网上还有一些错误的说法。
1）GET请求能传输的数据量有上限，POST传递的数据量没有上限。
在早期版本的浏览器，针对GET请求的URL的长度做出了限制，实际上，RFC标准文档中并没有明确规定URL的长度，在目前浏览器和服务器的实现中，URL可以是很长的，甚至可以使用URL传递一些图片这样的数据。
2）GET请求传递数据不安全，POST请求传递数据更安全。
安全的前提是取决于前端在传输密码等敏感信息时是否进行加密，和GET、POST无关。
3）GET只能给服务器传输文本数据，POST可以给服务器传输文本和二进制数据。
GET的query string虽然无法直接传输二进制数据，但是可以针对二进制数据进行url encode.
3.其他方法
PUT：与POST相似，只是具有幂等的特征，一般用于更新。
DELETE：删除服务器指定的资源。
OPTIONS：返回服务器所支持的请求方法。
HEAD：类似GET，响应体不返回，只返回响应头。
TRACK：回显服务器端（请求=响应）收到的请求。
CONNECT：暂无使用
4.请求"报头"（header）方法
header的格式是键值对结构，每个键值对占一行，键和值之间使用分号分割。
例如在HTTP请求中第二行的Host:www.sogou.com，这个信息在URL中也是存在的。
Host：表示服务器主机的地址和端口。
Content-Length:body中数据的长度。
Content-Type：body数据中的格式。
注意：请求里有body才会有这两个属性，通常情况下GET请求是没有body，POST请求才有。
由于HTTP传输层是基于TCP实现的，所以可能涉及"粘包"问题，对于GET这种没有body的请求，直接使用空行，而对于POST这种由body的请求，就是空行和Content-Length。
body中的格式是非常多的，下面介绍几个：
在请求中：
User-Agent (简称 UA)
表示浏览器/操作系统的属性.如
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0
其中Windows NT 10.0; Win64; x64表示操作系统版本，Chrome/122.0.0.0表示浏览器的版本。
Referer
表示这个页面是从哪个页面跳转过来的. 形如
Referer: https://cn.bing.com/
表示当前这个页面是从bing浏览器跳转过来的，如果直接在地址栏输入url或者点击收藏夹中的按钮都是没有Referer。
Cookie
1.Cookie是什么？
Cookie可以认为是浏览器在本地存储数据的一种机制。
2.Cookie存在的意义
我们更容易想到直接把要存储的数据保存到客户端浏览器所在的主机的硬盘上不就行了嘛，如果这样的话，将会有很大的风险，假如我们在访问一个不安全的网站时，该网站就会在我们的硬盘上写了一个病毒，这样我们的电脑直接就挂了。所以为了保证安全性，又能存储数据，于是就引入了Cookie，也是按照硬盘文件的方式保存的，但是浏览器把操作文件给封装了，网页只能往Cookie中存储。
3.Cookie里面存的什么？
Cookie里面存的是一对一对的键值对，键值之间使用；分割，键和值之间使用=分割。
4.Cookie从哪来，到哪去，如何往Cookie存储数据？
Cookie这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据).
Cookie是按照域名为维度来存储的。我们打开bing，通过左上方的小锁就能看到Cookie。
Cookie 会在后续的请求中，把浏览器本地存储的这些数据再发送回服务器。
五、HTTP响应详解
1.认识"状态码"
状态码表示访问一个页面的结果。（是访问成功还是失败，还有其他一些情况）
以下为常见的状态码
200 OK
这是一个最常见的状态码，表示访问成功。（抓包抓到大部分结果都是200）
301 Moved Permanently
永久重定向，当浏览器收到这种响应后，后续的请求都会被自动改成新的地址。
302 Move temporarily
临时重定向，例如某个网站的服务器迁移了，就可以给旧的地址挂上一个重定向响应，在访问旧地址的用户就会自动跳转到新的地址。
403 Forbidden
访问被拒绝，有的页面通常需要用户具有一定的权限才能访问（登录），如果用户没有登录直接访问，就会出现403。
404 Not Found
没有找到资源
例如在浏览器中输入一个URL，如果这个URL表示的资源不存在就会出现404。
405 Method Not Allowed
表示访问的服务器不能支持请求中的方法。
500 Internal Server Error
表示服务器出现内部错误，一般是服务器的代码在执行过程中遇到了一些特殊情况（服务器崩溃）才会产生这个状态码。
504 Gateway Timeout
当服务器负载比较大的时候，处理单条请求的时长很长，就可能会导致出现超时的情况。
2.认识响应"报头"（header）
响应报头的基本格式和请求报头的格式基本一致，类似于 Content-Type , Content-Length 等属性的含义也和请求中的含义一致。
Content-Type
响应中的Content-Type常见取值如下：
六、通过 form 表单构造 HTTP 请求
form是HTML中的一个常用标签，可以用于给服务器发送GET和POST请求。
1.form发送GET请求
form的重要参数：
1）action：构造的HTTP请求的URL是什么。
2）method：构造的HTTP请求的方法是GET还是POST（form只支持GET和POST）。
input的重要参数：
1）type:表示输入框的类型text， 表示文本，password 表示密码， submit 表示提交按钮。
2）name：表示构造的HTTP请求的query string的key，query string的value就是输入框的用户输入的内容。
3）value：input标签的值，如果type为submit，value就对应了按钮上显示的文本。
<form action="http://abcdef.com/myPath" method="GET">
<input type="text" name="userId">
<input type="text" name="classId">
<input type="submit" value="提交">
</form>页面展示的效果
我们随便输入数据提交，此时就会构造出HTTP请求并发送出去。
由于我们的服务器地址是随便写的，因此无法获取到正确的HTTP响应。
上述可以看出以下几点：
1）form的action属性对应HTTP请求中的URL
2）form的method属性对应HTTP请求中的GET方法
3）input的name属性对应query string的key
4）input中的内容对应query string的value（11111和22222）
2.form发送POST请求
<form action="http://abcdef.com/myPath" method="POST">
<input type="text" name="userId">
<input type="text" name="classId">
<input type="submit" value="提交">
</form>
GET和POST的主要区别：
1）method从GET变成了POST
2）数据从query string移动到了body中了
3.通过 ajax 构造 HTTP 请求
ajax全称 Asynchronous Javascript And XML，通过js提供的api来构造http请求，特点是不需要刷新页面就能进行数据传输。
由于原生的api特别难用，因此使用第三方库jquery里面提供的对ajax封装好的版本。
如何使用第三方库？
1）搜索jquery cdn
2）直接复制链接到 src中
发送GET请求
4.Postman
虽然form和ajax都是通过代码来构造HTTP请求的，但是还有更简单的构造HTTP请求，直接使用第三方工具图形化界面构造，就是使用postman。
1）搜索postman
2）下载好之后就可以使用了
