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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。