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 相关文章推荐
Javascript 作用域使用说明
Aug 13 Javascript
img标签中onerror用法
Aug 13 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
jquery foreach使用示例
Sep 12 Javascript
javascript修改图片src的方法
Jan 27 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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之第七天
2006/10/09 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python列表推导式的使用方法
2013/11/21 Python
python实现各进制转换的总结大全
2017/06/18 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python统计单词出现的次数
2018/04/04 Python
python的pip安装以及使用教程
2018/09/18 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
运动会邀请函范文
2014/02/06 职场文书
我爱我校演讲稿
2014/05/21 职场文书
中学生检讨书范文
2014/11/03 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
特此通知格式
2015/04/27 职场文书
父母教会我观后感
2015/06/17 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL