前言

在前端开发中，HTTP请求是不可或缺的一部分，无论是获取数据、提交表单还是与服务器进行其他类型的交互，前端请求都扮演着关键角色

随着技术的不断发展，前端请求的方式和工具也在不断演进，从最初的XMLHttpRequest(XHR)到现代的Fetch API，再到功能强大的各类请求库，每种方式和工具都有其独特的优点和使用场景

以下将从基础概念入手，逐步探讨不同请求方式的使用方法和实践，并希望通过这篇文章能够提升你在前端请求方面的技能和效率

什么是请求

在动态网页的开发中，我们需要在页面展示一些数据，这些数据通常不是固定的，也不是存储在本地的，而是需要通过客户端与服务端进行通信获取的，这种由客户端向服务器请求数据或提交数据，并接收服务器的响应的方式，就叫请求，通常是用HTTP/HTTPS协议，也可以称为HTTP请求

常见的HTTP请求方法包括GET、POST、PUT、DELETE等，每种方法有其特定的用途

如在RESTFUL的API设计风格中，每个资源都有一个唯一的URI，通过不同的请求方法区分操作，GET表示获取资源请求；POST表示新增资源请求；PUT修改；DELETE删除等，了解即可

XMLHttpRequest

XMLHttpRequest是浏览器原生支持的请求API，其兼容性如下：

XMLHttpRequest的历史可以追溯到20世纪90年代后期，由微软在IE5内首次引入了这一技术；后来，随着其在Ajax(Asynchronous JavaScript and XML)开发模式中的广泛应用，其它浏览器厂商也陆续实现类似功能

在2006年，其作为标准API在W3C中进行标准化，并定义了跨浏览器的XMLHttpRequest对象，由于其广泛的兼容性，XHR仍然在许多应用中得到使用，很多前端请求库的底层依旧基于它实现

功能特性

XHR是实现Ajax请求的核心工具，其提供了一些关键功能

异步请求：

• XHR可以发送异步请求，这意味着JS代码可以在等待服务器响应的同时继续执行其他任务，不会阻塞浏览器的UI线程

多种HTTP方法：

• 支持GET、POST、PUT、DELETE等HTTP方法，满足不同的请求需求

处理响应：

• 可以处理多种类型的响应数据，包括XML、JSON、纯文本等
• 通过responseText属性获取响应数据

事件驱动：

• 提供了一系列事件(如onreadystatechange、onload、onerror等)，使开发者可以对请求的不同阶段进行处理

对象介绍

XMLHttpRequest对象是Web API中用于与服务器进行交互的核心工具，其提供了各种属性、方法和事件

属性

XMLHttpRequest对象具有多种属性，可用于获取请求和响应的状态、数据等信息

readyState

用于描述当前的请求状态，为一个0-4的数值

• UNSENT — 客户端已创建，但open()方法尚未调用
• OPENED — open()方法已调用
• HEADERS_RECEIVED — send()方法已调用，响应头已收到
• LOADING — 正在接收响应体
• DONE — 请求完成

status

用于描述服务器响应的HTTP状态码(如：200、404等)，仅在readyState为4时有效

statusText

与status类似，用于描述服务器响应的HTTP状态文本(如：OK、Not Found等)，同样仅在readyState为4时有效

responseType

用于设置或返回响应数据的类型；可选值为：""(默认)、"arraybuffer"、"blob"、"document"、"json"、"text"

response

用于描述服务器响应的数据，类型取决于responseType的设置

与其类似的还有：

• responseText：用于描述服务器响应的文本数据；仅在responseType为""或"text"时有效
• responseXML：服务器响应的 XML 数据；仅在responseType为"document"时有效
• responseURL：返回响应的序列化 URL，如果有重定向，responseURL会指向的最终 URL

timeout

用于描述请求的超时时间，以毫秒为单位，默认值为0(表示没有超时限制)，超过了设置时限，就会自动停止 HTTP 请求

withCredentials

用于指定跨域请求是否应包含凭证(如cookies或Authorization等)进行跨站点访问控制，默认为false，该属性对同源请求是无效的

upload

返回一个XMLHttpRequestUpload对象，表示上传过程，可以用于监视上传进度

方法

XMLHttpRequest对象提供了多种方法，主要用于设置请求、发送数据等操作，大致如下：

open(method, url, async, user, password)

用于初始化一个请求，参数如下：

• method：HTTP 请求方法(如"GET"、"POST"
• url：请求的 URL
• async：是否异步(布尔值，默认为true)
• user：(可选)用户名
• password：(可选)密码

send(body)

用于发送请求，参数为一个body(可选，可以是Blob、BufferSource、FormData、URLSearchParams，或者USVString对象，甚至可以是Document)，表示请求主体，主要用于POST、PUT等方法

• 如果为异步请求(默认)，则此方法会在发送后立即返回
• 如果为同步请求(通过open参数设置)，则此方法直到响应到达后才会返回，会阻塞UI线程

abort()

用于取消当前请求

setRequestHeader(header, value)

用于设置 HTTP 请求头，参数如下：

• header：请求头名称
• value：请求头的值

getResponseHeader(header)

用于获取指定的响应头值，其参数如下：

• header：响应头名称

getAllResponseHeaders()

用于获取所有响应头的字符串，多个头部之间以回车符分隔

事件

XMLHttpRequest对象提供了一系列事件处理程序，可用于监听处理请求的不同阶段

onreadystatechange

在请求状态变化时触发，通常用于检测请求的各个阶段

onload

在请求完成且状态为200时触发

onerror

在请求失败时触发

onprogress

在请求进行时触发，常用于监视下载进度，事件提供一个even对象，主要有如下属性：

• lengthComputable：表示进度是否可以被计算(布尔值)
• 为true时，可通过loaded/total计算当前进度
• loaded：已加载的数据量(字节数)
• total：总数据量(字节数，如果lengthComputable为true)

onabort

在请求被取消时触发

ontimeout

在请求超时时触发

onloadstart

在请求开始时触发

onloadend

在请求完成(无论成功与否，即已经触发error，abort或load事件之后)时触发

使用方法

通过XHR提供的属性、方法、事件，可以处理各种HTTP请求

GET示例

POST示例

事件操作示例

文件上传示例

优缺点

XMLHttpRequest作为一种早期的Web请求技术，具有广泛的兼容性和丰富的功能，但其语法复杂且不支持现代的Promise和流处理

优点

• 兼容性广，正因为其出现的早，其兼容性几乎不需要担心，基本新老浏览器均支持
• 提供事件驱动模型，通过一系列事件处理程序，开发者能够在请求的不同阶段执行特定的操作，一定程度上降低处理请求的复杂性
• 支持同步及异步请求，在某些情况下，同步请求仍然有用(如调试或初始化设置等)
• 功能强大，可设置请求头、获取响应头、处理二进制数据、监视上传和下载进度等，使其能够满足各种复杂的请求需求；通过设置responseType属性，可以处理多种类型的响应数据

缺点

• 语法复杂，相较于现代的Fetch API，XMLHttpRequest的语法显得更加繁琐和复杂
• 不支持Promise，对于异步操作的链式调用和错误处理变得更加复杂
• 不支持流处理，这意味着无法像Fetch API那样，通过ReadableStream逐步处理大文件或流数据

总结

XMLHttpRequest作为一种早期的Web请求技术，具有广泛的兼容性和丰富的功能，但其语法复杂且不支持现代的Promise和流处理。随着Fetch API的出现和普及，XMLHttpRequest的使用频率逐渐降低，但其依旧担任着各类主流请求库的底层设计实现，如Axios、jQuery.ajax等，了解它，能够帮助我们更好地使用及理解这些工具