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

前端 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 则是现代前端开发中的主流选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/18325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter 中的 FractionalTranslation 小部件:全面指南

Flutter 中的 FractionalTranslation 小部件&#xff1a;全面指南 在 Flutter 的丰富布局库中&#xff0c;FractionalTranslation 是一个允许你将子组件沿着一个轴或两个轴进行部分平移的动画小部件。这种类型的平移通常用于创建滑动效果&#xff0c;如卡片的滑动删除或滑动展…

14.微信小程序之地理定位功能

目录 1.地理定位介绍 1.1 申请开通 1.2 使用方法 2.拒绝授权后的解决方案 3.开通腾讯位置服务 4.LBS 逆地址解析 1.地理定位介绍 小程序地理定位是指通过小程序开发平台提供的 API&#xff0c;来获取用户的地理位置信息。用户在使用小程序时&#xff0c;可以授权小程序获…

【前端常见面试题整理】

开放性的题目 自我介绍 突出学习能力 我想换工作的主要原因是 介绍项目 平时是如何学习前端开发的 主要就是两个途径&#xff0c;一个是查阅官方文档&#xff0c;然后就是在网上查找技术资料或者视频去学习。平时没事的时候也会看看github&#xff0c;同时关注一些社区和IT网…

医疗小程序源码SpringBoot2.X + Vue + UniAPP全栈开发

源码说明&#xff1a; 看到好多坛友都在求SpringBoot2.X Vue UniAPP&#xff0c;全栈开发医疗小程序 – 带源码课件&#xff0c;我看了一下&#xff0c;要么链接过期&#xff0c;要么课件有压缩密码。 特意整理了一份分享给大家&#xff0c;个人认为还是比较全面的。 希望…

【数据结构】-- 栈

栈 引入&#xff1a; 一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的元素遵循先进后出的原则&#xff0c;先入栈的元素总是先后出栈。 压栈&#xff1a;栈的插入操作叫…

04--SpringBoot热部署与日志

1、热部署 1.1 引言 为了进一步提高开发效率&#xff0c;SpringBoot为我们提供了全部项目热部署&#xff0c;日后在开发过程中修改了部分代码或者相关配置文件之后&#xff0c;不需要再重启服务使其生效。在项目中开启了全局热部署之后&#xff0c;只需要在修改之后等待几秒钟…

Python内置数据类型详解:从基础到进阶

Python内置数据类型详解:从基础到进阶 在Python编程中,数据类型是构建程序的基础。Python提供了多种内置数据类型,用于存储不同类型的数据。这些数据类型不仅易于使用,而且功能强大,能够满足各种编程需求。本文将详细介绍Python中的内置数据类型,包括它们的特点、用法以…

ARM GIC 和NVIC的区别

ARM GIC&#xff08;Generic Interrupt Controller&#xff09;和NVIC&#xff08;Nested Vectored Interrupt Controller&#xff09;是两种不同的中断控制器&#xff0c;它们在ARM架构中扮演着重要的角色&#xff0c;但各自有不同的设计和应用场景。 ARM GIC&#xff1a; G…

广东省保健食品行业协会批复成为“世界酒中国菜”活动指导单位

广东省保健食品行业协会正式批复成为“世界酒中国菜”系列活动指导单位&#xff0c;共促餐饮文化交流发展 近日&#xff0c;广东省保健食品行业协会正式批复荐酒师国际认证&#xff08;广州&#xff09;有限公司&#xff0c;成为备受瞩目的“世界酒中国菜”系列活动的指导单位…

a+bi vs a+bj, Mathematics vs. Engineering.

In Python (and many other programming languages), the use of “j” instead of “i” for representing the imaginary unit in complex numbers is a convention borrowed from electrical engineering and physics. Let me explain why: Historical Context: The use of …

填补领域空白!TerDiT:首次探索大规模DiT模型量化问题(MMLab出品)

论文链接&#xff1a;https://arxiv.org/pdf/2405.14854 项目链接&#xff1a;https://github.com/Lucky-Lance/TerDiT 最近在大规模预训练的文本到图像扩散模型方面的发展显著提高了高保真图像的生成能力&#xff0c;特别是基于transformer架构的扩散模型&#xff08;DiTs&a…

奈飞CEO最新访谈:抢走你饭碗的不是AI,而是能熟练使用AI的人

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

新书推荐:7.5 goto、break、continue语句

本节必须掌握的知识点&#xff1a; 示例二十六 代码分析 汇编解析 示例二十七 代码分析 汇编解析 7.5.1 示例二十六 ■goto语句&#xff1a;无条件转移语句。 语法格式&#xff1a; goto label; label : 代码; ●语法解析&#xff1a; 执行到goto语句时&#xff0c;则无…

算法提高之64位整数乘法

算法提高之64位整数乘法 核心思想&#xff1a;位运算 和快速幂相似 预处理1*a 2*a 4*a …的值 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;LL qadd(LL a,LL b,LL p){LL res 0;while(b){if(b &…

Jetpack架构组件_1.基本知识

1.什么是Jetpack&#xff1f; Jetpack 是一个由多个库组成的套件&#xff0c;可帮助开发者遵循最佳做法、减少样板代码并编写可在各种 Android 版本和设备中一致运行的代码&#xff0c;让开发者可将精力集中于真正重要的编码工作。Jetpack 包含一系列 Android 库&#xff0c;它…

js Dom基础

获取元素 1、getElementById() 通过id属性获取一个元素节点对象 <div id"div1"></div> <script> var div1 document.getElementById(div1) </script> 2、 getElementsByTagName()可以根据标签名来获取一组元素节点对象 这个方法会给我们返…

pcdn服务器应该怎么配?

要配置PCDN&#xff08;Private Content Delivery Network&#xff09;服务器&#xff0c;可以按照以下步骤进行&#xff1a; 需求分析&#xff1a;明确业务需求&#xff0c;确定所需的CDN功能和性能参数。这包括预期的流量、负载、内容类型、目标用户群体等。 硬件选择&#…

VCRUNTIME140_1.dll丢失是怎么回事?vcruntime140_1.dll无法继续执行代码的处理方法

VCRUNTIME140_1.dll丢失是怎么回事&#xff1f;问出这样的问题的人&#xff0c;一般是遇到vcruntime140_1.dll无法继续执行代码的问题了&#xff0c;找不到VCRUNTIME140_1.dll文件&#xff0c;那么程序就肯定是启动不了的&#xff0c;程序的启动是需要VCRUNTIME140_1.dll文件的…

Java进阶学习笔记1——课程介绍

课程适合学习的人员&#xff1a; 1&#xff09;具备一定java基础的人员&#xff1b; 2&#xff09;想深刻体会Java编程思想&#xff0c;成为大牛的人员&#xff1b; 学完有什么收获&#xff1f; 1&#xff09;掌握完整的Java基础技术体系&#xff1b; 2&#xff09;极强的编…

git常用命令使用

1 查看分支 git branch 查看本地分支&#xff08;*号绿色高亮就是所在分支&#xff09;git branch -a 查看远程分支 2 分支常用命令 git branch xxx&#xff1a;新建分支git checkout xxx&#xff1a;切换分支git checkout -b xxx&#xff1a;新建分支并切换到该分支&#x…