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

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

news 文章来源：https://blog.csdn.net/u014316335/article/details/139272825 2025/5/24 1:23:55

前端 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

视频监控平台AS-V1000 的场景管理，一键查看多画面视频的场景配置、调用、管理(一键浏览多路视频)

目录 一、场景管理的定义 二、场景管理的功能和特点 1、功能 &#xff08;1&#xff09;场景配置 &#xff08;2&#xff09;实时监控 &#xff08;3&#xff09;权限管理 2、特点 三、AS-V1000的场景配置和调用 1、场景配置 &#xff08;1&#xff09;实时视频预览 …...

编程日记 2024/5/29 5:52:23

微服务架构五大设计模式详解，助你领跑行业

微服务架构设计模式详解(5种主流模式) 微服务架构 微服务&#xff0c;一种革命性的架构模式&#xff0c;主张将大型应用分解为若干小服务&#xff0c;通过轻量级通信机制互联。每个服务专注特定业务&#xff0c;具备独立部署能力&#xff0c;轻松融入生产环境&#xff0c;为系…...

编程日记 2024/5/29 5:51:22

【problem】解决EasyExcel导出日期数据显示为#####问题

前言 在使用EasyExcel进行数据导出时&#xff0c;你可能遇到日期或其他数据在Excel中显示为“#######”的情况&#xff0c;这通常是因为列宽不足以展示单元格内的全部内容。本文将指导你如何通过简单的步骤解决这一问题&#xff0c;并确保导出的Excel文件自动调整列宽或直接指…...

编程日记 2024/5/29 5:50:22

Pytest用例自定义 - 重复、并行、串行

简介&#xff1a;面对快速迭代和持续交付的需求&#xff0c;提高测试效率变得至关重要。并行测试因其显著的时间节省优势而备受青睐。然而&#xff0c;并非所有测试都适合并行执行。在某些情况下&#xff0c;串行执行是必要的&#xff0c;以确保测试的正确性和稳定性。本文将探…...

编程日记 2024/5/29 5:49:21

前端项目上线

目录 1项目打包 2本地服务器部署 2.1具体操作步骤 2.2解决刷新 404 问题 2.3请求无法发送问题 3nginx 服务器部署 3.2nginx 配置代理练习 安装nginx nginx部署启动项目 3.3nginx 部署前端项目 4云服务器部署 本地资源上传 配置服务器与nginx 1项目打包 ●我…...

编程日记 2024/5/29 5:48:19

redis基本数据结构与应用

文章目录 概要String结构Hash结构List结构Set结构Zset结构bitmap位图类型geo地理位置类型其他常用命令 概要 redis常用的5种不同数据结构类型之间的映射如下&#xff1a; 结构类型结构存储的值结构的读写能力STRING可以是字符串、整数或者浮点数key-value形式&#xff1b;对整…...

编程日记 2024/5/29 5:47:18

Python pands使用引擎实现excel条件格式

截至我的知识更新日期&#xff08;2023年&#xff09;&#xff0c;Pandas 库本身并不直接支持Excel条件格式。Pandas 是一个强大的Python数据分析库&#xff0c;它主要用于数据分析和操作&#xff0c;而不是用于创建或编辑Excel文件的格式。 然而&#xff0c;你可以使用 openp…...

编程日记 2024/5/29 5:46:18

基于 vuestic-ui 实战教程 - 登录篇

1. 简介 登录做为一个系统的门面&#xff0c;也是阻挡外界的一道防线&#xff0c;那在vuestic-ui中如何做登录功能呢。在这里就之间沿用初始版本的Login页面&#xff0c;作为一个演示模板&#xff0c;后续需要改进的读者可以在此篇文章的基础上修改。 2. 登录接口相关api 与 t…...

编程日记 2024/5/29 5:45:17

SAPUI5基础知识2 - 手动创建一个SAPUI5的项目

1. 前言 在本篇文章中&#xff0c;我们将手动一步一步建立出第一个SAPUI5的 ‘Hello World!’ 项目。 2. 步骤详解 2.1 在BAS中建立Dev Space 进入SAP Business Application Studio的Dev Space Manger&#xff0c;选择创建Dev Space。 勾选HTML5 Application Template插件…...

编程日记 2024/5/29 5:44:16

设计模式--访问者模式

访问者模式是一种行为设计模式&#xff0c;它用于将算法与对象结构分离&#xff0c;使得算法可以独立于使用它的数据结构而变化。这种模式在许多应用场景中非常有用&#xff0c;例如在实现图形算法、数据结构遍历、文件格式转换以及代码分析时。 应用场景 图形算法&#xff1…...

编程日记 2024/5/29 5:43:15