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)行重定向嗎？讓我們來一起動(dòng)手寫寫代碼看看實(shí)際情況吧。
在ajax請(qǐng)求中，如果服務(wù)器端的響應(yīng)是302 Found，在ajax的回調(diào)函數(shù)中能夠獲取這個(gè)狀態(tài)碼嗎？能夠從Response Headers中得到Location的值進(jìn)行重定向嗎？讓我們來一起看看實(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.
原來，當(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ù)器上沒有相應(yīng)的處理程序，所以在ajax回調(diào)函數(shù)中得到的是404狀態(tài)碼；如果存在對(duì)應(yīng)的URL，得到的狀態(tài)碼就是200。
所以，如果你想在ajax請(qǐng)求中根據(jù)302響應(yīng)通過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>
以前沒研究透這個(gè)問題，踩了幾次坑。這次研究了一下，我想以后就會(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.
原來，當(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ù)器上沒有相應(yīng)的處理程序，所以在ajax回調(diào)函數(shù)中得到的是404狀態(tài)碼；如果存在對(duì)應(yīng)的URL，得到的狀態(tài)碼就是200。
所以，如果你想在ajax請(qǐng)求中根據(jù)302響應(yīng)通過location.href進(jìn)行重定向是不可行的。
如何解決？
方法一
繼續(xù)用ajax，修改服務(wù)器端代碼，將原來的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>
以前沒研究透這個(gè)問題，踩了幾次坑。這次研究了一下，我想以后就會(huì)遠(yuǎn)離這個(gè)坑了。
相關(guān)文章
這篇文章主要介紹了Java中的Script對(duì)象的相關(guān)資料,需要的朋友可以參考下文章里內(nèi)容2021-08-08
這篇文章主要為大家介紹了Selection與Range 對(duì)象操作示例指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
微信小程序 獲取javascript 里的數(shù)據(jù)
這篇文章主要介紹了微信小程序 獲取javascript 里的數(shù)據(jù)的相關(guān)資料,這里通過實(shí)例來說明如何獲取javascript里的數(shù)據(jù)，希望能幫助到大家，需要的朋友可以參考下2017-08-08
微信小程序 頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解
這篇文章主要介紹了微信小程序 頁面跳轉(zhuǎn)及數(shù)據(jù)傳遞詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03
前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹
這篇文章主要為大家介紹了前端算法leetcode109題解有序鏈表轉(zhuǎn)換二叉搜索樹示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了詳解微信小程序 登錄獲取unionid的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 View組件詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了Astro Islands靜態(tài)頁面交互式UI組件使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JavaScript實(shí)現(xiàn)一個(gè)Promise隊(duì)列小工具
這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個(gè)Promise隊(duì)列小工具，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了微信小程序 列表渲染的相關(guān)資料,并附簡單代碼實(shí)例，需要的朋友可以參考下2016-10-10