当前位置：首页 > news >正文

【前端网络请求入门】XMLHttpRequest与Fetch保姆级教程

news 来源：原创 2025/9/8 16:47:23

新手学前端时，经常会被「如何让网页和服务器说话」难住。今天我们用最通俗的语言，把浏览器最常用的两种网络请求方式——XMLHttpRequest和Fetch讲清楚，还会带完整的代码示例，跟着敲一遍就能上手！

一、先搞懂「网络请求」是什么？

就像你点外卖时打电话给商家：

你告诉商家地址（请求地址）
说清楚要什么餐（请求参数）
商家做好后把外卖给你（返回数据）

浏览器和服务器通信也是一样的道理，只不过「打电话」的工具就是XHR和Fetch。

二、第一种工具：XHR（老派但可靠）

XHR是XMLHttpRequest的缩写，2000年左右就有了，虽然有点「老」，但兼容性超好，所有浏览器都支持。

1. 发送GET请求（获取数据）

就像你打电话问商家「今天有什么推荐菜」：

// 1. 创建一个"电话"对象
const xhr = new XMLHttpRequest();// 2. 告诉"电话"要打给谁（请求地址）和用什么方式（GET）
xhr.open('GET', 'https://api.example.com/products');// 3. 监听商家什么时候回复（响应处理）
xhr.onload = function() {if (xhr.status === 200) { // 200表示成功console.log('服务器回复了：', xhr.responseText); // 回复内容是字符串}
};// 4. 拨打电话！
xhr.send();

2. 发送POST请求（提交数据）

比如你告诉商家「我要订一份宫保鸡丁，地址是XXX」：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/orders');// 设置请求头（告诉商家我要发JSON格式的数据）
xhr.setRequestHeader('Content-Type', 'application/json');xhr.onload = function() {if (xhr.status === 201) { // 201表示创建成功console.log('订单提交成功！');}
};// 发送的数据（转成JSON字符串）
const data = {product: '宫保鸡丁',address: 'XX路123号'
};
xhr.send(JSON.stringify(data));

XHR的缺点：

代码像「拼积木」，步骤多
处理错误要用onerror，不够直观
不支持Promise，异步处理麻烦（需要嵌套回调）

三、第二种工具：Fetch（现代派，更简洁）

Fetch是ES6推出的新API，基于Promise设计，代码更简洁优雅，是现在的主流选择。

1. 发送GET请求（用async/await更简单）

async function fetchProducts() {try {// 1. 发起请求（相当于拨号）const response = await fetch('https://api.example.com/products');// 2. 解析响应（商家把外卖递给你，你要打开包装）// 常见的解析方式：const jsonData = await response.json(); // 解析JSON数据// const textData = await response.text(); // 解析纯文本// const blobData = await response.blob(); // 解析二进制文件（如图像）console.log('获取到的数据：', jsonData);} catch (error) {console.error('请求失败：', error); // 网络错误会走到这里}
}// 调用函数
fetchProducts();

2. 发送POST请求（带数据）

async function submitOrder() {try {const data = {product: '宫保鸡丁',address: 'XX路123号'};const response = await fetch('https://api.example.com/orders', {method: 'POST', // 请求方法headers: {'Content-Type': 'application/json', // 设置请求头},body: JSON.stringify(data), // 发送的body数据（必须是字符串或Blob）});if (!response.ok) { // 检查HTTP状态码（比如400错误）throw new Error(`HTTP错误：${response.status}`);}const result = await response.json();console.log('服务器返回：', result);} catch (error) {console.error('提交失败：', error);}
}

Fetch的优点：

语法更简洁，像「写人话」
天然支持Promise，用async/await处理异步更清晰
功能更强大（支持请求/响应体、流处理等）

注意！Fetch的「坑」：

网络错误才会触发catch：比如断网、域名错误。但如果服务器返回404/500等HTTP错误，不会进catch，需要手动检查response.ok
必须手动解析响应：XHR的responseText直接是字符串，Fetch需要用response.json()等方法解析
老浏览器不支持：IE浏览器完全不支持，需要加「polyfill」（兼容性补丁）

四、XHR和Fetch怎么选？

场景	推荐用XHR	推荐用Fetch
兼容性要求高	✅（所有浏览器都支持）	❌（需polyfill兼容IE）
现代项目开发	❌（代码繁琐）	✅（主流选择）
需要精确控制请求过程	✅（能监听`progress`进度）	❌（需配合AbortController）
处理复杂响应	❌（只能解析字符串）	✅（支持JSON/Blob/流等）

五、实战：用Fetch做一个「天气查询」小Demo

步骤1：HTML结构

<input type="text" id="city" placeholder="输入城市名">
<button id="search">查询天气</button>
<p id="result"></p><script>const searchBtn = document.getElementById('search');searchBtn.addEventListener('click', async function() {const city = document.getElementById('city').value;if (!city) return;try {const response = await fetch(`https://api.weather.com?city=${city}`);const data = await response.json();document.getElementById('result').textContent = `天气：${data.weather}`;} catch (error) {document.getElementById('result').textContent = '查询失败，请重试';}});
</script>

步骤2：关键代码解释

fetch(https://api.weather.com?city=${city})：拼接带城市参数的URL
response.json()：把服务器返回的JSON数据转成JS对象
错误处理：同时处理网络错误和HTTP错误（通过response.ok）

六、总结：新人必记的3个重点

XHR是「老大哥」：虽然代码多，但兼容性好，适合需要支持古老浏览器的项目
Fetch是「新宠儿」：语法简单功能强，现代项目首选，但要记得处理HTTP错误
核心流程不变：不管用哪个工具，都是「发起请求→处理响应→处理错误」这三步

【前端网络请求入门】XMLHttpRequest与Fetch保姆级教程

新手学前端时，经常会被「如何让网页和服务器说话」难住。今天我们用最通俗的语言，把浏览器最常用的两种网络请求方式——XMLHttpRequest和Fetch讲清楚，还会带完整的代码示例，跟着敲一遍就能上手！ 一、先搞懂「网络请求…...

编程日记 2025/9/8 16:47:23

redis单机安装

redis单机安装下载地址官网：https://redis.io/下载列表页面：https://download.redis.io/releases/ 说明版本选择：redis-7.0.0.tar.gz下载地址：https://download.redis.io/releases/redis-7.0.0.tar.gz 安装前准备在linu…...

编程日记 2025/9/8 16:42:03

从零手写RPC-version0

参考文档 https://github.com/he2121/MyRPCFromZero Version-0 0、写项目第一步，先添加远程仓库先在 github 上新建仓库，然后将本地新建的项目推送到远程仓库中由于网上很多教程，所以本节不再赘述（可以让 chatGPT给出一个完…...

编程日记 2025/9/8 16:41:34

MOM成功实施分享（八）汽车活塞生产制造MOM建设方案（第二部分）

在制造业数字化转型的浪潮中，方案对活塞积极探索，通过实施一系列数字化举措，在生产管理、供应链协同、质量控制等多个方面取得显著成效，为行业提供了优秀范例。 1.转型背景与目标：活塞在数字化转型前面临诸多挑战&…...

编程日记 2025/9/8 16:41:35

二、Android Studio环境安装

一、下载安装下载 Android Studio 和应用工具 - Android 开发者 | Android DevelopersAndroid Studio 提供了一些应用构建器以及一个已针对 Android 应用进行优化的集成式开发环境 (IDE)。立即下载 Android Studio。https://developer.android.google.cn/studio?hlzh-c…...

编程日记 2025/9/8 16:41:34

构件与中间件技术：概念、复用、分类及标准全解析

以下是对构件与中间件技术相关内容更详细的介绍： 一、构件与中间件技术的概念 1.构件技术定义：构件是具有特定功能、可独立部署和替换的软件模块，它遵循一定的规范和接口标准，能够在不同的软件系统中被复用。构件技术就是以构…...

编程日记 2025/9/8 16:38:38

亲手打造可视化故事线管理工具：开发全流程、难点突破与开发过程经验总结

亲手打造可视化故事线管理工具：开发全流程、难点突破与开发过程经验总结作为还没入门的业余编程爱好者，奋战了2天，借助AI开发一款FLASK小工具，功能还在完善中（时间轴可以跟随关联图缩放，加了一个用C键控制…...

编程日记 2025/9/8 16:42:04

CSS 字体学习笔记

在网页设计中，字体的使用对于提升用户体验和页面美观性至关重要。CSS 提供了一系列字体属性，用于控制文本的显示效果。以下是对 CSS 字体属性的详细学习笔记。一、字体系列（font-family） 1. 字体系列的分类在 CSS 中&#xf…...

编程日记 2025/9/8 16:45:17

通过 spring ai 对接 deepseek ai 大模型通过向量数据库，完成 AI 写标书及构建知识库功能的设计与开发

编程日记 2025/9/8 16:39:15

cropperjs 2.0裁剪图片后转base64提示“Tainted canvases may not be exported”跨域问题的解决办法。

目录为什么会有这边文章辛酸历程，不看也罢想解决问题，看这里就够了问题已解决，后边还是废话为什么会有这边文章最近，做一个项目需要用在前端实现图片裁剪功能，毋庸置疑，cropperjs是不二选择。当在…...

编程日记 2025/9/8 16:44:47

2、JSX：魔法世界的通行证——用魔法符号编织动态界面

一、开篇：魔法符号的觉醒 "看呐，赫敏！这根魔杖（React组件）为何能自动绘制出动态界面？"年轻的巫师学徒罗恩指着闪烁的屏幕惊呼。 "这就是JSX魔法阵的威力，"邓布利多校长挥舞…...

编程日记 2025/9/8 16:42:03

八大排序算法

目录八大排序算法排序算法的稳定性比较排序插入排序直接插入排序希尔排序希尔排序的时间复杂度计算选择排序直接选择排序堆排序交换排序冒泡排序快速排序递归hoare版本挖坑法lomuto前后指针非递归归并排序排序性能对比非比较排序计数排序比较排序算法总结八大排序算法 …...

编程日记 2025/9/8 16:44:44

搭建一个Spring Boot聚合项目

1. 创建父项目打开IntelliJ IDEA，选择 New Project。在创建向导中选择 Maven，确保选中 Create from archetype，选择 org.apache.maven.archetypes:maven-archetype-quickstart。填写项目信息： GroupId：com.exampl…...

编程日记 2025/9/3 21:17:07

Google A2A协议解析：构建分布式异构多Agent系统

一、A2A 是什么？有什么用？ 1.1 A2A 是什么？ A2A（Agent-to-Agent Protocol）是Google最新推出的一项开源协议，旨在为AI智能体（Agents）提供标准化的通信方式。它允许不同框架&#xf…...

编程日记 2025/9/5 14:26:01

【Android读书笔记】读书笔记记录

文章目录一. Android开发艺术探索1. Activity的生命周期和启动模式1.1 生命周期全面分析一. Android开发艺术探索 1. Activity的生命周期和启动模式 1.1 生命周期全面分析 onPause和onStop onPause后会快速调用onStop，极端条件下直接调用onResume 当用户打开新…...

编程日记 2025/9/8 16:44:46

支持selenium的chrome driver更新到135.0.7049.84

最近chrome释放新版本：135.0.7049.84 如果运行selenium自动化测试出现以下问题，是需要升级chromedriver才可以解决的。 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This version of ChromeDriver only su…...

编程日记 2025/9/8 16:45:51

【玩泰山派】MISC（杂项）- 使用vscode远程连接泰山派进行开发

文章目录前言流程1、安装、启动sshd2、配置一下允许root登录3、vscode中配置1、安装remote插件2、登录 **注意** 前言有时候要在开发板中写一写代码，直接在终端中使用vim这种工具有时候也不是很方便。这里准备使用vscode去通过ssh远程连接泰山派去操作&#xff0…...

编程日记 2025/9/8 16:38:37

利用阿里云企业邮箱服务实现Python群发邮件

目录一、阿里云企业邮箱群发邮件全流程实现 1. 准备工作与环境配置 2. 收件人列表管理 3. 邮件内容构建 4. 附件添加实现 5. 邮件发送核心逻辑二、开发过程中遇到的问题与解决方案 1. 附件发送失败问题 2. 中文文件名乱码问题 3. 企业邮箱认证失败三、完整工作流…...

编程日记 2025/9/8 16:42:02

中文编码，GB系列，UTF

图片来源：https://zhuanlan.zhihu.com/p/701690894 文章目录 ASCIIGB系列编码UTF编码 ASCII American Standard Code for Information Interchange 一个字节，但其实只用了一半： 128个字符 GB系列编码 “国标” 和ASCII是兼容的。 GB2312…...

编程日记 2025/9/8 16:41:35

车载以太网-TLS

文章目录车载以太网与TLS的技术背景核心定位车载以太网TLS的技术架构车载TLS的核心安全机制TLS报文结构详解TLS工作机制密钥交换与计算流程标题完整握手流程（1-RTT）数据传输加密流程车载TLS的独特优化策略车载TLS的安全威胁相关标准车载以太网TLS（Transport Layer Security…...

编程日记 2025/9/8 16:38:37

【大英赛】大英赛准备笔记

听力总结提醒专注一题一个听力时，听是重点抓紧时间往后审题比较容易的部分：secA & secD中的dictation，在大致审当前的基础上，分别利用这个时间提前看后面的secB√& summery secA 听之前应当大致审选项&#x…...

编程日记 2025/9/8 16:47:22

有序数组的平方

暴力排序每个数平方以后排个序 class Solution { public:vector<int> sortedSquares(vector<int>& nums) {int slow0,fast0;int nnums.size();while(fast<n){nums[slow]nums[fast]*nums[fast];fast;slow;}sort(nums.begin(),nums.end());return nums;} }…...

编程日记 2025/9/7 21:31:50

Python基于Django的房屋信息可视化及价格预测系统（附源码，文档说明）

博主介绍：✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…...

编程日记 2025/9/8 16:44:46

【5G-A学习】ISAC通信感知一体化学习小记

通信感知一体化（Integrated Sensing and Communication, ISAC）是一种将无线通信与环境感知功能深度融合的技术，通过共享硬件、频谱和信号处理流程，实现通信与感知的协同增效。其核心原理及无人机与飞鸟的识别方式如下：…...

编程日记 2025/9/8 16:45:16

深入解析@Validated注解：Spring 验证机制的核心工具

一、注解出处与核心定位 1. 注解来源 • 所属框架：Validated 是 Spring Framework 提供的注解（org.springframework.validation.annotation 包下）。 • 核心定位： 作为 Spring 对 JSR-380（Bean Validation 2.0&#…...

编程日记 2025/9/8 16:39:16

学生考勤管理系统（jsp+ssh+mysql5.x）含文档

学生考勤管理系统（jspsshmysql5.x）含万字详细文档学生考勤管理系统是一个用于管理学生出勤和请假的系统，系统登录页面提供账号和密码输入框，用户可以选择角色进行登录。系统主菜单包括班级管理、用户管理、课程表管理和考勤情况…...

编程日记 2025/9/3 19:26:16

【响应式编程】Reactor 常用操作符与使用指南

文章目录一、创建操作符1. just —— 创建包含指定元素的流2. fromIterable —— 从集合创建 Flux3. empty —— 创建空的 Flux 或 Mono4. fromArray —— 从数组创建 Flux5. fromStream —— 从 Java 8 Stream 创建 Flux6. create —— 使用 FluxSink 手动发射元素7. generat…...

编程日记 2025/9/8 16:45:53

为什么我们需要if name == main:

[目录] 0.前言 1.什么是 __name__？ 2.if __name__ __main__: 的作用 3.为何Windows更需if __name__ ？前言 if __name__ __main__: 是 Python 中一个非常重要的惯用法，尤其在使用 multiprocessing 模块或编写可导入的模块时。它的作用是区分…...

编程日记 2025/8/29 2:57:49

Week 1: Time Complexity, Rectangle Geometry

问题集 Square PastureBucket BrigadeBlocked BillboardBlocked Billboard IIWord ProcessorDo You Know Your ABCs?The Cow-SignalD3C - White Sheet 视频解析 Square Pasture Bucket Brigade Blocked Billboard Blocked Billboard II Word Processor Do You Know Your AB…...

编程日记 2025/9/3 8:58:09

论文学习：《通过基于元学习的图变换探索冷启动场景下的药物-靶标相互作用预测》

原文标题：Exploring drug-target interaction prediction on cold-start scenarios via meta-learning-based graph transformer 原文链接：https://www.sciencedirect.com/science/article/pii/S1046202324002470 药物-靶点相互作用（DTI&…...

编程日记 2025/9/7 14:49:31

STM32 HAL库 OLED驱动实现

一、概述 1.1 OLED 显示屏简介 OLED（Organic Light - Emitting Diode）即有机发光二极管，与传统的 LCD 显示屏相比，OLED 具有自发光、视角广、响应速度快、对比度高、功耗低等优点。在嵌入式系统中，OLED 显示屏常被用…...

编程日记 2025/9/4 21:37:20

UE5蓝图之间的通信------接口

一、创建蓝图接口二、双击创建的蓝图接口，添加函数，并重命名新函数。三、在一个蓝图（如玩家角色蓝图）中实现接口，如下图： 步骤一：点击类设置步骤二：在细节面板已经实现的接口中…...

编程日记 2025/9/3 7:58:14

封装Tcp Socket

封装Tcp Socket 0. 前言1. Socket.hpp2. 简单的使用介绍 0. 前言本文中用到的Log.hpp在笔者的历史文章中都有涉及，这里就不再粘贴源码了，学习地址如下：https://blog.csdn.net/weixin_73870552/article/details/145434855?spm1001.2014.3001…...

编程日记 2025/9/2 16:13:43

深入解析 Android 图形系统：Canvas、Skia、OpenGL 与 SurfaceFlinger 的协作

在 Android 应用开发中，流畅的 UI 渲染是用户体验的核心。但你是否好奇，一个简单的 View 是如何从代码中的 onDraw() 方法一步步变成屏幕上的像素的？本文将从底层图形系统的视角，解析 Android 中 Canvas、Skia、OpenGL ES 和 Surf…...

编程日记 2025/9/5 13:14:47

LeetCode每日一题4.13

1922. 统计好数字的数目问题问题分析题目要求我们找到长度为 n 且满足特定条件（偶数下标处为偶数，奇数下标处为质数）的数字字符串的总数，并对 (10^9 7) 取余。思路 1.枚举生成所有可能的数字字符串：对于长度…...

编程日记 2025/9/7 4:34:24

Java学习——day29（并发控制高级工具与设计模式）

文章目录 1. 并发控制高级工具简介1.1 CountDownLatch1.2 CyclicBarrier1.3 Semaphore1.4 并发设计模式 2. 扩展生产者—消费者示例2.1 示例代码 3. 代码详解3.1 主类 ExtendedProducerConsumerDemo3.2 Buffer 类3.3 Producer 类3.4 Consumer 类 4. 编译与运行结果4.1 编译4.2 …...

编程日记 2025/9/5 8:56:07

使用FormData格式上传图片

为什么要使用FormData格式上传图片 1. 为什么使用 FormData？ FormData 是一种专门用于构建表单数据的对象，它能够以 multipart/form-data 格式发送数据，这是文件上传的标准格式。以下是使用 FormData 的主要原因： 简单易用直…...

编程日记 2025/9/2 11:00:51

Tkinter表格与列表框应用

在图形用户界面（GUI）开发中，表格和列表框是常用的控件，用于显示和管理大量的数据。Tkinter提供了Listbox控件来显示简单的列表数据，而对于更复杂的表格数据，可以使用Treeview控件（属于ttk模块）来实现。这一章将介绍如何使用Listbox和Treeview来显示和操作数据，帮助您处…...

编程日记 2025/9/5 22:21:47

【Excel】数据透视表月度数据排序不正确

【问题】插入数据透视表后，月度列显示的日期，是按照文本格式排序的，显然与实际月份排序并不相符。【目的】按照从1月份到12月份进行自然月度排序。【方法】步骤一： 在任意一处，输入“1月”-“12月”&#…...

编程日记 2025/9/7 1:23:44

HCIP第十天

OSPF的数据包 OSPF是跨层封装协议，直接封装在网络层之上 --- 需要IP协议使用一个协议号来标定 OSPF --- 89 OSPF的头部版本 --- OSPF的版本 --- 2 类型 --- OSPF数据包的类型 --- hello -- 1 DBD -- 2 LSR -- 3 LSU -- 4 LSACK -- 5 路由器ID --- RID --- 携带的是发出O…...

编程日记 2025/9/3 11:20:33

Vue2，Vue3知识大全

Vue 1.了解vue,快速上手 vue是一个用于构建用户的界面的渐进式框架. vue的两种使用方法: vue核心包开发场景:局部模块改造 vue核心包&vue插件工程化开发场景:整站开发 1.创建一个vue实例: 2.插值表达式 1.插值表达式是一种Vue的模版语法作用:利用表达式进行插值…...

编程日记 2025/9/2 23:01:51

java面向对象02：回顾方法

回顾方法及加深定义方法修饰符返回类型 break：跳出switch和return的区别方法名参数列表 package com.oop.demo01;//Demo01类 public class Demo01 {//main方法public static void main(String[] args) {}/*修饰符返回值类型方法名(...){//方法体return…...

编程日记 2025/9/8 5:40:10

【Ubuntu】【树莓派】Linux系统的远程终端登录、远程图形桌面访问、 X图形窗口访问和文件传输操作

目录一、Ubuntu远程终端并实现文件上传下载 1.1Ubuntu桥接模式设置和新用户的创建 1.2Ubuntu的远程登录并上传和下载文件 1.3在Xming中进行Ubuntu的图形访问二、树莓派远程登录并实现文件上传下载 2.1树莓派在putty上的远程登录 2.2使用ftp远程登录并实现文件上传下载…...

编程日记 2025/9/6 11:49:22

Linux Kernel 2

地址空间（Address Space） 一、物理地址空间（Physical Address Space） 物理地址空间是指 RAM 和设备内存在系统内存总线上所呈现的地址布局。举例：在典型的 32 32 32 位 Intel 架构中， RAM&#xff08…...

编程日记 2025/9/4 4:24:24

二.springBoot项目集成ElasticSearch及使用

二.springBoot项目集成ElasticSearch及使用 1.依赖引入2.ElasticSearch常见用法 1.依赖引入   <dependency><groupId>org.elasticse…...

编程日记 2025/9/3 15:21:51

从三次方程到复平面：复数概念的奇妙演进（一）

注：本文为 “复数 | 历史 / 演进” 相关文章合辑。因 csdn 篇幅限制分篇连载，此为第一篇。生料，不同的文章不同的点。机翻，未校。 Reflections on the History of Complex Numbers 复数的历史回顾 The first occurrence o…...

编程日记 2025/9/6 5:52:41

Day52 | 6. Z 字形变换、8. 字符串转换整数 (atoi)、22. 括号生成、38. 外观数列

6. Z 字形变换题目链接：6. Z 字形变换 - 力扣（LeetCode） 题目难度：中等代码： class Solution {public String convert(String s, int numRows) {if(numRows<2) return s;List<StringBuilder> rowsnew A…...

编程日记 2025/9/7 4:15:43