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 22 Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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 数组的一个悲剧?
2011/05/11 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python常用知识点汇总
2016/05/08 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
python实现的生成word文档功能示例
2019/08/23 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
班长自荐书范文
2014/02/11 职场文书
数控机床专业自荐信
2014/05/19 职场文书
青年标兵事迹材料
2014/08/16 职场文书
签约仪式致辞
2015/07/30 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python