ajax和Axios 异步框架详细介绍

AJAX和Axios都是前端用来进行异步网络请求的工具，但是它们之间有一些区别：

1. 定义：

   AJAX：AJAX（Asynchronous JavaScript and XML）即异步的JavaScript和XML，是一种创建交互式网页应用的技术。它通过原生的XMLHttpRequest对象发送异步请求。

   Axios：Axios 是一个基于 promise 的 HTTP 库，它在浏览器和 node.js 中都可以使用，它使用了 XMLHttpRequests 或者 node (http) 模块进行HTTP请求。

2. 特性：

   AJAX：

   • 原生XHR：AJAX的核心是XHR对象。
   • 数据类型：AJAX可以处理多种数据类型，如HTML, JavaScript, JSON, XML等。
   • 事件处理：可以处理各种事件，如load, error等。
   • 跨域请求：可以通过设置代理服务器来实现跨域请求。

   Axios：

   • 基于Promise：Axios使用Promise，可以更优雅地处理异步请求。
   • 插件支持：Axios支持请求和响应的插件，如拦截器。
   • 转换响应数据：Axios可以自动转换JSON响应数据。
   • 并发请求：Axios可以同时进行多个请求。
   • 取消请求：Axios允许取消已经完成的请求。
   • 客户端支持：Axios不仅在浏览器中使用，在Node.js中也可以使用。

3. 使用方法：

   AJAX：

   
   
   
   var xhr = new XMLHttpRequest();
   xhr.open("GET", "url", true);
   xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.status == 200) {
       console.log(xhr.responseText);
     }
   };
   xhr.send();

   Axios：

   
   
   
   axios.get('url')
   .then(function (response) {
     console.log(response.data);
   })
   .catch(function (error) {
     console.log(error);
   });

4. 异步操作：

   AJAX：

   
   
   
   setTimeout(function () {
     console.log('AJAX');
   }, 1000);

   Axios：

   
   
   
   setTimeout(() => {
     console.log('Axios');
   }, 1000);

以上就是AJAX和Axios的基本介绍和使用方法，它们各有优势，可以根据实际需求选择使用。