Axios和ajax的异同点详解以及在express后端使用redirect重定向对ajax无效的原因!

问题描述:
在express中使用redirect 进行重定向时,页面显示是301状态码,页面不跳转!(说明在express中不能使用redirect进行重定向)

究其原因:
使用 ajax 后,后端无法直接让前端进行页面跳转。需要前端进行状态码和后端返回的数据的判断,然后前端自己进行跳转页面。

因为 ajax (axios只是对ajax进行了封装,ajax在此处的特性对axios也适用)是一个完整的请求和回掉的过程,header 头是不会变的。我们以前使用后端来让前端跳转原理是通过给浏览器发送一个特殊的 header 然后进行跳转。而 ajax 不会进行更改 header 头,从头到尾保持 header 头不变。因此在使用 ajax 进行请求时,页面不能进行跳转。

并且 ajax 的设计就是为了页面进行局部刷新,而非整个页面刷新而诞生的。

解决方法:
ajax 使用时在 success 回调函数中判断返回的数据,然后前端使用 api window.location.href()进行页面跳转。

Axios和ajax的异同点:
1.区别:
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
axios是ajax ajax不止axios。
下面列出代码来对比一下:
axios:

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);
})
ajax:

$.ajax({
url: ‘/getUsers’,
type: ‘get’,
dataType: ‘json’,
data: {
//‘a’: 1,
//‘b’: 2,
},
success: function (response) {
console.log(response);
}
})

2.优缺点:
ajax:
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)

axios:
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口(重要,方便了很多的操作)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值