ajax是否可以抓取302状态码

时间 2019-11-11

标签 ajax 是否可以抓取状态栏目 Ajax 繁體版

原文原文链接

服务器端的响应是302 Found，在ajax的回调函数中可以获取这个状态码吗？可以从Response Headers中获得Location的值进行重定向吗？让咱们来一块儿动手写写代码看看实际状况吧。javascript

在ajax请求中，若是服务器端的响应是302 Found，在ajax的回调函数中可以获取这个状态码吗？可以从Response Headers中获得Location的值进行重定向吗？让咱们来一块儿看看实际状况。
使用jQuery的$.ajax()发起ajax请求的JavaScript代码以下：php

代码以下:

 
$.ajax({ 
 
    url: '/oauth/respond', 
 
    type: 'post', 
 
    data: data, 
 
    complete: function(jqXHR){ 
 
        console.log(jqXHR.status); 
 
    }, 
 
    error: function (xhr) { 
 
        console.log(xhr.status); 
 
    } 
 
});

当服务器端返回302 Found的响应时，浏览器中的运行结果以下：html

在ajax的complete()与error()回调函数中获得的状态码都是404，而不是302。

这是为何呢？

在stackoverflow上找到了java

代码以下:

 
 
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

如何解决？

方法一
继续用ajax，修改服务器端代码，将原来的302响应改成json响应，好比下面的ASP.NET MVC示例代码：json

代码以下:

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的方法例子：app

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