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

前端Ajax、Axios和Fetch的用法和区别笔记

news 2026/3/31 8:48:15

前端 JavaScript 开发中，进行 HTTP 请求的三种主要方式是 Ajax、Axios 和 Fetch。这三种方式各有优缺点，并且适用于不同的场景。在合适的业务场景下使用，以下是它们的区别和使用举例。

1. Ajax

Ajax（Asynchronous JavaScript and XML）是一种使用 JavaScript 和 XML 进行异步网页更新的技术。尽管其名称中包含 XML，但它可以处理多种数据格式，包括 JSON、HTML 和纯文本。传统上，Ajax 使用的是XMLHttpRequest对象。

Ajax 示例

<!DOCTYPE html>
<html>
<head><title>Ajax Example</title>
</head>
<body><button id="loadData">Load Data</button><div id="result"></div><script>document.getElementById('loadData').addEventListener('click', function() {var xhr = new XMLHttpRequest();xhr.open('GET', 'https://mybj123.com/22015.html', true);xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById('result').innerHTML = xhr.responseText;}};xhr.send();});</script>
</body>
</html>

2. Axios

Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js。它具有简单易用的 API，支持拦截请求和响应、取消请求、自动转换 JSON 数据等功能。

安装 Axios

在使用 Axios 之前，需要安装它：

npm install axios

Axios 示例

<!DOCTYPE html>
<html>
<head><title>Axios Example</title><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body><button id="loadData">Load Data</button><div id="result"></div><script>document.getElementById('loadData').addEventListener('click', function() {axios.get('https://mybj123.com/22015.html').then(function(response) {document.getElementById('result').innerHTML = JSON.stringify(response.data, null, 2);}).catch(function(error) {console.error('Error:', error);});});</script>
</body>
</html>

3. Fetch

Fetch API 是现代浏览器中用来替代XMLHttpRequest的，提供了一个更强大和灵活的方式来发起网络请求。它基于 Promise，语法更加简洁。

Fetch 示例

<!DOCTYPE html>
<html>
<head><title>Fetch Example</title>
</head>
<body><button id="loadData">Load Data</button><div id="result"></div><script>document.getElementById('loadData').addEventListener('click', function() {fetch('https://mybj123.com/22015.html').then(response => response.json()).then(data => {document.getElementById('result').innerHTML = JSON.stringify(data, null, 2);}).catch(error => {console.error('Error:', error);});});</script>
</body>
</html>

区别与比较

  1. 使用简便性：
    • Ajax：使用XMLHttpRequest对象，需要处理各种状态和事件，代码较为冗长。
    • Axios：基于 Promise，API 设计更简洁，使用更方便，支持更多功能。
    • Fetch：原生 Promise 支持，语法简洁，但需要处理一些低级错误（例如网络错误不会被捕捉到，需要手动处理response.ok）。
  2. 浏览器支持：
    • Ajax：所有现代浏览器都支持。
    • Axios：需要引入外部库，但支持所有现代浏览器。
    • Fetch：所有现代浏览器（Edge 开始支持），但对于老版本浏览器（如 IE）需要使用 polyfill。
  3. 功能特性：
    • Ajax：功能较为基础，需要手动处理各种请求和响应。
    • Axios：支持请求和响应拦截器、自动转换 JSON 数据、取消请求等高级功能。
    • Fetch：提供基本功能，响应处理需要手动转换（例如 JSON），且不支持progress事件和取消请求。

通过上述示例和详细解释，你可以根据项目需求选择合适的 HTTP 请求方式。Ajax 适合处理传统项目中的简单请求，Axios 提供了更高级的功能和便捷的 API，而 Fetch 则是现代前端开发中的主流选择。

相关文章：

前端Ajax、Axios和Fetch的用法和区别笔记

前端 JavaScript 开发中&#xff0c;进行 HTTP 请求的三种主要方式是 Ajax、Axios 和 Fetch。这三种方式各有优缺点&#xff0c;并且适用于不同的场景。在合适的业务场景下使用&#xff0c;以下是它们的区别和使用举例。 1. Ajax Ajax&#xff08;Asynchronous JavaScript an…...

编程日记 2024/5/29 6:12:50

Android的Framework（TODO）

&#xff08;TODO&#xff09;...

编程日记 2024/5/29 6:11:48

牛客小白月赛94 EF题解

题目描述 注&#xff1a;此版本为本题的hard&#xff08;困难版&#xff09;&#xff0c;与easy&#xff08;简单版&#xff09;唯一的不同之处只有数据范围。 小苯有一个容量为 k 的背包&#xff0c;现在有 n 个物品&#xff0c;每个物品有一个体积 v 和价值 w&#xff0…...

编程日记 2024/5/29 6:10:46

大数据开发面试题【Flink篇】

148、flink架构 flink是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算 特点&#xff1a; 高吞吐和低延迟&#xff1a;每秒数百万个事件&#xff0c;毫秒级延迟 结果的准确性&#xff1a;提供了事件时间和处理时间语义&#xff0c;提供结果的一致…...

编程日记 2024/5/29 6:09:45

Java技术深度解析：高级面试问题与精粹答案（二）

Java 面试问题及答案 1. 什么是Java的垃圾回收机制&#xff1f;它是如何工作的&#xff1f; 答案&#xff1a; Java的垃圾回收机制&#xff08;Garbage Collection&#xff0c;GC&#xff09;是Java运行时环境&#xff08;JRE&#xff09;中的一个功能&#xff0c;用于自动管…...

编程日记 2024/5/29 6:08:43

算数运算符

算术运算符是用于数值类型变量计算的运算符。 它的返回结果是数值。 赋值符号 关键知识点&#xff1a;先看右侧&#xff0c;再看左侧&#xff0c;把右侧的值赋值给左侧的变量。 附上代码&#xff1a; string myName "唐唐"; int myAge 18; float myHeight 177.5…...

编程日记 2024/5/29 6:07:42

闲话 .NET（3）：.NET Framework 的缺点

前言 2016 年&#xff0c;微软正式推出 .NET Core 1.0&#xff0c;并在 2019 年全面停止 .NET Framework 的更新。 .NET Core 并不是 .NET Framework 的升级版&#xff0c;而是一个从头开始开发的全新平台&#xff0c;一个跟 .NET Framework 截然不同的开源技术框架。 微软为…...

编程日记 2024/5/29 6:06:40

WPF实现简单的3D图形

简述 Windows 演示基础 &#xff08;WPF&#xff09; 提供了一种功能&#xff0c;用于根据应用程序要求绘制、转换 3D 图形并为其添加动画效果。它不支持完整的3D游戏开发&#xff0c;但在某种程度上&#xff0c;您可以创建3D图形。 通过组合 2D 和 3D 图形&#xff0c;您还可以…...

编程日记 2024/5/29 6:05:39

设计模式之创建型模式---原型模式(ProtoType)

文章目录 概述类图原型模式优缺点优点缺点 代码实现 概述 在有些系统中&#xff0c;往往会存在大量相同或者是相似的对象&#xff0c;比如一个围棋或者象棋程序中的旗子&#xff0c;这些旗子外形都差不多&#xff0c;只是演示或者是上面刻的内容不一样&#xff0c;若此时使用传…...

编程日记 2024/5/29 6:04:38

git命令新建远程仓库

今天记录一下使用git命令新建远程分支的操作&#xff0c;因为公司的代码管理仓库界面没找到新建分支的操作界面&#xff0c;无奈只能通过git命令来新建分支。 1、新建本地分支 首先&#xff0c;你的至少应该已经有了一个master分支&#xff0c;然后你再master分支下面执行下面…...

编程日记 2024/5/29 6:03:36

Defog发布Llama-3-SQLCoder-8B，文本转SQL模型，性能比肩GPT-4，准确率超90%，消费级硬件可运行

前言 在计算语言学领域&#xff0c;将自然语言转化为可执行的SQL查询是一个重要的研究方向。这对于让那些没有编程或SQL语法知识的用户也能轻松访问数据库信息至关重要。Defog团队近日发布了基于Llama-3的SQLCoder-8B模型&#xff0c;它在文本转SQL模型领域取得了显著突破&…...

编程日记 2024/5/29 6:02:35

防刷发送短信验证码接口的五种简单好用方法绝对够用

防刷发送短信验证码接口的五种简单好用方法&#xff0c;绝对够用 前端增加图形验证码&#xff0c;点击发送按钮后增加60s倒计时&#xff0c;60s后才可以再次点击 后端对接口次数校验&#xff0c;60s内同一电话号码只能发送一次 // 生成基于电话号码的重试锁定键 String repeat…...

编程日记 2024/5/29 6:01:34

ubuntu中idea创建spark项目步骤

1.前置条件 ubuntu中已经安装idea,jdk,scala,spark 2.打开idea&#xff0c;新建&#xff0c;选择Maven项目 3.在IDEA中&#xff0c;File-Setting-Plugin&#xff0c;下载Scala插件 4.File-project structure&#xff0c;导入插件 4.1在全局库中&#xff0c;选择导入刚才的sca…...

编程日记 2024/5/29 6:00:32

回文链表（快慢指针解法之在推进过程中反转）

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd;抱怨深处黑暗&#xff0c;不如提灯前行…...

编程日记 2024/5/29 5:59:31

深度剖析：为什么 Spring 和 IDEA 都不推荐使用 @Autowired 注解

目录 依赖注入简介 Autowired 注解的优缺点 Spring 和 IDEA 不推荐使用 Autowired 的原因 构造器注入的优势 Autowired 注解的局限性 可读性和可测试性的问题 推荐的替代方案 构造器注入 Setter 注入 Java Config Bean 注解 项目示例&#xff1a;Autowired vs 构造器…...

编程日记 2024/5/29 5:58:31

【接口自动化_05课_Pytest接口自动化简单封装与Logging应用】

一、关键字驱动--设计框架的常用的思路 封装的作用&#xff1a;在编程中&#xff0c;封装一个方法&#xff08;函数&#xff09;主要有以下几个作用&#xff1a;1. **代码重用**&#xff1a;通过封装重复使用的代码到一个方法中&#xff0c;你可以在多个地方调用这个方法而不是…...

编程日记 2024/5/29 5:57:30

信息学奥赛初赛天天练-14-阅读程序-字符数组、唯一分解定理应用

更多资源请关注纽扣编程微信公众号 1 2019 CSP-J 阅读程序1 (程序输入不超过数组或字符串定义的范围&#xff1b;判断题正确填√,错误填&#xff1b;除特殊说明外&#xff0c;判断题1.5分&#xff0c;选择题3分&#xff0c;共计40分) 1 输入的字符串只能由小写字母或大写字母组…...

编程日记 2024/5/29 5:56:29

K210 数字识别 笔记

一、烧写固件 连接k210开发板&#xff0c;点开烧录固件工具&#xff0c;选中固件&#xff0c;并下载 二、模型训练 网站&#xff1a;MaixHub 1、上传文件 2、开始标记数据 添加9个标签&#xff0c;命名为1~9&#xff0c;按键盘w开始标记&#xff0c;键盘D可以下一张图片&…...

编程日记 2024/5/29 5:55:28

人脸检测--FaceNet（四）

FaceNet 是一个由 Google 研究团队开发的人脸识别系统&#xff0c;它基于深度学习技术&#xff0c;可以实现高精度的人脸识别、验证和聚类任务。FaceNet 通过学习直接从图像像素到人脸嵌入的映射&#xff0c;使得它在各种人脸识别任务中表现出色。下面是对 FaceNet 的详细介绍&…...

编程日记 2024/5/29 5:54:26

Android性能优化方案

1.启动优化&#xff1a; application中不要做大量耗时操作,如果必须的话&#xff0c;建议异步做耗时操作2.布局优化&#xff1a;使用合理的控件选择&#xff0c;少嵌套。&#xff08;合理使用include,merge,viewStub等使用&#xff09;3.apk优化&#xff08;资源文件优化&#…...

编程日记 2024/5/29 5:53:25

阿里千问，有个海外版

阿里千问&#xff0c;有个海外版。我也是最近才知道&#xff0c;用了一下&#xff0c;发现审核尺度明显要宽松很多&#xff0c;国内的千问明显被约束很多&#xff0c;就是个半残品。据说啊&#xff0c;国际版千问的部分数据放在了新加坡&#xff0c;对标的是ChatGPT。好像现在阿…...

编程新知 2026/3/31 7:55:25

AntdUI实战：用WinForm和.NET 6给老旧内部管理系统“换肤”的完整记录

AntdUI实战&#xff1a;用WinForm和.NET 6给老旧内部管理系统“换肤”的完整记录 当企业内部的WinForm系统运行超过十年&#xff0c;那些灰底蓝框的界面早已与现代审美格格不入。去年接手某制造业ERP系统改造时&#xff0c;我面对的是一个基于.NET Framework 4.0的"古董&q…...

编程新知 2026/3/31 7:21:09

小米智能家居与Home Assistant深度整合方案

小米智能家居与Home Assistant深度整合方案 【免费下载链接】ha_xiaomi_home Xiaomi Home Integration for Home Assistant 项目地址: https://gitcode.com/GitHub_Trending/ha/ha_xiaomi_home 小米智能家居与Home Assistant的深度整合为用户提供了全面的智能设备控制解…...

编程新知 2026/3/31 6:56:59

【Python】利用Python实现微信公众号文章定时自动发布

1. 微信公众号自动发布的基础原理 很多人可能不知道&#xff0c;微信公众号其实提供了完整的开发者接口&#xff0c;允许我们通过代码来管理内容。这就像给你的公众号装了一个遥控器&#xff0c;不用每天手动登录后台点点戳戳。我最早发现这个功能时&#xff0c;简直像发现了新…...

编程新知 2026/3/31 4:46:00

千问3.5-2B实战教程：将网页交互结果接入企业微信机器人，实现图片秒级响应

千问3.5-2B实战教程&#xff1a;将网页交互结果接入企业微信机器人&#xff0c;实现图片秒级响应 1. 项目背景与价值 在日常工作中&#xff0c;我们经常需要快速处理大量图片信息。比如电商团队需要审核商品主图&#xff0c;市场部门需要分析竞品海报&#xff0c;客服团队要识…...

编程新知 2026/3/31 4:33:15

Vivado 2019.2实战：手把手教你封装自己的UART串口IP核（含参数化配置避坑指南）

Vivado 2019.2实战&#xff1a;从零构建可配置UART IP核的完整指南 在FPGA开发中&#xff0c;UART通信是最基础也最常用的功能之一。每次新项目都重新编写UART驱动不仅效率低下&#xff0c;还容易引入错误。本文将带你完整经历将一个经过验证的UART发送模块封装成可配置IP核的全…...

编程新知 2026/3/31 4:23:12

SenseVoice语音识别模型在Windows/Linux双平台部署全攻略（附SpringBoot API封装技巧）

SenseVoice语音识别模型在Windows/Linux双平台部署全攻略&#xff08;附SpringBoot API封装技巧&#xff09; 语音识别技术正加速渗透企业级应用场景&#xff0c;从智能客服到会议纪要自动化&#xff0c;SenseVoice作为开箱即用的高精度模型&#xff0c;其跨平台兼容性尤为突出…...

编程新知 2026/3/31 4:19:07

JAVA中try catch无法捕获异常的原因是什么

Java 中的 try-catch 机制是处理异常的重要手段&#xff0c;但有时即使写了 try-catch 代码&#xff0c;异常仍会被抛出。这是因为 catch 块指定的异常类型可能无法与实际抛出的异常相匹配。让我们举一个代码意图捕获异常并打印特定信息的例子&#xff1a;public class Test {p…...

编程新知 2026/3/31 4:00:52

ngx_http_init_static_location_trees

1 定义 ngx_http_init_static_location_trees 函数 定义在 ./nginx-1.24.0/src/http/ngx_http.cstatic ngx_int_t ngx_http_init_static_location_trees(ngx_conf_t *cf,ngx_http_core_loc_conf_t *pclcf) {ngx_queue_t *q, *locations;ngx_http_core_loc_conf_…...

编程新知 2026/3/31 3:20:18

给客户发固件，别再傻傻传源码了！手把手教你用ESP32 Download Tool烧录PlatformIO生成的bin文件

专业级ESP32固件交付方案&#xff1a;从PlatformIO编译到客户安全烧录全流程 当我们需要将开发完成的ESP32固件交付给客户时&#xff0c;直接发送源代码往往不是最佳选择。这不仅涉及知识产权保护问题&#xff0c;还可能因为客户缺乏开发环境而导致沟通成本激增。本文将详细介绍…...

编程新知 2026/3/31 2:21:29