在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回调处理。大致流程如下:

ajax -> 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 = , 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>

以前没研究透这个问题,踩了几次坑。这次研究了一下,并写出博客,我想以后就会远离这个坑了。

ajax与302响应的更多相关文章

  1. ajax和302(转)

    原文:http://www.cnblogs.com/dudu/p/ajax_302_found.html 在ajax请求中,如果服务器端的响应是302 Found,在ajax的回调函数中能够获取这个状 ...

  2. ajax接受json响应(讲义)

    l 什么是json? l Json和xml比较 l Ajax如何使用JSON l Ajax接收json响应案例 什么是json? JSON (JavaScript Object Notation) 是 ...

  3. Ajax接收json响应

    json?  Json和xml比较  Ajax如何使用JSON  Ajax接收json响应案例 什么是json?JSON (JavaScript Object Notation) 是一种轻量级的 ...

  4. AJAX 创建对象 请求 响应 readyState

    AJAX 创建对象 请求 响应 readyState AjAX = Asynchronous JavaScript and XML (异步的JavaScrip和 XML). 不是新的编程语言, 而是一 ...

  5. 使用Ajax出现302 Moved Temporarily

    现象:在用ajax发送请求时,各种参数都对,地址也对,一直进error返回parse error. 使用浏览器发现ajax请求的header的响应码处:302 Moved Temporarily 百度 ...

  6. ajax接受json响应

    一.显示页面(ajax_xml.html) body部分 <!-- 支持多选的列表框 --> <select name="first" id="firs ...

  7. Ajax获取服务器响应头部信息

    $.ajax({ type: 'HEAD', // 获取头信息,type=HEAD即可 url : window.location.href, complete: function( xhr,data ...

  8. 解决在IE11浏览器下,JQuery的AJAX方法不响应问题

    在项目的时候一直都是在使用谷歌浏览器在调试,后来在现场部署到服务器上的时候,客户使用的是IE浏览器,版本是11 在测试的过程中,出现几个问题,虽然是几个问题,但是问题的原因就是AJAX第一次响应,第二 ...

  9. 用jquery和php实现ajax异步请求响应

    ajax技术可以实现异步请求和响应,下面的是用jquery向一个php脚本发送异步请求,并得到响应. 第一步,准备好前台的html表单,和jquery实现的ajax请求 <html lang=& ...

随机推荐

  1. PAT 甲级 1086 Tree Traversals Again

    https://pintia.cn/problem-sets/994805342720868352/problems/994805380754817024 An inorder binary tree ...

  2. Linux命令(九)比较文件差异 diff

    diff 命令介绍 diff 命令的功能为逐行比较两个文本文件,列出其不同之处.对给出的文件进行系统的检查,并显示出两个文件中所有不同的行.如果 diff 命令后跟的是目录,则会对该目录中的同名文件进 ...

  3. [转帖] 大神 Linus Torvalds 语录

    My name is Linus Torvalds and I am your god.我的名字是Linus Torvalds,我是你们的上帝.(在1998 Linux大会上的自我介绍) If you ...

  4. 深入理解Java之线程池(爱奇艺面试)

    爱奇艺的面试官问 (1) 线程池是如何关闭的 (2) 如何确定线程池的数量 一.线程池销毁,停止线程池 ThreadPoolExecutor提供了两个方法,用于线程池的关闭,分别是shutdown() ...

  5. 题解 P2580 【于是他错误的点名开始了】

    这个题的题解区就没一简单一点的指针题解?(大概是瞎了) So,这篇题解是给那些想用指针而害怕的同学食用的qwq 记得有一篇题解有个dalao作者放了几个静态模拟的trie树结果最后放了个动态的跑路了. ...

  6. Rust 阴阳谜题,及纯基于代码的分析与化简

    Rust 阴阳谜题,及纯基于代码的分析与化简 雾雨魔法店专栏 https://zhuanlan.zhihu.com/marisa 来源 https://zhuanlan.zhihu.com/p/522 ...

  7. Android应用如何跳转到应用市场详情页面

    Android应用开发过程中,可能会有需求,比如:推广时跳转到应用市场下载应用,跳转到应用市场给自己的应用打分,跳转到应用市场更新自己的应用.那如何跳转到应用市场呢?可能跳转的方法大家都是知道的,方法 ...

  8. asp.net连接数据库超时的解决办法

    错误提示:“超时时间已到.超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小.  ” 经过几天辛苦写的代码,终于实现了功能丰富的查询功能,但是使用的过 ...

  9. Zabbix应用八:Zabbix监控MongoDB

    利用Zabbix监控MongoDB 一.首先介绍mongodb采集到的数据含义: 1.状态采集命令: >db.serverStatus(); 2.输出内容: { "host" ...

  10. create-react-app脚手架使用

    1.安装脚手架和路由 npm i -g create-react-app npm i -S react-router react-router-dom 2.创建新项目 create-react-app ...