ajax是否能够抓取302状态码

处理302响应与重定向

最新推荐文章于 2023-01-15 23:46:36 发布

weixin_30877755

最新推荐文章于 2023-01-15 23:46:36 发布

阅读量688

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 json ViewUI

原文链接：http://www.cnblogs.com/wangking/p/6530693.html

本文探讨了在Ajax请求中遇到服务器返回302Found时无法直接处理重定向的问题，并提供了两种解决方案：一是通过修改服务器端代码返回JSON响应，二是采用form表单提交的方式。

服务器端的响应是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的响应时，浏览器中的运行结果如下：

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

使用form的方法例子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<div id="formID"></div>

<script type="text/javascript">

        function formAction(){

            var formElement = document.createElement('form');
                formElement.setAttribute('id','form1');
                formElement.setAttribute('name','form1');
                formElement.setAttribute('action','a.php');
                formElement.setAttribute('method','get');

            var inputTextElement = document.createElement('input');
                inputTextElement.setAttribute('id','txt_name');
                inputTextElement.setAttribute('type','text');
                inputTextElement.setAttribute('value','aa');

var inputButtonElement = document.createElement('input');
                inputButtonElement.setAttribute('id','btnSubmit');
                inputButtonElement.setAttribute('type','button');
                inputButtonElement.setAttribute('value','确定');
                inputButtonElement.setAttribute('onclick',fnBtn);

                formElement.appendChild(inputTextElement);
                formElement.appendChild(inputButtonElement);
                var objForm = document.getElementById('formID');
                objForm.appendChild(formElement);
        }
            formAction();
        function fnBtn(){
            return document.form1.submit();
        }

        if(window.attachEvent){
            window.attachEvent('onclick',fnBtn);
        }else if(window.addEventListener){
            window.addEventListener('click',fnBtn,true);
        }

</script>

</body>
</html>