驗證 AJAX 動態載入的頁面是否已被導向（簡單版）
- 2010-07-29
- 18420
- 0
這標題還真難下，完整的說明應該是「解決需要登入的頁面用 AJAX 動態載入時很容易因為使用者閒置過久導致被導向登入畫面的問題」，很多時候在會員專屬頁面中我們還是會使用 AJAX 技術去動態載入一些頁面，正常使用情況下是非常好的使用者經驗，但是如果會員閒置過久而導致系統早就已經自動登出了，但是因為頁面並沒有重新整理所以當會員又按下某一功能時，AJAX原本要動態換掉的區塊(div)變成了登入畫面甚至於跑回首頁，這是非常非常差的使用者經驗，demo 目前有想到一個很簡單的解決方案，提出來看看有沒有人有更好的解決方式。
本範例使用 VS2010 的 MVC 預設樣板，不了解 MVC 沒關係，因為只是一個框架，並不影響本文要說的主題。
先使用預設的 MVC 專案增加一個 ActionResult
public ActionResult Index()
{
ViewData["Message"] = "歡迎使用 ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
public ActionResult needLogin()
{
return View();
}
再來我在頁面中寫一點點 Code
<h2><%: ViewData["Message"] %></h2>
<p>
若要進一步了解 ASP.NET MVC，請造訪 <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>。
</p>
--動態載入開始<div id="j_ajax"></div>--動態載入結束
<script type="text/javascript">
$(function ()
{
$.ajax({
type: "GET",
url: '/Home/needLogin',
success: function (data)
{
$('#j_ajax').html(data);
}
});
});
</script>
觀看頁面的時候就可以看到很正常的畫面
然後將 動態載入的頁面改成需要登入
[Authorize]
public ActionResult needLogin()
{
return View();
}
再次執行首頁卻看到了
原本想說判斷狀態碼來解決這問題，因為被導向到登入頁面是屬於「301」所以我當下認為只要抓到301就表示沒登入了，但實際下去跑以後都只能抓到「200」，後來想想才覺得沒錯，因為我是正常的到達那頁面後才被導向，所以順序就的確是「200」才變「301」，因此第一個想法宣告失敗....
後來又想說既然這樣，那我就想想 AJAX 的頁面和一般頁面有什麼不同，這念頭一出來我就想到了 <HTML>這個 Tag ，正常的情況下動態載入的頁面都是片段的，不可能會擁有 <HTML> 因此我就將程式碼改寫如下。
第一次改寫後的 Code
$(function ()
{
$.ajax({
type: "GET",
url: '/Home/needLogin',
success: function (data)
{
if (data.indexOf("<html") > -1)
{
alert('您尚未登入！');
}
else
{
$('#j_ajax').html(data);
}
}
});
});
反正 data 註定是要傳回來的，所以就直接去找他就好了，而 寫 <html 的原因是有很多的時候 html 後面還會接一堆東西，因此只寫頭，這樣子寫了以後當使用者遇到需要登入才能看得頁面就會跳出 您尚未登入 的提示訊息。
第二次改寫後的 Code
問題又來了，跳出 alert 有啥用，使用者通常都不會看訊息，都是有訊息就按掉以後再來問為什麼我按了沒反應，為了終結掉這種使用者，所以在 alert 後面加上 location.reload(); 逼他重新整理 
$(function ()
{
$.ajax({
type: "GET",
url: '/Home/needLogin',
success: function (data)
{
if (data.indexOf("<html") > -1)
{
alert('您尚未登入！');
location.reload();
}
else
{
$('#j_ajax').html(data);
}
}
});
});
對於頁面重整這裡需要非常小心，如果你的網站架構和是未登入會導向到首頁，而那麼剛剛好首頁就有這種需求，就會發生傳說中的「無窮迴圈」頁面一直在重整，因此使用上需要特別小心，千萬不要啥都不知道貼上去就用了。
利用以上方法的確是可以簡單的解決掉這種登入不登入的問題，但 demo 並不知道這種作法正不正確，有沒有更正規的玩法，因此如果有人知道更好的作法，歡迎不吝賜教。
回應討論