ajax与302响应代码测试
更新时间：2013年10月23日 16:07:57 作者：
服务器端的响应是302 Found，在ajax的回调函数中能够获取这个状态码吗？能够从Response Headers中得到Location的值进行重定向吗？让我们来一起动手写写代码看看实际情况吧。
在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的响应时，浏览器中的运行结果如下：
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进行重定向是不可行的。
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;
}
}
});
<form method="post" action="/oauth/respond">
</form>
以前没研究透这个问题，踩了几次坑。这次研究了一下，我想以后就会远离这个坑了。
使用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>
以前没研究透这个问题，踩了几次坑。这次研究了一下，我想以后就会远离这个坑了。
相关文章
微信小程序 image组件binderror使用例子与js中的onerror区别
这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下2017-02-02
一说到JavaScript的数组，大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等，今天小编就给大家分享几个开发中常用的js数组方法即他们的用法。需要的朋友可以参考下面文章的具体内容2021-09-09
这篇文章主要为大家介绍了UMD的包导出TS 类型方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了独立使用 umi 的核心插件模块示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了微信小程序 数据绑定的相关资料,并附实例代码，需要的朋友可以参考下2016-10-10
这篇文章主要为大家介绍了async-validator实现原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了Three.js材质Material类型示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家介绍了Tree Shaking实现方法指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了微信小程序下拉刷新界面的实现的相关资料,希望通过本文能帮助到大家实现这样的功能，需要的朋友可以参考下2017-09-09
这篇文章我们主要谈一谈js中的宏任务和微任务，JavaScript是一门单线程语言，即一次只能完成一个任务，若有多个任务要执行，则必须排队按照队列来执行，下面我们就来简单谈谈JavaScript吧,需要的朋友可以参考下面文章内容的具体内容2021-09-09
最新评论