S03-12 JS-高级-网络请求

[TOC]

前后端分离

服务器端渲染

~~服务器端渲染（SSR，Server Side Render）~~：是指在服务器上将 JS 应用（通常是 React, Vue, Angular, Svelte 等构建的）转换并生成完整的 HTML 页面，然后将这个可以直接渲染的 HTML 发送给浏览器（客户端）的过程。

早期的网页都是通过后端渲染来完成的：

客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档；

~~服务器端渲染的缺点~~：

会更新整个页面：当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则；
网络开销大：而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。

有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？

答案正是“AJAX”。

网页的渲染过程

服务器端渲染

前后端分离

HTTP

概念

HTTP

~~HTTP（HyperText Transfer Protocol，超文本传输协议）~~：是互联网上应用最广泛的基础通信协议，用于在客户端（如浏览器）和服务器之间传输超文本（如网页、图片、视频等）。它是万维网（WWW）数据交换的基石，定义了数据如何打包、传输和解析。

维基百科：
- HTTP 是一种用于分布式、协作式和超媒体信息系统的应用层协议；
- HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；
- 通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识；

HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80），我们称这个客户端为~~用户代理程序（User Agent）~~。
响应的服务器上存储着一些资源，比如HTML文件和图像，我们称这个响应服务器为~~源服务器（Origin Server）~~。

核心特性：

无状态（Stateless）：
每次请求独立，服务器不记录客户端状态。需 Cookie/Session 维持登录状态。
统一通信标准：
不同设备/系统间通过标准协议交换数据。

HTTPS

~~HTTPS（HyperText Transfer Protocol Secure）~~：是 HTTP 的安全版本，它在 HTTP 协议基础上增加了 TLS/SSL 加密层，用于保护客户端与服务器之间的数据传输。

HTTPS 的核心作用：

数据加密：通过 TLS/SSL 加密传输内容，防止中间人攻击（如窃听、篡改）。
身份验证：通过数字证书验证服务器身份，避免连接伪造的服务器。
数据完整性：防止传输过程中数据被恶意修改。

HTTPS 在 JS 中的关键机制：

TLS/SSL 握手：客户端与服务器协商加密算法、交换密钥（JS 中由环境自动完成）。
证书验证：浏览器/Node.js 检查证书是否由受信任机构签发，域名是否匹配。
混合内容阻塞：浏览器会阻止 HTTPS 页面中加载 HTTP 资源（如脚本、图片）。
HSTS：强制浏览器只通过 HTTPS 访问网站（响应头 Strict-Transport-Security）。

URI

~~URI（Uniform Resource Identifiers，统一资源标识符）~~：是一个用于唯一标识网络资源的字符串，它是 URL（统一资源定位符）和 URN（统一资源名称）的超集。

对比 URI/URL/URN：

在 Web 开发中，URL 是最常用的 URI 子集。

类型	说明	示例
URI	标识资源的通用字符串	`https://example.com/产品?id=123#详情`
URL	定位资源的 URI（含协议和路径）	`https://example.com/page.html`
URN	命名资源的 URI（不依赖位置）	`urn:isbn:0451450523`（书籍永久标识）

网页中的资源

我们网页中的资源通常是被放在 Web 资源服务器中，由浏览器自动发送 HTTP 请求来获取、解析、展示的。

目前我们页面中很多数据是动态展示的：

比如页面中的数据展示、搜索数据、表单验证等等，也是通过在 JS 中发送 HTTP 请求获取的；

HTTP 组成

一次 HTTP 请求主要包括：请求（Request）和响应（Response）：

HTTP 请求：

HTTP 响应：

HTTP 版本

HTTP 的版本演进始终围绕 性能、安全与功能扩展 三大核心目标：

HTTP/0.9：发布：1991
- 核心改进：
  - 仅支持 GET 请求
  - 仅支持获取文本数据
- 问题解决：基础原型
- 说明：主要是为了获取 HTML 页面内容
HTTP/1.0：发布：1996
- 核心改进：
  - 引入 HEAD/POST 方法、状态码、请求头、响应头
  - 支持获取更多数据类型（不再局限于文本数据）
- 问题解决：功能扩展
- 说明：
  - TCP短连接：浏览器的每次请求都需要与服务器建立一个TCP连接，请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗。
HTTP/1.1：发布：1999
- 核心改进：持久连接、管道化、Host 头、分块传输
- 问题解决：性能优化（主流版本）
HTTP/2.0：发布：2015
- 核心改进：二进制分帧、多路复用、头部压缩、服务器推送
- 问题解决：解决队头阻塞、提升速度
HTTP/3.0：发布：2022
- 核心改进：基于 QUIC 协议（UDP）、0-RTT 握手
- 问题解决：减少延迟、优化弱网环境

HTTP 请求方式

在RFC 7231中定义了一组请求方式，用于定义客户端希望服务器执行的操作类型。

GET：获取资源。
POST：创建新资源。
PUT：完整替换资源。
DELETE：删除资源。
PATCH：部分更新资源。
CONNECT：建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。
TRACE：沿着到目标资源的路径执行一个消息环回测试。
OPTIONS：获取服务器支持的通信选项。用于预检请求（CORS）。
HEAD：获取资源元数据。请求一个与 GET 请求的响应相同的响应，但没有响应体。
- 比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；

HTTP 请求头

~~HTTP 请求头（HTTP Request Headers）~~：是客户端（如浏览器）向服务器发送请求时传递的元数据，它们为服务器提供请求的上下文信息、客户端偏好、认证凭证等。

~~核心特性~~：

大小限制：总请求头大小通常限制在 8-16KB
敏感信息：避免在请求头中传递敏感数据

CORS：自定义头需要服务器设置 Access-Control-Allow-Headers

Access-Control-Allow-Headers: Content-Type, Authorization, X-Custom-Header

自定义请求头

~~自定义请求头的命名规范~~：

使用 X- 前缀（传统做法，非强制）
语义化命名（如 X-Client-Version）
避免使用保留名称
CORS：自定义头需要服务器设置 Access-Control-Allow-Headers

headers: {
  'X-Client-ID': 'web-app-v1.2',
  'X-Request-Source': 'mobile'
}

常见请求头

~~常见 HTTP 请求头~~：

类别	请求头示例	作用
内容协商	`Accept`, `Accept-Language`, `Accept-Encoding`	指定客户端可接受的内容类型
身份认证	`Authorization`, `Cookie`	传递用户凭证
缓存控制	`Cache-Control`, `If-Modified-Since`	控制缓存行为
客户端信息	`User-Agent`, `Referer`	提供客户端环境信息
请求体信息	`Content-Type`, `Content-Length`	描述请求体格式和大小
跨域请求	`Origin`	标识请求来源

Content-Type

Content-Type：定义了请求体的数据格式，使服务器能够正确解析客户端发送的数据。

application/json：最常用，发送 JSON 格式数据

特点：

结构化数据，支持复杂对象
现代 API 首选格式

fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 28 })
});

application/x-www-form-urlencoded：传统表单提交

特点：

键值对格式：key1=value1&key2=value2
URL 编码特殊字符

const data = new URLSearchParams();
data.append('username', 'john_doe');
data.append('password', 'secure123');

fetch('/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: data
});

multipart/form-data：文件上传和表单混合提交

特点：

支持二进制数据
每个字段有独立内容类型
需要 boundary 分隔符
注意：文件上传时不设置Content-Type，让浏览器自动处理可以包含必要的 boundary 信息

const form = new FormData();
form.append('name', 'John');
form.append('avatar', fileInput.files[0]);

fetch('/profile', {
  method: 'POST',
  body: form
  // 浏览器自动设置:
  // Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryABC123
});

text/plain：发送纯文本内容

特点：

无特殊格式处理
适用于简单文本数据

fetch('/api/log', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: 'Error: Invalid user input at 2023-08-10T14:30:00Z'
});

application/xml：发送 XML 格式数据

特点：

传统企业系统常用
比 JSON 更冗长

const xmlData = `
  <user>
    <name>John</name>
    <age>30</age>
  </user>
`;

fetch('/legacy-api', {
  method: 'POST',
  headers: { 'Content-Type': 'application/xml' },
  body: xmlData
});

Content-Length

Content-Length：请求体大小（通常自动计算）

headers: {
  'Content-Length': '348'
}

Connection

Connection：用于控制网络连接行为，决定了客户端与服务器之间的 TCP 连接如何处理。

keep-alive：最常用，要求服务器保持连接持续（HTTP/1.1 默认开启）
close：明确要求请求后关闭连接
Upgrade：请求协议升级（如 HTTP → WebSocket）
TE：指定传输编码（如分块传输）
Trailers：声明将在分块消息后发送的尾部头字段

~~keep-alive 在 HTTP 不同版本中的差异~~：

http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断；

HTTP1.0：
- 默认关闭连接
- 需要显式声明 Connection: keep-alive

HTTP1.1：
- 默认启用持久连接
- 空闲超时自动关闭（通常 5-15 秒）
HTTP2.0：
- 完全移除 Connection 头
- 通过多路复用（Multiplexing）自动管理连接
- 单个 TCP 连接处理所有请求

Keep-Alive

Keep-Alive：控制持久连接的细节。

timeout：空闲连接保持时间（秒）
max：连接关闭前最大请求数

// Connection 与 Keep-Alive 的配合使用
Connection: keep-alive
Keep-Alive: timeout=5, max=100

Accept

Accept：指定客户端可接受的 MIME 类型：

headers: {
  'Accept': 'application/json, text/plain, */*'
}

Accept-Encoding

Accept-Encoding：指定客户端支持的文件压缩格式。比如 js 文件可以使用 gzip 编码，对应 .gz 文件。

headers: {
  'Accept-Encoding': 'gzip, deflate, br'
}

User-Agent

User-Agent：标识客户端相关信息：

headers: {
  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36'
}

// Chrome: 
// 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36'

// Egdge：
// 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0'

HTTP 状态码

~~HTTP 状态码（HTTP Status Code）~~：是服务器响应请求时返回的三位数字代码，用于表示请求的处理结果。

HTTP 状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；
MDN响应码解析地址：https://developer.mozilla.org/zh-CN/docs/web/http/status

~~状态码分类体系~~：

HTTP 状态码分为五类，通过首位数字标识：

分类	范围	含义	JavaScript 处理重点
1xx	100-199	信息响应	临时响应，前端通常自动处理
2xx	200-299	成功响应	正常处理成功响应
3xx	300-399	重定向	自动跟随或手动处理重定向
4xx	400-499	客户端错误	处理用户端问题（如无效请求）
5xx	500-599	服务器错误	处理服务端故障

常见状态码：

状态码	状态描述	信息说明
200	OK	请求成功完成
201	Created	资源创建成功
204	No Content	请求成功但无返回内容

301	Moved Permanently	资源永久迁移
302	Found	资源临时移动
304	Not Modified	资源未修改（缓存有效）

400	Bad Request	请求语法错误
401	Unauthorized	未认证/缺少凭证
403	Forbidden	无权限访问
404	Not Found	资源不存在
429	Too Many Requests	请求过于频繁

500	Internal Server Error	通用服务器错误
502	Bad Gateway	上游服务器无效响应
503	Service Unavailable	服务暂时不可用

HTTP 响应头

~~HTTP 响应头(HTTP Response Headers)~~：是服务器在响应客户端请求时发送的元数据信息，它们提供了关于响应内容的关键信息和控制指令。

~~常见 HTTP 响应头~~：

内容信息类：
1. Content-Type：声明响应体的 MIME 类型。常见值：
  - text/html; charset=utf-8
  - application/json
  - image/png
2. Content-Length：响应体的字节大小
缓存控制类：
1. Cache-Control：控制缓存行为。常用指令：
  - max-age=3600：缓存有效期（秒）。用于静态资源缓存
  - no-cache：需重新验证。用于动态内容
  - no-store：禁止缓存。用于敏感数据
  - public：允许代理缓存。用于 CDN 资源
  - private：仅浏览器缓存。用于用户私有数据
2. ETag / Last-Modified：资源验证标识
安全策略类：
1. Content-Security-Policy (CSP)：防止 XSS 攻击。
  常见配置：
  http
```
Content-Security-Policy: default-src 'self'; script-src 'self' https://apis.example.com
```
  1
2. Strict-Transport-Security (HSTS)：强制 HTTPS 连接
  配置：
  http
```
Strict-Transport-Security: max-age=31536000; includeSubDomains
```
  1
3. X-Frame-Options：防止点击劫持。取值：
  - DENY：完全禁止嵌入
  - SAMEORIGIN：仅同源可嵌入
CORS (跨域资源共享) 类：
1. Access-Control-Allow-Origin：允许跨域的源
  配置：
  http
```
Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Origin: *  // 允许所有源
```
  1
  2
2. Access-Control-Expose-Headers：允许前端访问的自定义头
3. Access-Control-Allow-Headers：允许前端访问的响应头
性能优化类：
1. Content-Encoding：响应体压缩算法。常见值：
  - gzip
  - br (Brotli)
  - deflate
2. Connection：控制连接持久性

插件-FeHelper

为了之后查看数据更加的便捷、优雅，我们安装一个Chrome插件：

方式一：Chrome扩展商店安装：https://chromewebstore.google.com/category/extensions
方式二：手动安装：https://github.com/zxlie/FeHelper/tree/master/apps/static/screenshot/crx

AJAX

AJAX 概述

~~AJAX（Asynchronous JavaScript And XML）~~：是一种用于创建异步 Web 应用的核心技术，它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分内容。

~~AJAX 定义与本质~~：

AJAX 不是单一技术，而是多种技术的组合：
- HTML/CSS：内容展示
- DOM：动态内容操作
- XMLHttpRequest：数据传输
- JSON/XML：数据格式
异步通信：在后台与服务器交换数据，不阻塞用户界面

~~核心特性~~：

优点：

用户体验提升：无刷新更新内容
性能优化：减少带宽使用，只传输必要数据
异步处理：不阻塞用户界面
模块化：前后端分离开发

缺点：

SEO 问题：搜索引擎爬虫难以索引动态内容
浏览器历史：后退按钮行为需要额外处理
跨域限制：需要 CORS 或代理解决
调试复杂：异步流程增加调试难度

~~AJAX 核心实现方式~~：

方式一：XMLHttpRequest (XHR)
方式二：Fetch

XHR

API-XHR【

~~构造方法~~：

new XMLHttpRequest()：()，用于创建一个 XHR 实例对象。用于与服务器交互，支持异步 HTTP 请求（如 AJAX）。

属性：

xhr.onreadystatechange：fn，用于监听请求状态变化。会在 readyState 属性值变化时触发，是处理异步请求响应的传统方式。
xhr.readyState：，
xhr.status：，
xhr.statusText：，
xhr.response：，
xhr.responseType：，默认：text，
xhr.timeout：，
xhr.upload：，
xhr.withCredentials：，

方法：

xhr.open()：(method,url,async?,user?,password?)，用于初始化 HTTP 请求配置（但不会发送请求）。需配合 send() 方法使用。
xhr.send()：(body?)，用于实际发送 HTTP 请求到服务器。必须在 open() 之后调用。
xhr.abort()：()，用于立即终止正在进行的 HTTP 请求。调用后，请求会被取消，不会继续接收响应数据。
xhr.setRequestHeader()：(header, value)，用于在发送请求前设置 HTTP 请求头。确保在 open() 之后、send() 之前调用。
xhr.getResponseHeader()：()，

事件：

loadstart：，
load：，
loadend：，
progress：，
abort：，
error：，
timeout：，

基本使用

new XMLHttpRequest()：()，用于创建一个 XHR 实例对象。用于与服务器交互，支持异步 HTTP 请求（如 AJAX）。

xhr.open()：(method,url,async?,user?,password?)，用于初始化 HTTP 请求配置（但不会发送请求）。需配合 send() 方法使用。

xhr.send()：(body?)，用于实际发送 HTTP 请求到服务器。必须在 open() 之后调用。

xhr.onreadystatechange：fn，用于监听请求状态变化。会在 readyState 属性值变化时触发，是处理异步请求响应的传统方式。

~~AJAX基本使用~~：

第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）
第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；
第三步：配置网络请求（通过open方法）；
第四步：发送send网络请求；

XHR 请求状态 readyState

xhr.readyState：，

~~readyState 状态详解~~：

事实上，我们在一次网络请求中看到状态发生了很多次变化，这是因为对于一次请求来说包括如下的状态：

~~XHR 执行流程~~：

准备阶段：
- 调用 open() 初始化请求配置
- readyState 变为 1 (OPENED)
- 设置请求头（可选）
- 注册事件处理器
发送阶段：
- send() 被调用
- 请求进入发送队列
传输阶段：
- 服务器接收请求
- readyState 变为 2 (HEADERS_RECEIVED)
- readyState 变为 3 (LOADING) 数据接收中
完成阶段：
- readyState 变为 4 (DONE)
- 触发 load/error/abort 事件

~~对比 status~~：

readyState：记录的是 XMLHttpRequest 对象的状态变化，而非 HTTP 状态码。
status：记录的是 HTTP 状态码。

~~发送同步请求（已废弃）~~：

将 open() 的第三个参数设置为 false。

XHR 事件

~~XHR 事件~~：

除了onreadystatechange还有其他的事件可以监听：

loadstart：，
load：，
loadend：，
progress：，
abort：，
error：，

loadstart：请求开始。
load：请求成功完成。
loadend：在 load，error，timeout 或 abort 之后触发。
progress：一个响应数据包到达，此时整个 response body 都在 response 中。
abort：调用 xhr.abort() 取消了请求。
error：发生连接错误，例如，域错误。不会发生诸如 404 这类的 HTT- 错误。
timeout：由于请求超时而取消了该请求（仅发生在设置了 timeout 的情况下）。

示例：使用 load 监听获取数据：

响应数据和响应类型

~~响应数据~~：

发送了请求后，我们可以通过 response 获取响应的正文内容。

xhr.response：，

~~响应类型~~：

response 返回的数据类型取决于 responseType 的属性设置。

xhr.responseType：，默认：text，

示例：设置响应类型

~~对比 responseText、responseXML~~：

早期：服务器返回的数据通常是普通的 text 和 XML 类型：
- 所以会通过 responseText、 responseXML 来获取响应结果。
- 之后将它们转化成 JS 对象形式。
js
```
xhr.responseType = 'text'

xhr.onload = function() {
  console.log(xhr.responseText)
  console.log(xhr.responseXML)
}
```
1
2
3
4
5
6
目前：服务器基本返回的数据都是 json 类型：
- 直接设置为 json 即可
js
```
xhr.responseType = 'json'
```
1

HTTP 响应状态 status

XMLHttpRequest的 readyState 是用于记录 xhr 对象本身的状态变化，并非针对于 HTTP 的网络请求状态。

如果我们希望获取HTTP响应的网络状态，可以通过 status 和 statusText 来获取。

xhr.status：，

xhr.statusText：，

示例：

打印 HTTP 响应状态

HTTP 响应状态检查

xhr.onreadystatechange = function() {
  if (this.readyState === 4) {
    // 主成功范围 (200-299)
    if (this.status >= 200 && this.status < 300) {
      console.log("请求成功");
    } else {
      console.error(`请求失败: ${this.status} ${this.statusText}`);
    }
  }
};

参数传递方式@

在开发中，我们使用最多的是GET和POST请求，在发送请求的过程中，我们也可以传递数据给服务器。

~~参数传递的方式~~：

常见的传递数据的方式有如下几种：

方式1：GET 请求 query 参数
方式2：POST 请求 x-www-form-urlencoded 格式
方式3：POST 请求 FormData 格式
方式4：POST 请求 JSON 格式

方式1：GET 请求 query 参数

open() 中参数以查询字符串（Query String）形式传递。
GET 请求时 send() 参数为空。

方式2：POST 请求 x-www-form-urlencoded 格式

open() 中参数不携带查询字符串。
通过 setRequestHeader() 设置 Content-Type 请求头为 x-www-form-urlencoded。
send() 方法中携带查询字符串形式的参数。

方式3：POST 请求 FormData 格式

open() 中参数不携带查询字符串。
不要设置 Content-Type。
send() 方法中携带 FormData 实例对象。

方式4：POST 请求 JSON 格式

open() 中参数不携带查询字符串。
通过 setRequestHeader() 设置 Content-Type 请求头为 applicaiton/json； chartset=utf-8。
send() 方法中携带 JSON.stringify(obj) 转化后的对象。

封装：AJAX 网络请求

基本实现-GET

调用方法：

实现代码：GET 请求

基本实现-POST

实现代码：POST 请求

延迟时间timeout和取消请求

在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。

当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉；
默认值为0，表示没有设置超时时间；

我们也可以通过abort方法强制取消请求；

Fetch

认识Fetch和Fetch API

Fetch可以看做是早期的XMLHttpRequest的替代方案，它提供了一种更加现代的处理方案：

比如返回值是一个Promise，提供了一种更加优雅的处理结果方式
- 在请求发送成功时，调用resolve回调then；
- 在请求发送失败时，调用reject回调catch；
比如不像XMLHttpRequest一样，所有的操作都在一个对象上；

fetch函数的使用：

input：定义要获取的资源地址，可以是一个URL字符串，也可以使用一个Request对象（实验性特性）类型；
init：其他初始化参数
- method: 请求使用的方法，如 GET、POST；
- headers: 请求的头信息；
- body: 请求的 body 信息；

Fetch数据的响应（Response）

Fetch的数据响应主要分为两个阶段：

阶段一：当服务器返回了响应（response）

fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析；
在这个阶段，我们可以通过检查响应头，来检查 HTTP状态以确定请求是否成功；
如果 fetch 无法建立一个 HTTP请求，例如网络问题，亦或是请求的网址不存在，那么 promise 就会 reject；
异常的 HTTP状态，例如 404 或 500，不会导致出现 error；

我们可以在 response 的属性中看到 HTTP状态：

status：HTTP状态码，例如 200；
ok：布尔值，如果 HTTP状态码为 200-299，则为 true；

第二阶段，为了获取 response body，我们需要使用一个其他的方法调用。

response.text() —— 读取 response，并以文本形式返回 response；
response.json() —— 将 response 解析为 JSON；

Fetch网络请求的演练

基于Promise的使用方案：

基于async、await的使用方案：

Fetch POST请求

创建一个 POST 请求，或者其他方法的请求，我们需要使用 fetch 选项：

method：HTTP方法，例如 POST，
body：request body，其中之一：
- 字符串（例如 JSON 编码的），
- FormData 对象，以 multipart/form-data 形式发送数据，

文件上传

XMLHttpRequest文件上传

文件上传是开发中经常遇到的需求，比如头像上传、照片等。

要想真正理解文件上传，必须了解服务器如何处理上传的文件信息；

Fetch文件上传

Fetch也支持文件上传，但是Fetch没办法监听进度。

S03-12 JS-高级-网络请求 ​

前后端分离 ​

服务器端渲染 ​

网页的渲染过程 ​

服务器端渲染 ​

前后端分离 ​

HTTP ​

概念 ​

HTTP ​

HTTPS ​

URI ​

网页中的资源 ​

HTTP 组成 ​

HTTP 版本 ​

HTTP 请求方式 ​

HTTP 请求头 ​

自定义请求头 ​

常见请求头 ​

Content-Type ​

Content-Length ​

Connection ​

Keep-Alive ​

Accept ​

Accept-Encoding ​

User-Agent ​

HTTP 状态码 ​

HTTP 响应头 ​

插件-FeHelper ​

AJAX ​

AJAX 概述 ​

XHR ​

API-XHR【 ​

基本使用 ​

XHR 请求状态 readyState ​

XHR 事件 ​

响应数据和响应类型 ​

HTTP 响应状态 status ​

参数传递方式@ ​

封装：AJAX 网络请求 ​

基本实现-GET ​

基本实现-POST ​

延迟时间timeout和取消请求 ​

Fetch ​

认识Fetch和Fetch API ​

Fetch数据的响应（Response） ​

Fetch网络请求的演练 ​

Fetch POST请求 ​

文件上传 ​

XMLHttpRequest文件上传 ​

Fetch文件上传 ​

S03-12 JS-高级-网络请求

前后端分离

服务器端渲染

网页的渲染过程

服务器端渲染

前后端分离

HTTP

概念

HTTP

HTTPS

URI

网页中的资源

HTTP 组成

HTTP 版本

HTTP 请求方式

HTTP 请求头

自定义请求头

常见请求头

Content-Type

Content-Length

Connection

Keep-Alive

Accept

Accept-Encoding

User-Agent

HTTP 状态码

HTTP 响应头

插件-FeHelper

AJAX

AJAX 概述

XHR

API-XHR【

基本使用

XHR 请求状态 readyState

XHR 事件

响应数据和响应类型

HTTP 响应状态 status

参数传递方式@

封装：AJAX 网络请求

基本实现-GET

基本实现-POST

延迟时间timeout和取消请求

Fetch

认识Fetch和Fetch API

Fetch数据的响应（Response）

Fetch网络请求的演练

Fetch POST请求

文件上传

XMLHttpRequest文件上传

Fetch文件上传