隨著AJAX動態更新技術的普及,手邊專案有愈來愈多網頁開始實現"無PostBack"的設計風格,透過jQuery $.post(), $.get()與ASP.NET程式溝通,執行查詢、更新作業並取得結果,再動態改變HTML DOM回應使用者。(註: 對ASP.NET開發者來說,UpdatePanel是另一個無痛實現AJAX化的選項,但有些副作用)

由使用者的回饋來看,減少網頁PostBack與網頁重新導向次數,確實大幅提高操作回應速度,提供更好的操作體驗,不過倒有一個常被垢病之處 --- 使用者明明覺得點選操作後瀏覽器切換到下一個畫面,為什麼按覽器的回上頁卻無法回到上個畫面?

細究這個問題的根源,在於程式是透過AJAX方式取得下一畫面內容更新在網頁上,或是動態顯示/隱藏不同的DOM元素,給予使用者"由操作網頁A切換到操作網頁B"的認知,但以瀏覽器的角度,卻始終是同一個網頁;由於使用者覺得網頁已被切換過,當需要回前一個介面進行資料修改或重新選擇時,直覺上便會去點選"回上頁",結果跳過了AJAX切換介面的過程,直接進入這個網頁前的瀏覽網頁,造成認知與執行結果的落差,形成抱怨。

當然,在吃過幾次悶虧(例如: 回上頁造成結果沒儲存之類的,這個倒有解藥),碰了一鼻子灰之後,使用者就會學乖,自動避開"在某某網頁不能按【回上頁】,很可怕,不要問"的地雷。或者,我們也可以恐嚇提示或教育使用者避免在這類介面按回上頁,或是在網頁加上自己寫的"AJAX版回上頁"按鈕實現切換回上一個UI效果做為替代,不過,這些治標做法終究無法完全避免使用者誤觸回上頁所造成的困擾。

用一個實例來展示這個問題:

排版顯示純文字
<!DOCTYPE html>
 
<html>
<head>
    <title>AJAX GoBack</title>
    <script src="Scripts/jquery-1.6.3.js" type="text/javascript"> </script>
    <script>
        $(function () {
            $("#s1").show();
            $("input.nav-btn").click(function () {
                var $btn = $(this);
                //隱藏目前按鈕所在的div
                $btn.parent().hide();
                //由按鈕的data-nav屬性決定要顯示div的id
                $("#" + $btn.data("nav")).show();
            });
        });
    </script>
    <style>
    #main div { width: 300px; height: 200px; display: none; padding: 10px; }
    #s1 { background-color: #ff7777; }
    #s2 { background-color: #77ff77; }
    #s3 { background-color: #7777ff; }
    </style>
</head>
<body>
<div id="main">
    <div id="s1">
    STEP1
    <input type="button" class="nav-btn" value="Next" data-nav="s2" />
    </div>
    <div id="s2">
    STEP2
    <input type="button" class="nav-btn" value="Next" data-nav="s3" />
    </div>
    <div id="s3">
    FINAL
    <input type="button" value="Submit" />
    </div>
</div>
</body>
</html>

線上展示

以上的網頁包含三個<div>,假裝是輸入流程中的三個步驟,STEP1按Next可以跳到STEP2,STEP2按Next可以跳到STEP3。在操作上,讓使用者感覺在不同的網頁介面間切換,但對瀏覽器來說,自始至終都在同一網頁,於是,如圖所以,操作時連回上頁鈕都沒得按。

搞HTML的老骨頭可能記得#書籤的用法(參考[請看"書籤"相關說明]),在網頁MyPage.htm中放入<a name="myBookmark"></a>,當URL指定MyPage.htm#myBookmark,瀏覽器就會開啟該網頁並捲動到<a name="myBookmark"></a>的所在位置。有趣的是,MyPage.htm#a跟MyPage.htm#b可被視為不同網址(這表示在瀏覽歷史中會出現一筆),卻又不會觸發網頁重新載入,這個特性讓AJAX回上頁問題出現一線曙光。

在URI規範中,#符號後方所帶的資訊被定義成Fragment Identifier(#是Hash symbol,#後方的內容也被稱為hash),不只是作為書籤定址,還可實現AJAX的歷史巡覽功能(from Wiki: With the rise of AJAX, some websites use fragment identifiers to emulate the back button behavior of browsers for page changes that do not require a reload, or to emulate subpages.),硬綁綁的規範讓人頭好痛,這裡只研究怎麼應用就好。

以下是一個簡單的hash應用示範(請使用IE8/9/10的標準模式、Firefox、Chrome或Safari執行)

排版顯示純文字
<!DOCTYPE html>
 
<html>
<head>
    <title>Hash Demo</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.3.js">    
    </script>
    <script>
        $(function () {
 
            function setHash(x) {
                var n = x;
                //在第n秒將loation.href改為後方加#sn
                //注意: 只變動#以後的參數不會導致網頁重新載入
            setTimeout(function () {
                    location.hash = "#s" + n;
                }, n * 1000);
            }
            //在第0,1,...,7秒為location.url加上#s0-#s7
            for (var i = 0; i < 8; i++) setHash(i);
            $("#btnShowHash").click(function () {
                $("#ulDisp").append("<li>hash=" + location.hash + "</li>");
            });
        });
    </script>
</head>
<body>
<input type="button" id="btnShowHash" value="Show location.hash" />
<ul id="ulDisp"></ul>
</body>
</html>

線上展示

網頁裡有一小段程式,會在第0-7秒時,在URL的最後方加上#s0-#s7,執行完畢後,按瀏覽器回上頁及回下頁可在不同的#sn間切換,按下"Show location.href"則會顯示目前的location.hash,當來回切換上一頁下一頁,下方hash=#sn的<li>顯示並不會被清除,驗證了網頁並未被重新載入,Javascript及DOM的狀態在切換過程中不會遺失。

但很不幸地,IE7(或IE8/9開相容模式)對location.hash特性支援不夠完整,hash改變時並不會在瀏覽歷史中產生記錄,因此需要透過加入隱藏式iframe等特殊手法來克服,自己處理跨瀏覽器議題太辛苦,有個很好用的jQuery外掛BBQ(不是中秋烤肉巴比Q,是Back Button & Query)可以讓我們輕鬆寫出跨瀏覽器版的AJAX回上頁功能。

小小改寫前述STEP1-STEP2-FINAL網頁,主要是在切換網頁時透過$.bbq.pushState()將目前的階段設成location.hash(#step=sn),另外在window.onhashchage事件則加入一小段程式,讀取hash值決定現在是STEP1,2還是FINAL,以及該顯示哪一個<div>。如此,一旦使用者按下回上頁/回下頁,URL中的hash不同就會觸發hashchange事件,程式就能依指定的階段切換不同的<div>。

排版顯示純文字
<!DOCTYPE html>
 
<html>
<head>
    <title>AJAX GoBack</title>
    <script src="Scripts/jquery-1.6.3.js" type="text/javascript"> </script>
    <script src="Scripts/jquery.ba-bbq.js" type="text/javascript"> </script>
    <script>
        $(function () {
            $("#s1").show();
            $("input.nav-btn").click(function () {
                var $btn = $(this);
                $btn.parent().hide();
                var nav = $btn.data("nav");
                $("#" + nav).show();
                //將目前的步驟加註在location.hash
                $.bbq.pushState({ step: nav });
            });
            //hash變化時觸發hashchange事件
            $(window).bind('hashchange', function (e) {
                //由hash取出step參數,決定要顯示哪一個div
                var s = e.getState("step") || "s1";
                if (!$("#" + s + ":visible").length) {
                    $("#main > div").hide();
                    $("#" + s).show();
                }
            });
        });
    </script>
    <style>
    #main div { width: 300px; height: 200px; display: none; padding: 10px; }
    #s1 { background-color: #ff7777; }
    #s2 { background-color: #77ff77; }
    #s3 { background-color: #7777ff; }
    </style>
</head>
<body>
<div id="main">
    <div id="s1">
    STEP1
    <input type="button" class="nav-btn" value="Next" data-nav="s2" />
    </div>
    <div id="s2">
    STEP2
    <input type="button" class="nav-btn" value="Next" data-nav="s3" />
    </div>
    <div id="s3">
    FINAL
    <input type="button" value="Submit" />
    </div>
</div>
</body>
</html>

線上展示

經過這番加工,網頁就能跨瀏覽器支援回上頁功能,我們又向高級AJAX網頁開發再前進一步囉!

2011-09-23更新】另外補充HTML5支援AJAX動態內容瀏覽歷程的新做法


Comments

# by Ammon

用 Hash 已經過時了,看看新的 History API ( http://goo.gl/47dk3 ) 透過 pushState popState replaceState 改變網址並且不會 reload 網頁,Facebook 和 github 都有用這項技術。

# by Jeffrey

to Ammon, 感謝提供HTML5武器新知,稍後會再整理補充。

# by Jeffrey

to 星寂, 謝謝補充,這再度證明了UpdatePanel真是很優秀的傻瓜式AJAX實作選擇。

Post a comment