HTTP原理（四）—— HTTP请求过程

我们在浏览器中输入一个 URL，回车之后便会在浏览器中观察到页面内容，实际上这个过程是浏览器向网站所在的服务器发送了一个 Request，即请求，网站服务器接收到这个 Request 之后进行处理和解析，然后返回对应的一个 Response，即响应，然后传回给浏览器，Response里面就包含了页面的源代码等内容，浏览器再对其进行解析便将网页呈现了出来，模型如图所

示：

模型图

此处客户端即代表我们自己的 PC 或手机浏览器，服务器即要访问的网站所在的服务器。为了更直观地地说明这个的过程，我们在这里用 Chrome 浏览器的开发者模式下的 Network监听组件来做下演示，它可以显示访问当前请求网页时发生的所有网络请求和响应。打开 Chrome 浏览器，右键点击检查，或按下快捷键 F12 即可打开浏览器的开发者工具，我们在这里访问百度：baidu.com/，输入该 URL，敲击回车访问这个页面，观察一下在这个过程中发生了怎样的网络请求，这时我们可以看到在 Network 页面的下方出现了一个个的条目，那么这一个条目就代表一次发送 Request 和接收 Response 的过程，如图所示：

Network 面板
我们观察第一个网络请求，即 www.baidu.com，如图所示：

网络请求记录
这一个条目的各列分别代表：
第一列 Name，即 Request 的名称。一般会用URL的最后一部分内容当做名称。

第二列 Status，即 Response 的状态码。这里显示为 200，代表 Response 是正常的，通过状态码我们可以判断发送了 Request 之后是否得到了正常的 Response。

第三列 Type，即 Request 请求的文档类型。这里为 document，代表我们这次请求的是一个 HTML 文档，内容就是一些 HTML 代码。

第四列 Initiator，即请求源。用来标记 Request 是由哪个对象或进程发起的。

第五列 Size，即从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示 from cache。

第六列 Time，即发起 Request 到获取到 Response 所用的总时间。

第七列 Timeline，即网络请求的可视化瀑布流。

我们点击这个条目即可看到其更详细的信息，如图 所示：

详细信息
首先是 General 部分，Request URL 为 Request 的 URL，Request Method 为请求的方法，Status Code 为响应状态码，Remote Address 为远程服务器的地址和端口，Referrer Policy为 Referrer 判别策略。再继续往下看可以看到有一个 Response Headers 和一个 Request Headers，这分别代表响应头和请求头，请求头里面带有许多请求信息，例如浏览器标识、Cookies、Host 等信息，这是Request 的一部分，服务器会根据请求头内的信息判断请求是否合法，进而作出对应的响应，返回 Response，那么在图中看到的 Response Headers 就是 Response 的一部分，例如其中包含了服务器的类型、文档类型、日期等信息，浏览器接受到 Response 后，会解析响应内容，进而呈现网页内容。