一、axios 和 ajax 的区别

1、axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装；

2、ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。

二、axios 和 ajax 的区别及优缺点

ajax：

1、什么是ajax

Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。

异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。

2、ajax的原理？

由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器作出一系列响应之后返回给ajax引擎，由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。

3、核心对象？

XMLHttpReques

4、ajax优缺点？

? ?优点　

1、无刷新更新数据

2、异步与服务器通信

3、前端和后端负载平衡

4、基于标准被广泛支持

5、界面与应用分离

? ?缺点：

1、ajax不能使用Back和history功能，即对浏览器机制的破坏。

2、安全问题 ajax暴露了与服务器交互的细节

3、对收索引擎的支持比较弱

4、破坏程序的异常处理机制

5、违背URL和资源定位的初衷

6、ajax不能很好的支持移动设备

7、太多客户端代码造成开发上的成本

5、Ajax适用场景

<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
?<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景

6、Ajax不适用场景

<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵

7、代码

$.ajax({
   type: 'get',
   url: '/getuser/data',
   dataType: 'json',
   data: {
        firstName: '张',
        lastName: '三'
   },
   success: function (response) {
       console.log(response);
   },
   error: function (error) {
	   console.log(error);
   }
});

8、ajax请求的五个步骤

1. 创建XMLHttpRequest异步对象

2. 设置回调函数

3. 使用open方法与服务器建立连接

4. 向服务器发送数据

5. 在回调函数中针对不同的响应状态进行处理

axios：

1、axios是什么

Axios 是一个基于?Promise?的 HTTP 库，可以用在浏览器和 node.js 中。

2、axios有那些特性？

1、在浏览器中创建 XMLHttpRequests

2、在node.js则创建http请求

3、支持Promise API

4、支持拦截请求和响应

5、转换请求和响应数据

6、取消请求

7、自动转换成JSON数据格式

8、客户端支持防御XSRF

3、执行get请求，有两种方式

// 第一种方式  将参数直接写在url中
axios.get('/getMainInfo?id=123').then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})

// 第二种方式  将参数直接写在params中
axios.get('/getMainInfo', {  
  params: {
    id: 123
  }
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})

4、执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。

axios.post('/getMainInfo', {
  id: 123
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})

5、执行代码?

 axios({
        url: '/getUsers',
        method: 'get',
        responseType: 'json', // 默认的
        data: {
            //'a': 1,
            //'b': 2,
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });