Ajax与Axios的区别

一、Axios

axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

特点：

•     从浏览器中创建 XMLHttpRequests
•     从 node.js 创建 http 请求
•     支持 Promise API
•     拦截请求和响应
•     转换请求数据和响应数据
•     取消请求
•     自动转换 JSON 数据
•     客户端支持防御 XSRF

二、Ajax

Ajax 是 Asynchronous JavaScript and XML 的缩写，异步的 JavaScript 和 XML. Ajax 描述了一种主要使用脚本操作 HTTP 的 Web 应用架构，Ajax 应用的主要特点是使用脚本操纵 HTTP 和 Web 服务器进行数据交换，不会导致页面重载。

 Ajax机制：通过创建 XMLHttpRequest 对象与服务器进行数据交互，向服务器发送请求，接受服务器的响应。

简单来说：AJAX 是与服务器交换数据并更新部分网页的，在不重新加载整个页面的情况下。Ajax = 异步 JavaScript 和 XML

三、区别

axios 是通过 promise 实现对 ajax 技术的一种封装，就像 jQuery 实现 ajax 封装一样。简单来说： ajax 技术实现了网页的局部数据刷新，axios 实现了对 ajax 的封装。axios 是 ajax，ajax 不止axios。
示例

axios 和 ajax 的使用方法基本一样，只有个别参数不同。

Axios

axios({
	url: '/getName',
	method: 'get',
	responseType: 'json',  // 默认的
	data: {
		name:'tom'
	}
}).then(function (response) {
	console.log(response);
	console.log(response.data);
}).catch(function (error) {
	console.log(error);
});

Ajax

$.ajax({
	url: '/getName',
	type: 'get',
	dataType: 'json',
	data: {
		name:'tom'
	},
	success: function (response) {
		console.log(response)；
	}
});

四、优缺点

ajax

•     本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
•     基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案。
•     jQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务。

axios

•     从 node.js 创建 http 请求
•     支持 Promise API
•     客户端支持防止CSRF
•     提供了一些并发请求的接口