深度贴：前端网络基础及进阶（2）

浏览器为什么称为用户代理？

浏览器如何代替用户发送http请求？

带着这些问题，让我们潜入本文章⬇️

一、用户代理

浏览器可以代替用户完成http请求，代替用户解析响应结果，所以被称之为：用户代理。

在网络层面，浏览器拥有两大核心功能：

• 自动发出请求的能力
• 自动解析响应的能力

浏览器代替用户发出Http请求具体的场景包括：

1. 在地址栏输入一个url地址，并按下了回车。
2. 用户点击页面<a>标签元素：浏览器会拿到a的href地址，并发送get请求，同时抛弃当前页面。
3. 当用户点击了提交按钮<button type = "submit"> </button>：浏览器会获取到其按钮所在表单元素<form>，拿到它的action属性地址，同时拿到它的method属性，然后把表单中的数据组织到请求体中，发出指定方法的请求，同时抛弃当前页面。
4. 当解析HTML的时候遇到<link><img><script><video><audio>等元素：浏览器会拿到对应地址，发出get请求
5. 当用户点击刷新：浏览器会拿到当前地址，以及当前页面的url，发送一次get请求，同时抛弃当前页面。

浏览器用户代理自动封装http请求通用工作流水线如下图：

DNS部分和TCP部分流程会在后续文章中介绍，读者理解大致流程即可。

二、Asychronous JavaScirpt and XML——AJAX

通过JavaScript发送Http请求，不论是任何AJAX的API，本纸都要被封装为Http格式报文（请求行、请求头、请求体）。 Http报文具体格式参见：深度贴：前端网络基础及进阶（1）-CSDN博客

「AJAX」简介和历史参考这篇文章：Ajax：现代JS发起http通信的代名词-CSDN博客。

在浏览器通过JavaScript发送Http请求的API包括「XMLHttpRequest API」和「Fetch API」。

XMLHttpRequest API处于兼容老版本的状态，不再更新；Fetch API在不断发展，是ES6+当下及未来的趋势。

「Fetch」除了无法监控进度，其他功能都可以替「XMLHttpRequest API」

1.XMLHttpRequest API

2.Fetch API