重学JavaScript高级（十五）： XHR以及Fetch的理解应用

最新推荐文章于 2025-10-14 22:07:59 发布

原创

最新推荐文章于 2025-10-14 22:07:59 发布 · 1.5k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript XHR、Fetch

服务器端渲染-前后端分离

**服务器端渲染：**将html文件在后端，拼接好，将整个文件全部返回给前端
- 随着目前业务逻辑的复杂度提升，这种开发模式，会导致效率低下
- 同时，有时候前端页面仅修改一小部分数据，就需要将这个网页全部返回，无疑是对网络造成了部分压力

由于服务端渲染的弊端，因此有了 前后端分离的开发模式
- 前端通过静态服务器请求HTML文件，js脚本
- JS脚本中通过AJAX进行网络请求
- API服务器中写相应的API请求数据库中的数据

什么是HTTP协议

在维基百科中的解释
- 超文本传输协议 是一种分布式、协作式和超媒体信息系统的 应用层协议
- HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种 发布和接收HTML页面的方法
- 通过 HTTP或者HTTPS协议请求的资源由统一资源标识符来标识
HTTP是客户端（用户）和服务端（网站）之间请求和响应的标准
- 一次HTTP请求主要包括：请求（Request）和响应（Response）
- 请求：包含请求行、请求头和请求体
- 响应：包含响应行，响应头和响应体

HTTP的版本

HTTP/0.9
- 发布于1991年
- 只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面的内容
HTTP/1.0
- 发布于1996年
- 支持POST、HEAD等请求方法，支持请求头、响应头等，支持更多种数据类型
- 但是浏览器的每次请求都需要与服务器建立一个TCP连接、请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗
HTTP/1.1（目前使用最广泛的版本）
- 发布于1997年
- 增加了PUT、DELETE等请求方法
- 采用持久连接（Connection:keep-alive）,多个请求可以共同用一个TCP
HTTP/2.0
- 发布于2015年
HTTP/3.0
- 发布于2018年

HTTP请求方式

HTTP Request Header

content-type是这次请求携带的数据类型
- **application/x-www-form-urlencoded:**表示数据被编码成以 ‘&’分割的键值对，同时以=分隔键和值
- **application/json:**表示一个JSON类型
- text/plain:表示文本类型
- application/xml:表示xml类型
- **multipart/form-data:**表示是上传文件
content-length：文件的大小长度，不用手动配置
keep-alive
- http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立即中断
- 在http1.0中若想保持长连接，需要手动进行设置
- 在 http1.1中，所有的连接都是默认为connection:keep-alive
accept-encoding:告知服务器，客户端支持的压缩格式，服务器会返回相应的压缩格式的文件
**accept：**告知服务器，客户端可以接收的文件类型
**user-agent：**客户端的相关信息

HTTP Response响应状态码

AJAX发送请求

AJAX是异步的JavaScript和XML

它可以使用JSON、XML、HTML和text文本等格式发送和接收数据

XHR发送请求

如何来完成AJAX请求
- 创建网络请求的AJAX对象（使用XMLHttpRequest）
- 监听 XMLHttprequest对象状态的变化，或者监听 onload事件（请求完成时触发）
- 配置网络请求（通过 open方法）
- 发送 send网络请求

//创建AJAX对象
let xhr = new XMLHttpRequest();

//监听XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function () {
   
   
  console.log(xhr.response);
};

//配置网络请求
//method:get/post/delete
//URL
xhr.open("GET", "http://123.207.32.32:8000/home/multidata");

//发送send网络请求
xhr.send();

XHR状态变化的监听

事实上，我们在一次网络请求中，可以看到XHR的状态发生了很多次的变化

值	状态	描述
0	UNSENT	代理被创建，但是尚未调用open()方法（不会被监听）
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，并且头部和状态已经可以获得
3	LOADING	下载中:reponseText属性已经包含部分数据
4	DONE	下载操作已经完成

因此我们若想获取请求之后的数据，需要在XHR的状态码为4的时候进行获取（注意此状态码不是HTTP的状态码）

//创建AJAX对象
let xhr = new XMLHttpRequest();

//监听XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function () {
   
   
  //这样写，代码阅读性不是很好
  //   if (xhr.readyState !== 4) return;
  //此写法，等同于上面的的写法XMLHttpRequest.DONE代表常量
  if (xhr.readyState !== XMLHttpRequest.DONE) return;
  console.log(xhr.response);
};

//配置网络请求
//method:get/post/delete
//URL
xhr.open("GET", "http://123.207.32.32:8000/home/multidata");

//发送send网络请求
xhr.send();