ajax与302响应代码测试


Posted in Javascript onOctober 23, 2013

在ajax请求中,如果服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状态码吗?能够从Response Headers中得到Location的值进行重定向吗?让我们来一起看看实际情况。
使用jquery的$.ajax()发起ajax请求的javascript代码如下:

$.ajax({
    url: '/oauth/respond',
    type: 'post',
    data: data,
    complete: function(jqXHR){
        console.log(jqXHR.status);
    },
    error: function (xhr) {
        console.log(xhr.status);
    }
});

当服务器端返回302 Found的响应时,浏览器中的运行结果如下:
 

在ajax的complete()与error()回调函数中得到的状态码都是404,而不是302。

这是为什么呢?

在stackoverflow上找到了

You can't handle redirects with XHR callbacks because the browser takes care of them automatically. You will only get back what at the redirected location.

原来,当服务器将302响应发给浏览器时,浏览器并不是直接进行ajax回调处理,而是先执行302重定向——从Response Headers中读取Location信息,然后向Location中的Url发出请求,在收到这个请求的响应后才会进行ajax回调处理。大致流程如下:
jax -> browser -> server -> 302 -> browser(redirect) -> server -> browser -> ajax callback
而在我们的测试程序中,由于302返回的重定向URL在服务器上没有相应的处理程序,所以在ajax回调函数中得到的是404状态码;如果存在对应的URL,得到的状态码就是200。
所以,如果你想在ajax请求中根据302响应通过location.href进行重定向是不可行的。

如何解决?

方法一
继续用ajax,修改服务器端代码,将原来的302响应改为json响应,比如下面的ASP.NET MVC示例代码:

return Json(new { status = 302, location = "/oauth/respond" });

ajax代码稍作修改即可:
$.ajax({
    url: '/oauth/respond',
    type: 'post',
    data: data,
    dataType: 'json',
    success: function (data) {
        if (data.status == 302) {
            location.href = data.location;
        }
    }
});

方法二
不用ajax,改用form。

<form method="post" action="/oauth/respond">
</form>

以前没研究透这个问题,踩了几次坑。这次研究了一下,我想以后就会远离这个坑了。
Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 #Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 #Javascript
Javascript简单实现可拖动的div
Oct 22 #Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 #Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 #Javascript
js单例模式的两种方案
Oct 22 #Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 #Javascript
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP正则验证Email的方法
2015/06/15 PHP
php构造函数与析构函数
2016/04/23 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
js面向对象编程总结
2017/02/16 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
python生成ppt的方法
2018/06/07 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
python实现横向拼接图片
2020/03/23 Python
500行python代码实现飞机大战
2020/04/24 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
详解Python 中的容器 collections
2020/08/17 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
酒店开业策划方案
2014/06/02 职场文书
保护环境的标语
2014/06/09 职场文书
店铺转让协议书
2014/12/02 职场文书
公司开除员工通知
2015/04/22 职场文书
学校通报表扬范文
2015/05/04 职场文书
超强台风观后感
2015/06/09 职场文书
离职信范文
2015/06/23 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript