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 相关文章推荐
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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)
2010/09/04 PHP
基于PHP文件操作的详解
2013/06/05 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
PHP文件操作方法汇总
2015/07/01 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
Nuxt.js实战详解
2018/01/18 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Python模拟用户登录验证
2017/09/11 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
详解Python中import机制
2020/09/11 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
小学生秋游活动方案
2014/02/23 职场文书
考试诚信承诺书
2014/05/23 职场文书
促销活动总结模板
2014/07/01 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
OpenCV-Python实现轮廓的特征值
2021/06/09 Python