Ajax
传统的ajax指的是XMLHttpRequest,最早出现的向后端发送请求的技术,隶属于原始的js中,核心使用XMLHttpReqyest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
Jquery ajax是对原生XHR的封装,除此以外还增添了对JSONP的支持。经过多年的维护已经非常方便了,优点无需多言,如果是硬要举出几个缺点,那可能只有:
- 基于原生的XHR开发,本身架构不是很清晰
- jquery项目太大,如果单纯的想使用ajax却要引入整个jquery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
- 本身是针对MVC编程,不符合现代前端MVVM浪潮
补充:
MVVM源自经典的MVC,MVVM的出现促进了GUI前端开发与后端业务逻辑的分离,极大地提高了前端开发的效率。
MVVM的核心是ViewModel层,它像是一个中转站,负责转换model的数据变得更加容易管理和使用,该层向上与视图层进行双向数据绑定,向下与Model层进行数据交互,起到承上启下的作用。View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的最重要一环。
axios
axios是一个基于promise用于浏览器和node.js的HTTP客户端,本质上是对XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范
- 从浏览器中创建XMLHttpRequest
- 支持Promise API
- 客户端防止csrf
- 提供了一些并发请求的接口
- 从node.js创建http请求
- 拦截请求和响应
- 自动转换成json数据
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
补充:
防止csrf就是让你的每个请求都携带一个从cookie中拿到的key,根据浏览器的同源策略,假冒网站是拿不到cookie中的key的,这样,后台就可以轻松的辨别出这个请求是否是用户在假冒网站上误导输入的,从而采取正确的策略
fetch
fetch号称是ajax的替代品,是ES6出现的,使用的是ES6的promise对象,fetch是基于promise设计的,但是一定记住fetch不是ajax的进一步封装,而是原生的js,没有使用XMLHttpRequest对象
优点:
- 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
- 更好更方便的写法