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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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无限分类的类
2007/01/02 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
JavaScript实现的in_array函数
2014/08/27 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
layui使用label标签的方法
2019/09/14 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python3中for循环踩过的坑记录
2020/12/14 Python
python实现简单猜单词游戏
2020/12/24 Python
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
error和exception有什么区别
2012/10/02 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
家长会演讲稿范文
2014/01/10 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
2014年销售员工作总结
2014/12/01 职场文书
鸦片战争观后感
2015/06/09 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
如何撰写创业策划书
2019/06/27 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
HTML基础详解(下)
2021/10/16 HTML / CSS
python中tkinter复选框使用操作
2021/11/11 Python
关于JavaScript轮播图的实现
2021/11/20 Javascript