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

  • Post author:
  • Post category:其他



问题描述:


在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

提供了一些并发请求的接口(重要,方便了很多的操作)



版权声明:本文为char56789原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。