这是我参与11月更文挑战的第三天，活动详情请查看：2021最后一次更文挑战
前言：
之前在学习JavaScript的 时候，学习过ajax,后来又在学习vue相关内容时，老师又介绍了axios，这俩个都是和服务器建立连接，像服务器请求数据的内容。那么这俩这有什么区别呢？俩者分别使用的情况是什么?
ajax
概念
ajax 是异步的JavaScript和xml等多种技术的组合，用于快速创建动态页面，实现无刷新更新数据。它的核心对象是XMLHttpRequest(XHR),对原生的XHR进行封装。
写法
常用的请求方式有get请求和post请求
get请求
//1.创建 XMLHttpRequest对象
var xhr = new XMLHttpRequest()
//2.打开要发送请求的地址，get发送请求时参数要放在url中
xhr.open("get","https://me.csdn.net/weixin_45426836?a=1&b=2",true)
//3.发送请求
xhr.send()
//4.监听请求状态，接收响应数据，onload 等于 xhr.readyState == 4
xhr.onload = function(){
if(xhr.status == 200) {
console.log(xhr.response) //通过xhr的response获取到响应的响应体
}else {
console.log(error)
}
}
post请求
//创建 XMLHttpRequest对象
var xhr = new XMLHttpRequest()
//打开要发送请求的地址，get发送请求时参数要放在url中
xhr.open("get","https://me.csdn.net/weixin_45426836?a=1&b=2",true)
//发送请求
xhr.send()
//监听请求状态，接收响应数据，onload 等于 xhr.readyState == 4
xhr.onload = function(){
if(xhr.status == 200) {
console.log(xhr.response) //通过xhr的response获取到响应的响应体
}else {
console.log(error)
}
}
补充：
get请求：参数包含在URL中、GET在浏览器回退时是无害的；GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息；
post请求：通过request body传递参数、再次提交请求；浏览器不会主动设置cache；
-
封装.ajax()的方法,方便我们直接调用这个函数来发起ajax的请求。其相关参数如下：
1.url：请求的 URL 地址 2.type：请求方式，默认是GET，常用的还有 POST 3.async：请求是否异步，默认值是true（表示异步），false（表示同步） 4.dataType：返回的数据类型，常用的是json格式 5.contentType：请求的数据类型，默认为"application/x-www-form-urlencoded" 6.data：请求的数据参数 7.success：请求成功后的回调函数 8.error：请求失败后的回调函数
$.ajax({
url: 'https://loaclhost:8080/test',
type: 'get',
dataType: 'json',
data: {
//'id': 1,
//'name': '张三'
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
}
})
优点和缺点
优点
-
无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
-
异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
-
前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
-
基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
-
界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
缺点
-
AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
-
AJAX的安全问题。
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
-
对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
-
破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。
-
违背URL和资源定位的初衷。 例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
-
AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
axios
概念
axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，而react和vue也是推荐我们在发起请求时使用axios。
写法
1.url：请求的 URL 地址
2.method：请求方式，默认是GET，常用的还有POST
3.baseURL：baseURL将自动加在url前面，除非url是一个绝对URL
4.responseType：返回的数据类型，常用的是json格式
5.headers：请求的自定义请求头
6.params：与请求一起发送的 URL 参数
7.data：请求的数据参数
-
get请求
axios.get('/api/interface/test',{
params: {
//'id': 1,
//'name': '张三'
}).then(res => {
let arr = [];
if (res.data.code === 200) {
arr = res.data.data;
}
});
- post请求
// 省去了指明的params
axios.post('/api/interface/test',
{
//'id': 1,
//'name': '张三'
}).then(res => {
let arr = [];
if (res.data.code === 200) {
arr = res.data.data;
}
});
优缺点
1.支持node端和浏览器端；同样的API，node和浏览器全支持，平台切换无压力
2.支持 Promise；使用Promise管理异步，告别传统callback方式
3.丰富的配置项；支持拦截器等高级配置
4.社区支持；axios相关的npm包数量一直在增长
最后
axios是基于promise实现的对 ajax 技术的一种封装，两者用法基本一样，个别参数不同，axios 封装了一些更简便的 ajax 操作。
