服務器端的響應是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>