驗證 AJAX 動態載入的頁面是否已被導向（簡單版）

這標題還真難下，完整的說明應該是「解決需要登入的頁面用 AJAX 動態載入時很容易因為使用者閒置過久導致被導向登入畫面的問題」，很多時候在會員專屬頁面中我們還是會使用 AJAX 技術去動態載入一些頁面，正常使用情況下是非常好的使用者經驗，但是如果會員閒置過久而導致系統早就已經自動登出了，但是因為頁面並沒有重新整理所以當會員又按下某一功能時，AJAX原本要動態換掉的區塊(div)變成了登入畫面甚至於跑回首頁，這是非常非常差的使用者經驗，demo 目前有想到一個很簡單的解決方案，提出來看看有沒有人有更好的解決方式。

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();
        }

再次執行首頁卻看到了

demo廢言原本想說判斷狀態碼來解決這問題，因為被導向到登入頁面是屬於「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廢言利用以上方法的確是可以簡單的解決掉這種登入不登入的問題，但 demo 並不知道這種作法正不正確，有沒有更正規的玩法，因此如果有人知道更好的作法，歡迎不吝賜教。

demoshop

驗證 AJAX 動態載入的頁面是否已被導向（簡單版）

回應討論

系列文章

本頁段落

驗證 AJAX 動態載入的頁面是否已被導向（簡單版）

相關文章

回應討論

系列文章

本頁段落