欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【ajax与302响应代码测试】，下面是详细的讲解！
ajax与302响应代码测试
在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=http://www.jb51.net/article/data.location;
}
}
});
方法二
不用ajax，改用form。
<form method="post" action="/oauth/respond">
</form>
以前没研究透这个问题，踩了几次坑。这次研究了一下，我想以后就会远离这个坑了。
关于ajax与302响应代码测试的用户互动如下：
相关问题：ajax 报302错误 ！！怎么解决？
答：302是请求的页面发生转向(跳转)，而ajax好像没有能力获取到跳转的location，所以基本上只能是直接报错 >>详细
相关问题：jQuery Ajax, 后台两段代码测试执行后效果一样.但...
答：你查一下，看看处理过的句柄是什么 因为你的前端是json，一般，后端必须要处理成json格式才能被前台js接受并alert，否则，会出错。 你用chrome或者firefox的开发工具试一下，看看到底是哪里出错了。这样才能有针对的处理问题。 >>详细
相关问题：求助大神，关于frameset中使用ajax，出现302错误
答：有时候没有设置cookie也会出现这个问题 >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-