XMLHttpRequest、Ajax、Fetch与Axios
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. 相互关系
XMLHttpRequest
和Fetch
是浏览器交互数据的API
jQuery的ajax()
方法和Axios
是XMLHttpRequest
的进一步封装,更为简单易用
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. 参考资料
[2]Getting Started | Axios Docs (axios-http.com)
[3]XMLHttpRequest使用详解 - 迪米特 - 博客园 (cnblogs.com)