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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
用jQuery技术实现Tab页界面之二
Sep 21 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
JavaScript继承定义与用法实践分析
May 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分页函数
2016/07/20 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
js制作简易年历完整实例
2015/01/28 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python错误处理详解
2014/09/28 Python
python使用pil生成缩略图的方法
2015/03/26 Python
在python中pandas的series合并方法
2018/11/12 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
flask实现验证码并验证功能
2019/12/05 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python温度转换华氏温度实现代码
2020/12/06 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
优秀中专生推荐信
2013/11/17 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
体育课外活动总结
2014/07/08 职场文书
新闻编辑求职信
2014/07/13 职场文书
水电维修专业推荐信
2014/09/06 职场文书
颐和园导游词400字
2015/01/30 职场文书
水电工岗位职责
2015/02/14 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
母亲去世追悼词
2015/06/23 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技