AJax技术

ajax与302响应代码测试

字号+ 作者:H5之家 来源:H5之家 2017-05-20 12:05 我要评论( )

在ajax请求中,如果服务器端的响应是302Found,在ajax的回调函数中能够获取这个状态码吗?能够从ResponseHeaders中得到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的响应时,浏览器中的运行结果如下:

 

  在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>


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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jquery中通过全局变量来禁止多次ajax请求

    jquery中通过全局变量来禁止多次ajax请求

    2017-05-20 12:06

  • ajax请求json数据并用js解析

    ajax请求json数据并用js解析

    2017-05-20 10:00

  • php ajax无刷新文件上传实例

    php ajax无刷新文件上传实例

    2017-05-19 09:04

  • 模板无忧www.mb5u.com

    模板无忧www.mb5u.com

    2017-05-18 12:01

网友点评