ajax-axios异步请求与响应

Ajax：
1、原理
Ajax是对原生XHR的封装，为了达到跨域的目的，增添了对JSONP的支持。而且多个请求之间如果有先后关系的话，就会出现回调地狱。
由客户端请求Ajax引擎，再由ajax引擎请求服务器，服务器做出一系列响应之后返回给Ajax引擎，由Ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。
2、优缺点
优点：
1）无刷新更新数据
2）异步与服务器通信
3）前端和后端负载均衡
4）界面与应用分离
缺点：
1）ajax不能使用Back和history功能，即对浏览器机制的破坏。
2)安全问题（暴露了与服务器交互的细节）
3)对搜索引擎的支持比较弱
4)破坏程序的异常处理机制
3、适用场景与不适用场景
适用场景：
1）表单驱动的交互
2）深层次树的导航
3）对数据进行过滤和操作相关数据的场景
4）快速的用户与用户的交流响应
不适用场景：
1）搜索
2）基本的导航
3）替换大量的文本
4）对呈现的操作
4、常用代码格式：
$.ajax({
type: 'POST',
url: url,
data:data,
dataType:dataType,
success:funciton() {},
error: funciton() {}
})
5、请求的五个步骤
1）创建XMLHttpRequest异步对象
2）设置回调函数
3）使用open方法与服务器建立连接
4）向服务器发送数据
5）在回调函数中针对不同的响应状态进行处理
axios
1、原理
Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。
2、特性
1)在浏览器中创建XMLHttpRequests
2)在node.js中创建http请求
3)支持Promise API
4)支持拦截请求和响应，并可以转换请求和响应数据
5)取消请求
6)自动转换成JSON数据格式，客户端支持防御XSRF（跨站点请求伪造）
3、执行get请求的两种方式
1）将参数直接写在url中
axios.get('/getDemoInfo?id=123')
.then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
2)将参数直接写在params中
axios.get('/getDemoInfo', {
params: {
id: 123
}
})
.then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
4、执行post请求，与以上第二种get请求方式差不多，但请求的入参不需要写在params字段中
axios.get('/getDemoInfo', {
id: 123
})
.then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
axios和ajax的区别：
axios是通过Promise是心啊对ajax技术的一种封装，就像jQuery对Ajax的封装一样，简单来说就是Ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结 => axios是Ajax，ajax不止axios。