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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
JS闭包用法实例分析
Mar 27 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP注释实例技巧
2008/10/03 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
urllib2自定义opener详解
2014/02/07 Python
Python栈类实例分析
2015/06/15 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
详解Python IO口多路复用
2020/06/17 Python
Python容器类型公共方法总结
2020/08/19 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
幼儿教师考核制度
2014/01/25 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
葬礼主持词
2015/07/02 职场文书
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS