前端请求XMLHttpRequest详解

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 javascript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

这篇文章瑶琴带大家学习浏览器中非常重要的一个api：XMLHttpRequest。

1.XMLHttpRequest

XMLHttpRequest 是一个浏览器API，用于在客户端和服务器之间传输数据。它是AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）的基础，允许网页在不重新加载的情况下与服务器交换数据，从而可以实现创建快速动态的网页。

使用场景：

1.数据加载：在不刷新页面的情况下，从服务器获取数据并更新页面的某些部分。

2.表单提交：异步提交表单数据，无需刷新页面。

3.文件上传：上传文件到服务器。

4.跨域请求：通过设置HTTP头部，可以进行跨域通信。

示例：

// 创建一个新的 XMLHttpRequest 对象 
var xhr = new XMLHttpRequest(); // 配置请求类型、URL 以及是否异步处理 
xhr.open('GET', 'https://api.example.com/data', true); // 设置请求成功后的回调函数 
xhr.onload = function() { 
if (xhr.status >= 200 && xhr.status < 300) { 
// 解析返回的 JSON 数据 var data = JSON.parse(xhr.responseText); console.log(data); } else { // 处理错误情况 console.error('Request failed'); } 
}; // 发送请求 
xhr.send();

再来了解下fetch，fetch 是 XMLHttpRequest 的现代替代品，它是一个更简洁、功能更强大的API。fetch 返回一个 Promise，使得异步数据获取和错误处理更加方便。

3.fetch

函数可以在不同条件下返回不同的值，但只有第一个执行的 return 语句会生效。一旦遇到 return，函数就会结束执行。

使用场景：

1.数据获取：与 XMLHttpRequest 类似，用于获取数据。

2.流式处理：可以处理服务器发送的响应流。

3.自定义请求头：允许设置自定义请求头。

4.响应处理：可以方便地处理不同类型的响应（如JSON、blob、text等）。

示例：

// 使用 fetch 获取数据
fetch('https://api.example.com/data')  .then(response => {       // 检查响应状态是否成功        
if (!response.ok) {              throw new Error('Network response was not ok');       }        
// 解析JSON响应体       return response.json();  
}).then(data => {        // 使用数据        console.log(data);  
}).catch(error => {        // 处理错误        console.error('There has been a problem with your fetch operation:', error);  
});。

你可以将 XMLHttpRequest 想象成一辆老旧的汽车，它能够完成从一个地方到另一个地方（客户端到服务器）的旅行，但是操作起来比较复杂，需要手动控制每一个步骤。

而 fetch 则像是一辆现代化的自动驾驶汽车，它也能完成同样的旅行，但是更加智能和简便，你只需要告诉它目的地（URL），它就会自动规划路线，处理行驶中的各种情况，并且能够以多种方式（比如直接在车上看电影、听音乐）享受旅途。

随着前端技术的发展，fetch 逐渐成为主流，并且也出现很多请求库，比如axios。

但是在一些老旧的项目或者需要支持较老浏览器的情况下，XMLHttpRequest 仍然有其使用场景。对于前端初学者来说，理解这两个API的基本概念和使用方法是非常重要的。

下面再简单介绍下axios，它是现代前端开发中必不可少的网络请求库。中文文档：http://www.axios-js.com/