前端请求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/

4. axios

axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它被设计为能够处理所有HTTP请求，无论是简单的GET请求还是复杂的请求，如上传文件或处理JSON响应。axios 的目标是提供一种简单、统一且可扩展的API。

主要特点：

1.基于 Promise：axios 的所有请求返回Promises，这使得你可以使用.then()和.catch()来处理成功的响应或捕获错误。

2.跨平台：可以在浏览器端和Node.js环境中使用。

3.简单易用：提供了简洁的API，使得发送HTTP请求变得简单。

4.请求和响应拦截器：允许你拦截请求或响应，以便在它们到达then或catch之前进行处理。

5.转换请求和响应数据：允许你转换发送到服务器之前的数据，以及从服务器接收到的数据。

6.取消请求：支持取消请求，可以用于防止悬挂请求。

7.JSON：自动转换JSON数据。

8.CORS：支持跨源资源共享（CORS）。

对于初学者来说，需要先从原生的XMLHttp请求开始，这是前端AJAX的基础。对于后期使用到的诸如axios的库才更容易理解。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。