ajax、axios、alova的区别

一、ajax

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

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

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

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

// ajax 基本js实现步骤/原理
function ajax(url, method, data = null, async = true) {
    // 1.创建XMLHttpRequest对象
    var xhr;
    if (window.XMLHttpRequest) {
        // 标准浏览器
        xhr = new XMLHttpRequest();
    } else {
        // IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 2.创建一个新的HTTP请求,并指定请求的方法、URL、是否异步处理请求及验证信息
    xhr.open(method, url, async);
    // 3.发送HTTP请求
    xhq.send(data);
    // 4. onreadystatechange 事件绑定方法，监听状态的改变
    xhr.onreadystatechange = function () {
        /**
         * readyState属性：表示请求/响应过程的当前活动阶段
            0：未初始化。尚未调用 open()方法。
            1：启动。已经调用 open()方法，但尚未调用 send()方法。
            2：发送。已经调用 send()方法，但尚未接收到响应。
            3：接收。已经接收到部分响应数据。
            4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
         */
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 响应的数据
            var result = xhr.responseText;
            // 执行业务逻辑
        }
    }
}

二、axios

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

axios 是目前流行的基于 Promise 的 HTTP 请求库，它可以在浏览器和 Node.js 中工作。axios 支持各种请求类型、拦截请求和响应等等。axios 通过 Promise API 提供了更加优雅的方式来处理异步请求和响应。除此之外，axios 还提供了一些其他有用的功能，如取消请求、自动转换 JSON 数据等等

特点：

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

// npm install axios


import axios from "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);
});

// get请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

三、 什么是 alova？

alova 是一个基于 Vue.js 和 async/await 的 HTTP 请求库。它也类似于 axios，提供了请求拦截、响应拦截、取消请求等功能，并且根据 Vue 的特点，可以非常方便地和 Vue.js 集成。和 axios 不同的是，alova 使用 async/await 进行异步操作，让代码更加简洁易懂。。
下面是一个使用 alova 发送 GET 请求的示例：

http.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

如何在 Vue 中使用 alova

 要在 Vue 中使用 alova，我们需要先安装 alova 和 RxJS：

npm install alova

然后在项目中使用：

import Vue from 'vue'
import alova from 'alova'

Vue.use(alova)

<template>
  <div>
    <button @click="getData">点击获取数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    async getData() {
      const res = await this.$http.get('/api/data')
      console.log(res.data)
    }
  }
}
</script>

如上代码，通过 this.$http.get 获取资源，可以得到响应的数据，不用返回 Promise 再进行链式调用，非常方便。 

四、优缺点

ajax

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

axios

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

alova

• 轻量级：压缩后只有4kb，只有Axios的40%
• 高性能：根据不同的请求场景，提供有针对性的请求策略，来提升应用流畅性、可用性，降低服务端压力
• 灵活：可以与任何请求库配合使用，也可以单独使用；可以使用内置的策略，也可以自定义策略；可以全局配置策略，也可以单独配置策略
• 易用：与Axios相似的API设计，让我们上手更简单熟悉；提供了详细的文档和示例

alova是基于async/await 的 HTTP 请求库，axios 是通过 promise 实现对 ajax 技术的一种封装，就像 jQuery 实现 ajax 封装一样。简单来说： ajax 技术实现了网页的局部数据刷新，axios 实现了对 ajax 的封装，alova实现了对axios的提升。axios 是 ajax，ajax 不止axios。