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给dropdownlist添加选项的小例子
Mar 04 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
Vue watch响应数据实现方法解析
Jul 10 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
JQuery toggle使用分析
2009/11/16 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
vuex 的简单使用
2018/03/22 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
python 图片验证码代码分享
2012/07/04 Python
python二分法实现实例
2013/11/21 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
python实现雪花飘落效果实例讲解
2019/06/18 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python selenium的基本使用方法分析
2019/12/21 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
2014年团总支工作总结
2014/11/21 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis