Ajax与Axios的区别

Ajax：

1、介绍：是对原生XHR的封装；异步的javascript和xml；是多种技术的组合。

2、原理：（智能的中转站）由客户端请求ajax引擎，再由ajax引擎（通过使用XmlHttpRequest对象）请求服务器，服务器做出一系列相应之后返回给ajax引擎，再由ajax引擎决定将这个结果写入到客户端什么位置（通过javascript来操作DOM），从而实现页面无刷新更新数据。

3、缺点：

• ajax对浏览器机制具有破坏功能，eg：Back和history功能无法使用，使得在动态刷新情况下，用户将无法返回上一个页面状态。
• ajax暴露了与服务器交互的细节，即通过浏览器的监控台即可进行抓包。
• 破坏了程序的异常处理机制。eg：会在调试层面遇到
• 违背url和资源定位的初衷。
• 对搜索引擎的支持弱，使用不当时，极易增大网络的流量，从而降低整个网络的性能。 eg：上网时有些页面会弹出小广告之类的东西，这些东西是在页面的源代码中找不到的，之所以能够显示，是因为它通过ajax向服务端发送请求，服务器返回一个结果，然后通过js动态创建到页面之中，因为是动态创建的原因，爬虫之类的无法爬到这些信息数据。
• 无法很好地支持移动端设备。
• 冗余代码多，导致客户端过肥

4、优点

• 无刷新更新数据。（最大优点）
• 异步与服务器通信，从而可不打断用户的操作
• 前后端负载平衡，原则是按需取数据
• 其所基于的标准被广泛支持
• 界面与应用分离

5、Ajax主要格式

$.ajax({
	type:"交互类型",
	url:"发起请求的地址",
	dataType:"前端数据类型",//可以省略
	data:data,//可以省略
	success:function(data){
		alert(data);
		},
	error:function(err){
		alert(err);
		}
});
//一般情况下，ajax在html页面中嵌套于javascript的校验和点击、提交事件内，进行局部的前后端数据交互。

Axios

1、介绍：是一个基于Promise的HTTP库，可用在浏览器和node.js中；Axios是对Ajax的封装。

2、特性：

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

3、get请求的使用：

1. 可将参数全写到url中

axios.get('/gai?name=goulizi').then(function (response) { //即get括号内的内容
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

2. 可通过参数写到params中（推荐）

axios.get('/gai', {      
    params: {
        name: 'goulizi'
    }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

//又或者你可以这么写
axios({
  method: 'get',
  url: '/gai',
  params: {
    name: 'goulizi',
  }
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

4、post的使用：

1. 与get的区别便是无需使用params来进行参数的添加，而是在请求体内直接进行添加操作

axios.post('/gai', {   
    name: 'goulizi'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

2. 用注解的两种方法

//在请求体中使用data来写参数，后端使用@RequestBody+实体类来接收
 axios({
        url: '/getUsers',     //这里对应着你注解的位置
        method: 'post',
        responseType: 'json', // 默认的
        data: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

//在请求体中使用params来进行传参，需要使用@RequestParam来接收参数
 axios({
        url: '/getUsers',            //这里对应着你注解的位置
        method: 'post',
        responseType: 'json', // 默认的
        params: {
            age: 18,
            sex: '男',
        }
    }).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    });

总结

Axios是封装后的Ajax，因此若把Ajax比作鸡蛋的话，Axios就好比蛋黄，记住其二者之间的包含关系。