demoshop

NEWS

demo, trying to be the best.

站內搜尋載入中...

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

  • 1231
  • 6

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

  • 最後更新：2012/1/1 下午 08:21:45

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 並不知道這種作法正不正確，有沒有更正規的玩法，因此如果有人知道更好的作法，歡迎不吝賜教。