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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
JSONP基础知识详解
Mar 19 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 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&amp;java(二)
2006/10/09 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
JavaScript 编程引入命名空间的方法与代码
2007/08/13 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue实现购物车列表
2020/06/30 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
Python标准库与第三方库详解
2014/07/22 Python
python自动化报告的输出用例详解
2018/05/30 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python字符串循环左移
2019/03/08 Python
django 多数据库及分库实现方式
2020/04/01 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
小学开学寄语
2014/01/19 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
开学典礼策划方案
2014/05/28 职场文书
上海世博会口号
2014/06/19 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书