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 = data.location;
        }
    }
});

方法二
不用ajax，改用form。
複製代碼 代碼如下:
<form method="post" action="/oauth/respond">
</form>

以前沒研究透這個問題，踩了幾次坑。這次研究了一下，我想以後就會遠離這個坑了。