1. 引言

XMLHttpRequest、Ajax、Fetch与Axios是网页前后端交互中常见到的名词

参考MDN:Ajax - Web 开发者指南 | MDN (mozilla.org)

Ajax(Asynchronous JavaScript + XML(异步 JavaScript 和 XML)), 其本身不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,最重要的就是XMLHttpRequest

当然,曾经在前端影响力极大的jQuery中有一个ajax()方法,有时说的Ajax可能也指它

参考MDN:XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)

XMLHttpRequest(XHR)是Web浏览器的API,可以在不刷新页面的情况下请求特定 URL,获取数据,允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 可以用于获取任何类型的数据,而不仅仅是 XML

参考MDN:Fetch API - Web API 接口参考 | MDN (mozilla.org)

Fetch是Web浏览器获取数据的API,其作用和XMLHttpRequest类似,是XMLHttpRequest的一种替代品,或者说是演进

参考Axios官网:Getting Started | Axios Docs (axios-http.com)

Axios在浏览器端是XMLHttpRequest的进一步封装,并且增加了一些特性,如支持Promise、自动转换JSON等

2. 相互关系

XMLHttpRequestFetch是浏览器交互数据的API

jQuery的ajax()方法和AxiosXMLHttpRequest的进一步封装,更为简单易用

Ajax是一个描述增量更新而不需要重载(刷新)整个页面的术语,参考MDN提到的Jesse James Garrett 在 2005 年 2 月写了这篇文章 adaptive path,文章表述了Ajax的构成:

  • standards-based presentation using XHTML and CSS;

  • dynamic display and interaction using the Document Object Model;

  • data interchange and manipulation using XML and XSLT;

  • asynchronous data retrieval using XMLHttpRequest;

  • and JavaScript binding everything together.

第四点明确了数据传输使用XMLHttpRequest,从这个角度来说,Fetch不属于Ajax的范畴

然而,参考:XMLHttpRequest vs the Fetch API for Ajax - SitePoint中提到的:

  • We now use “Ajax” as a generic term for any client-side process which fetches data from a server and updates the DOM dynamically without a full-page refresh.

随着时代的发展,Ajax泛指客户端从服务器获取数据并动态更新DOM,而无需刷新整个页面的通用术语,从这个角度来说,Fetch属于Ajax的范畴

进一步的对比可参考:

3. XMLHttpRequest的使用

参考MDN:使用 XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)

也可参考:XMLHttpRequest使用详解 - 迪米特 - 博客园 (cnblogs.com)

一个简单的XMLHttpRequest示例如下:

<script type="text/javascript">
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('userId', '1');
formData.append('title', 'leihou');
formData.append('body', '雷猴');
xhr.open('POST', 'http://jsonplaceholder.typicode.com/posts');
xhr.send(formData);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
else {
console.log(xhr.statusText);
}
}
</script>

4. Fetch的使用

参考MDN:使用 Fetch - Web API 接口参考 | MDN (mozilla.org)

一个简单的Fetch示例如下:

<script>
fetch('http://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
userId: '1',
title: 'leihou',
body: '雷猴'
})
})
.then(response => response.json())
.then(data => console.log(data));
</script>

5. Axios的使用

参考Axios官网:Getting Started | Axios Docs (axios-http.com)

一个简单的Axios示例如下:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios.post('http://jsonplaceholder.typicode.com/posts', {
userId: '1',
title: 'leihou',
body: '雷猴'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
</script>

6. Ajax的使用

jQuery的ajax()方法参考:jQuery.ajax() | jQuery API Documentation

也可参考:jQuery Ajax - 云崖先生 - 博客园 (cnblogs.com)

一个简单的ajax示例如下:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$.ajax({
url: "http://jsonplaceholder.typicode.com/posts", // 发送的路径
type: "post", // 发送方式
dataType: 'JSON', // 反序列化
data: {
userId: '1',
title: 'leihou',
body: '雷猴'
}, // 发送的数据
success: (res) => { // 成功获取到后端返回结果的回调函数
console.log(res);
},
error: () => { // 发送失败的回调函数
console.log("失败");
}
})
</script>

7. 参考资料

[1]MDN Web Docs (mozilla.org)

[2]Getting Started | Axios Docs (axios-http.com)

[3]XMLHttpRequest使用详解 - 迪米特 - 博客园 (cnblogs.com)

[4]jQuery Ajax - 云崖先生 - 博客园 (cnblogs.com)

[5]jQuery.ajax() | jQuery API Documentation

XMLHttpRequest、Ajax、Fetch与Axios的更多相关文章

  1. 理解 ajax、fetch和axios

    背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...

  2. react中使用Ajax请求(axios,Fetch)

    React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...

  3. 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

    一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...

  4. 【译】XMLHttpRequest和Fetch, 谁最适合AJAX?

    原文地址:https://www.sitepoint.com/xmlhttprequest-vs-the-fetch-api-whats-best-for-ajax-in-2019/ 目录 从AJAX ...

  5. axios ajax fetch 区别以及优缺点

    将jQuery的ajax.axios和fetch做个简单的比较,所谓仁者见仁智者见智,最终使用哪个还是自行斟酌 1.jQuery ajax $.ajax({ type: 'POST', url: ur ...

  6. ajax、fetch、axios — 请求数据

    jquery ajax jq 的ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持.用起来非常方便 用法: $.ajax({ url:发送请求的地址, data:数据的拼接,//发送到服 ...

  7. react——获取数据ajax()、$.ajax()、fetch()、axios

    ajax() import React from 'react'; import ReactDom from 'react-dom'; import ajax from './tool.js'; cl ...

  8. axios ajax fetch 区别

    请求方式千千万,axios是一种对ajax的封装,fetch是一种浏览器原生实现的请求方式,跟ajax对等

  9. 原生 Ajax 封装 和 Axios 二次 封装

    AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...

  10. fetch和axios区别,proxy代理配置

    1.今天使用fetch调用接口时使用console.log(res.data)始终是undefined,使用anxios请求则可以成功请求到数据,非常奇怪,于是查了一圈,才搞明白是我自以为了,哎,浪费 ...

随机推荐

  1. kali2021.4a安装angr(使用virtualenv)

    在Linux中安装各种依赖python的软件时,最头疼的问题之一就是各个软件的python版本不匹配的问题,angr依赖python3,因此考虑使用virtualenv来安装angr Virtuale ...

  2. 【Java】二分查找标准代码

    太菜了..写不出正确的... 干脆放一个标准代码,之后参考 boolean BinarySearch(int[] m){ int l=0,r=m.length-1;//减1相当于数组两头(lr都能指到 ...

  3. XCTF分站赛ACTF——Crypto

    impossible RSA: 没啥好说的,跟我之前文章有道题类似,虽然如此还是花费了很长时间,原因令人落泪,把q = inverse(e,p)的数学式写成了eq mod p导致数学式推导及其困难(能 ...

  4. 学会了selenium 模拟鼠标操作,你就可以偷懒点点点了

    前言 我们在做 Web 自动化的时候,有时候页面的元素不需要我们点击,值需要把鼠标移动上去就能展示各种信息. 这个时候我们可以通过操作鼠标来实现,接下来我们来讲一下使用 selenium 做 Web ...

  5. 实践GoF的23种设计模式:命令模式

    摘要:命令模式可将请求转换为一个包含与请求相关的所有信息的对象, 它能将请求参数化.延迟执行.实现 Undo / Redo 操作等. 本文分享自华为云社区<[Go实现]实践GoF的23种设计模式 ...

  6. 自研ORM框架实现工作单元模式

    平时我们使用事务,需要显示的Try Catch 并且开启事务 提交事务 异常回滚事务 三步骤,使用工作单元后则只需要Commit. 1.接口定义 1 /// <summary> 2 /// ...

  7. Python Kconfiglib初次学习

    1 参考 kconfiglib库官方介绍:kconfiglib · PyPI Kconfiglib源码:GitHub - ulfalizer/Kconfiglib: A flexible Python ...

  8. python之路26 面向对象魔法方法、元类、元类定制类、对象的产生行为 __new__方法

    面向对象的魔法方法 魔法方法:类中定义的双下方法都称为魔法方法 不需要人为调用 在特定的条件下会自动触发运行 eg:__init__创建空对象之后自动触发给对象添加独有的数据 1.__init__ 对 ...

  9. Asp-Net-Core-搭建ELK日志平台-Docker-Compose版本

    title: Asp.Net Core 搭建ELK日志平台(Docker-Compose版本) date: 2022-09-27 15:16:59 tags: - .NET 由于暂时用不上Logsta ...

  10. 【深入浅出Seata原理及实战】「入门基础专题」带你透析认识Seata分布式事务服务的原理和流程(1)

    分布式事务的背景 随着业务的不断发展,单体架构已经无法满足我们的需求,分布式微服务架构逐渐成为大型互联网平台的首选,但所有使用分布式微服务架构的应用都必须面临一个十分棘手的问题,那就是"分布 ...