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 相关文章推荐
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
Vuex 模块化使用详解
Jul 31 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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汉字转换拼音的类
2013/06/18 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
node.js入门教程
2014/06/01 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python线程详解
2015/06/24 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python实现ID3决策树算法
2018/08/29 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
大学生学业生涯规划
2014/01/05 职场文书
小班开学寄语
2014/04/04 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
专科生就业求职信
2014/06/22 职场文书
售房协议书范本
2015/08/11 职场文书
委托书范本格式
2019/04/18 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python