当我们在浏览器中输入一个 " 网址 " (URL) 时 , 浏览器就给服务器发送了一个 HTTP 请求, 服务器返回了一个 HTTP 响应 . 这个响应结果被浏览器解析之后, 就展示成我们看到的页面内容 . ( 这个过程中浏览器可能会给服务器发多个 HTTP 请求 , 服务器会对应返回多个响应 , 这些响应里就包含了页面 HTML, CSS, JavaScript, 图片 , 字体等信息).

当我们在浏览器界面输入一个URL到浏览器界面加载画面这期间具体发生了细节可以参考我的这篇文章：输入网址url到网页显示，期间发生了什么？

二、HTTP 协议格式

HTTP 是一个文本格式的协议. 可以通过Fiddler 抓包工具来分析 HTTP 请求/响应的细节

Fiddler 抓包工具的原理就相当于一个"代理"，当我们在浏览器中输入一个网址时，会生成HTTP请求发送给代理，然后代理再把这个HTTP请求发送给服务器，服务器在收到请求后会生成一个HTTP响应，代理收到响应后再发送给浏览器。

Fiddler 抓包工具下载地址：https://www.telerik.com/fiddler

首次使用，需要开启 https（当前网络上主要的协议是 https，很少直接使用 http）

接下来就使用Fiddler来进行抓包使用

协议格式总结

HTTP请求协议格式：

HTTP响应协议格式：

HTTP请求的抓包如下：

HTTP响应的抓包如下：

三、HTTP请求详解

认识URL

我们在浏览器中输入的网址就相当于是一个URL，URL的组成如下：

认识HTTP方法

GET

GET是HTTP协议最常用的方法，用于获取服务器上的资源，在浏览器中直接输入 URL, 此时浏览器就会发送出一个 GET 请求。

POST

POST 方法也是一种常见的方法 . 多用于提交用户输入的数据给服务器 ( 例如登陆页面 ). 通过 HTML 中的 form 标签可以构造 POST 请求 , 或者使用 JavaScript 的 ajax 也可以构造 POST 请求 .

Host

表示浏览器这个请求要访问的服务器的地址和端口

大多数情况下，Host 中的值和 URL 中的域名是一致的；但是如果当我们访问的服务器不是直接访问，而是通过”代理“来访问的，此时 Host 和 URL 可能就不一致了（相当于 Host 是最终目标，URL是当前目标）。因此在这里 Host写一遍去确认访问的服务器是什么

Content-Length

表示body的长度：空格后面都是body部分

Content-Type

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

User-Agent (简称 UA)

表示当前的设备是电脑还是手机

Referer

表示当前页面是从哪个页面跳转过来的。如果直接在浏览器中输入 URL, 或者直接通过收藏夹访问页面时是没有 Referer 的 .

Cookie 中存储了一个字符串, 这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据)。往往可以通过这个字段实现 "身份标识" 的功能。

Cookie是当浏览器第一次访问服务器时，服务器返回响应给浏览器的同时也附带cookie给浏览器。这样浏览器下一次再访问服务器时，带着这个cookie，此时服务器就会自动识别浏览器的身份。 Cookie一般是保存在浏览器本地上。在服务器上会保存着Session。

四、HTTP 响应详解

状态码

状态码表示访问一个页面的结果 . ( 是访问成功 , 还是失败 , 还是其他的一些情况 ...).

以下为常见的状态码

200 OK

这是一个最常见的状态码 , 表示访问成功

404 Not Found

找不到资源，当在浏览器输入一个 URL, 目的就是为了访问对方服务器上的一个资源. 如果这个 URL 标识的资源不存在, 那么就会出现 404

403 Forbidden

表示访问被拒绝，即没有权限访问服务器的某一个资源

500 Internal Server Error

服务器出现内部错误。一般是服务器的代码执行过程中遇到了一些特殊情况 ( 服务器异常崩溃 ) 会产生这个状态码

504 Gateway Timeout

服务器响应超时。

302 Move temporarily

临时重定向。

在登陆页面中经常会见到 302. 用于实现登陆成功后自动跳转到主页 .

301 Moved Permanently

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

HTTP状态码总结

报头

响应报头的格式和请求报头的格式基本一致。像 Content-Type , Content-Length 等属性的含义也和请求中的含义一致。不过响应的 Content-Type 常见取值有这几种：

text/html : body 数据格式是 HTML
text/css : body 数据格式是 CSS
application/javascript : body 数据格式是 JavaScript
application/json : body 数据格式是 JSON

通过 form 表单构造 HTTP 请求

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

<form action="https://www.baidu.com/" method="GET">
    <input type="text" name="userId">
    <input type="password" name="classId">
    <input type="submit" value="提交">
</form>

抓包如下：

ChatGPT 国内版免费

一、HTTP协议概念