ajax與302響應(yīng)代碼測(cè)試
更新時(shí)間：2013年10月23日 16:07:57 作者：
服務(wù)器端的響應(yīng)是302 Found，在ajax的回調(diào)函數(shù)中能夠獲取這個(gè)狀態(tài)碼嗎？能夠從Response Headers中得到Location的值進(jìn)行重定向嗎？讓我們來(lái)一起動(dòng)手寫(xiě)寫(xiě)代碼看看實(shí)際情況吧。
在ajax請(qǐng)求中，如果服務(wù)器端的響應(yīng)是302 Found，在ajax的回調(diào)函數(shù)中能夠獲取這個(gè)狀態(tài)碼嗎？能夠從Response Headers中得到Location的值進(jìn)行重定向嗎？讓我們來(lái)一起看看實(shí)際情況。
使用jquery的$.ajax()發(fā)起ajax請(qǐng)求的javascript代碼如下：
$.ajax({
url: '/oauth/respond',
type: 'post',
data: data,
complete: function(jqXHR){
console.log(jqXHR.status);
},
error: function (xhr) {
console.log(xhr.status);
}
});
當(dāng)服務(wù)器端返回302 Found的響應(yīng)時(shí)，瀏覽器中的運(yùn)行結(jié)果如下：
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.
原來(lái)，當(dāng)服務(wù)器將302響應(yīng)發(fā)給瀏覽器時(shí)，瀏覽器并不是直接進(jìn)行ajax回調(diào)處理，而是先執(zhí)行302重定向——從Response Headers中讀取Location信息，然后向Location中的Url發(fā)出請(qǐng)求，在收到這個(gè)請(qǐng)求的響應(yīng)后才會(huì)進(jìn)行ajax回調(diào)處理。大致流程如下：
jax -> browser -> server -> 302 -> browser(redirect) -> server -> browser -> ajax callback
而在我們的測(cè)試程序中，由于302返回的重定向URL在服務(wù)器上沒(méi)有相應(yīng)的處理程序，所以在ajax回調(diào)函數(shù)中得到的是404狀態(tài)碼；如果存在對(duì)應(yīng)的URL，得到的狀態(tài)碼就是200。
所以，如果你想在ajax請(qǐng)求中根據(jù)302響應(yīng)通過(guò)location.href進(jìn)行重定向是不可行的。
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;
}
}
});
<form method="post" action="/oauth/respond">
</form>
以前沒(méi)研究透這個(gè)問(wèn)題，踩了幾次坑。這次研究了一下，我想以后就會(huì)遠(yuǎn)離這個(gè)坑了。
使用jquery的$.ajax()發(fā)起ajax請(qǐng)求的javascript代碼如下：
復(fù)制代碼 代碼如下:
$.ajax({
url: '/oauth/respond',
type: 'post',
data: data,
complete: function(jqXHR){
console.log(jqXHR.status);
},
error: function (xhr) {
console.log(xhr.status);
}
});
當(dāng)服務(wù)器端返回302 Found的響應(yīng)時(shí)，瀏覽器中的運(yùn)行結(jié)果如下：
 |
在ajax的complete()與error()回調(diào)函數(shù)中得到的狀態(tài)碼都是404，而不是302。
這是為什么呢？
在stackoverflow上找到了
復(fù)制代碼 代碼如下:
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.
原來(lái)，當(dāng)服務(wù)器將302響應(yīng)發(fā)給瀏覽器時(shí)，瀏覽器并不是直接進(jìn)行ajax回調(diào)處理，而是先執(zhí)行302重定向——從Response Headers中讀取Location信息，然后向Location中的Url發(fā)出請(qǐng)求，在收到這個(gè)請(qǐng)求的響應(yīng)后才會(huì)進(jìn)行ajax回調(diào)處理。大致流程如下：
jax -> browser -> server -> 302 -> browser(redirect) -> server -> browser -> ajax callback
而在我們的測(cè)試程序中，由于302返回的重定向URL在服務(wù)器上沒(méi)有相應(yīng)的處理程序，所以在ajax回調(diào)函數(shù)中得到的是404狀態(tài)碼；如果存在對(duì)應(yīng)的URL，得到的狀態(tài)碼就是200。
所以，如果你想在ajax請(qǐng)求中根據(jù)302響應(yīng)通過(guò)location.href進(jìn)行重定向是不可行的。
如何解決？
方法一
繼續(xù)用ajax，修改服務(wù)器端代碼，將原來(lái)的302響應(yīng)改為json響應(yīng)，比如下面的ASP.NET MVC示例代碼：
復(fù)制代碼 代碼如下:
return Json(new { status = 302, location = "/oauth/respond" });
ajax代碼稍作修改即可：
復(fù)制代碼 代碼如下:
$.ajax({
url: '/oauth/respond',
type: 'post',
data: data,
dataType: 'json',
success: function (data) {
if (data.status == 302) {
location.href = data.location;
}
}
});
方法二
不用ajax，改用form。
復(fù)制代碼 代碼如下:
<form method="post" action="/oauth/respond">
</form>
以前沒(méi)研究透這個(gè)問(wèn)題，踩了幾次坑。這次研究了一下，我想以后就會(huì)遠(yuǎn)離這個(gè)坑了。
相關(guān)文章
微信小程序 image組件binderror使用例子與js中的onerror區(qū)別
這篇文章主要介紹了微信小程序 image組件binderror使用例子與js中的onerror區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02
一說(shuō)到JavaScript的數(shù)組，大家基本都能馬上想起pop()、push()、shift()、unshift()、indexof()等等，今天小編就給大家分享幾個(gè)開(kāi)發(fā)中常用的js數(shù)組方法即他們的用法。需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09
這篇文章主要為大家介紹了UMD的包導(dǎo)出TS 類型方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了獨(dú)立使用?umi?的核心插件模塊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 數(shù)據(jù)綁定的相關(guān)資料,并附實(shí)例代碼，需要的朋友可以參考下2016-10-10
async-validator實(shí)現(xiàn)原理源碼解析
這篇文章主要為大家介紹了async-validator實(shí)現(xiàn)原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了Three.js材質(zhì)Material類型示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了Tree Shaking實(shí)現(xiàn)方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序下拉刷新界面的實(shí)現(xiàn)的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
這篇文章我們主要談一談js中的宏任務(wù)和微任務(wù)，JavaScript是一門(mén)單線程語(yǔ)言，即一次只能完成一個(gè)任務(wù)，若有多個(gè)任務(wù)要執(zhí)行，則必須排隊(duì)按照隊(duì)列來(lái)執(zhí)行，下面我們就來(lái)簡(jiǎn)單談?wù)凧avaScript吧,需要的朋友可以參考下面文章內(nèi)容的具體內(nèi)容2021-09-09