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

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

news 2026/5/20 11:41:58

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

Hercules安全MCU平台：从硬件锁步到软件诊断，构建功能安全系统基座

1. 平台定位与核心价值解析在医疗、工业控制以及轨道交通这些领域&#xff0c;开发产品从来不只是实现功能那么简单。每一次代码的写入、每一次信号的输出&#xff0c;背后都关联着人的生命安全与重大财产保障。我经历过不少项目&#xff0c;在功能开发完成后&#xff0c;团队最…...

编程新知 2026/5/20 9:27:57

告别桌面混乱！用Utools的「本地文件启动」功能，5分钟打造你的专属文件启动器

告别桌面混乱&#xff01;用Utools的「本地文件启动」功能&#xff0c;5分钟打造你的专属文件启动器 每次打开电脑&#xff0c;看到满屏的文件图标和杂乱无章的文件夹&#xff0c;是不是感觉工作效率瞬间降了一半&#xff1f;作为一名长期与文件打交道的专业人士&#xff0c;我…...

编程新知 2026/5/20 9:15:15

终极免费方案：3分钟掌握Ofd2Pdf轻松转换OFD为PDF

终极免费方案&#xff1a;3分钟掌握Ofd2Pdf轻松转换OFD为PDF 【免费下载链接】Ofd2Pdf Convert OFD files to PDF files. 项目地址: https://gitcode.com/gh_mirrors/ofd/Ofd2Pdf 还在为OFD文件无法打开而烦恼吗&#xff1f;Ofd2Pdf是一款完全免费、简单易用的开源工具&…...

编程新知 2026/5/20 8:39:24

异常处理与性能调优：熬夜、加班与医美术后的“内服架构”实战指南

在互联网与高科技行业&#xff0c;系统的稳定运行往往伴随着开发者的极度透支。作为常年面对高并发需求和深夜发版的“IT 民工”或高压职场人&#xff0c;我们经常会遇到这样的尴尬场景&#xff1a;连续两周的 996 之后&#xff0c;面对电脑屏幕黑屏时的倒影&#xff0c;发现自…...

编程新知 2026/5/20 7:48:40

仿真流程专题——基于Workbench的随机振动工程实践与3σ准则应用

1. 随机振动分析入门&#xff1a;从理论到工程实践 第一次接触随机振动分析时&#xff0c;我和大多数工程师一样感到困惑——这种"不确定"的载荷到底该怎么分析&#xff1f;经过多个项目的实战&#xff0c;我发现用生活中的例子最容易理解&#xff1a;想象你在颠簸的…...

编程新知 2026/5/20 6:42:22

别再手动刷纹理了！用Blender 3.6的镂版映射，5分钟给苹果模型贴上真实贴图

别再手动刷纹理了&#xff01;Blender 3.6镂版映射实战指南 在数字艺术创作中&#xff0c;给3D模型添加纹理是赋予物体真实感的关键步骤。许多Blender初学者在掌握了基础UV展开后&#xff0c;往往会陷入手动绘制纹理的低效循环——用笔刷一点一点"涂抹"贴图&#xff…...

编程新知 2026/5/20 6:01:39

免费图表数据提取神器：5分钟学会WebPlotDigitizer核心用法

免费图表数据提取神器&#xff1a;5分钟学会WebPlotDigitizer核心用法 【免费下载链接】WebPlotDigitizer Computer vision assisted tool to extract numerical data from plot images. 项目地址: https://gitcode.com/gh_mirrors/we/WebPlotDigitizer 还在为从科研图表…...

编程新知 2026/5/20 5:43:44

新手也能搞定的12V转5V Buck电源：手把手教你用Multisim仿真验证设计

从零开始设计12V转5V Buck电源&#xff1a;Multisim仿真全流程指南 第一次接触DC-DC电源设计时&#xff0c;面对各种参数计算和仿真验证&#xff0c;很多新手都会感到无从下手。本文将带你一步步完成12V转5V的Buck电源设计&#xff0c;从理论计算到Multisim仿真验证&#xff0c…...

编程新知 2026/5/20 4:50:58

5分钟终极指南：用m4s-converter永久保存你的B站缓存视频

5分钟终极指南&#xff1a;用m4s-converter永久保存你的B站缓存视频 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾经遇到过这样的烦恼…...

编程新知 2026/5/20 4:01:08

Perplexity股票数据清洗SOP（含NASDAQ非标字段映射表）：金融工程师内部使用的12项校验规则

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity股票信息检索 Perplexity AI 公司尚未上市&#xff0c;因此不存在公开交易的股票代码、实时行情或交易所挂牌信息。这一事实常被开发者和投资者误读&#xff0c;尤其在使用金融数据 API 时容易触发…...

编程新知 2026/5/20 2:16:57