文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 javascript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
这篇文章瑶琴带大家学习浏览器中非常重要的一个api：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，使得异步数据获取和错误处理更加方便。
函数可以在不同条件下返回不同的值，但只有第一个执行的 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/
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的库才更容易理解。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。