AJAX設計模式 之 怎樣構建一個可重新整理的無重新整理應用

又是一個拗口的標題！既然是“無重新整理”應用，又何來“可重新整理”的“無重新整理” 應用之說呢？其實一點也不怪——

問題

As we 都知道，所謂基於AJAX的“無重新整理應用”，一般就是指WEB應用中利用XmlHttp組件來實現一定的基於JavaScript後台非同步資料傳遞的無重新整理頁面切換，以代替傳統的基於HTML連結的“有重新整理”頁面切換。

這樣的無重新整理效果真的很酷，但是愛思考的開發人員嘗試一些時間之後就會發現一個最大的問題：我既然是無重新整理了，那麼對於一組無重新整理的功能來說，也就是從開啟網頁起，所有的效果都是在當前頁面的後台通過JavaScript非同步呼叫XmlHttp來傳遞資料並替換當前頁中的顯示內容，沒有傳統的“有重新整理”頁面切換。但是，如果在某個狀態，因為網路問題頁面暫停載入了需要手動重新整理，或者，使用者想手動重新整理一下當前頁面擷取更新的資料，或者哪怕是不小心按了一下“F5”或瀏覽器上的Refresh按鈕會怎樣呢？對了，這就是本文的標題提出的擔心。如果沒有特殊處理，那麼，手動重新整理頁面過後，網頁上的內容自然就回到最初的顯示的內容，而不是手動重新整理之前我們真正想要的資料了。是不是心中突然又一口悶氣呢？：）大可不必~~

分析

對於以上問題，當然是有解決辦法的！如著名的AJAX應用網站http://www.backbase.com/就是一個很好的範例，大家可以親自體驗，無論在哪個頁面手動重新整理，都不會發生我們前面擔心的問題~~發現沒有呢？發現其中的玄機沒？對了，就是“#”！！我們可以看到，每一次無重新整理的頁面切換之後，瀏覽器地址欄的內容都會改變，變成了什麼呢？改變的內容都是在相同的網址（對於BackBase，自然都是http://www.backbase.com/這個首頁了）之後，加上了#xxxx，這是什麼呢？熟悉HTML的讀者該想起來了，什麼時候會出現這個“#”呢？對了，就是對我們來說最可愛最熟悉的，我們的全球資訊網超連結的的鼻祖“<a>”。

不知道還有多少讀者記得“#”原本的用處，那就是當前頁面的內部定位功能。忘記了的朋友可以試試將下面的HTML建一個test.html，看看簡單的效果。

<a name="top">top</a>
<a href="#bottom">go to bottom</a>
<div style="height:800px">&nbsp;</div>
<a name="middle">middle</a>
<a href="javascript:var tmp = document.location = 'test.html#top'">go to top</a>
<div style="height:800px">&nbsp;</div>
<a name="bottom">bottom</a>
<a href="test.html#middle">go to middle</a>

如果href中指定的“#”後的內name在指定頁中沒有定義，瀏覽器則簡單的定位到指定頁的頁首。除了以一個連結的形式來調轉之外，也可以通過修改document.location = ‘test.html#top’ 這樣的方式來重訂向。凡是這樣跳轉的頁面，因為實際上還是在當前頁面內，因此，網頁是不會有物理重新整理的。OK，這就是我們實現“可重新整理的無重新整理應用”的方案。

模式

作為一個設計模式，基於#連結的“可重新整理的無重新整理應用”的方案對於任意的AJAX架構，或者直接使用未經封裝的XmlHttp都是同等適用的。這就要求我們在執行任意一個AJAX回調時，注意利用#標籤改變當前頁的url地址，那麼，當使用者重新整理頁面時，由於url中#後的參數不同，就可以在重新整理時通過解析和判斷當前的#後的參數來獲得“可重新整理的無重新整理”效果。

題外話

今天將我的輕量級AJAX & JSRS架構AjaxHelper略作了修改封裝，同時提供一個支援ASP，PHP，JSP的Flat版本，感興趣的朋友可以在http://ilungasoft.com下載。

另外也談談試用Atlas的感想。總體來講，真正值的期待的還是對AJAX效果Web控制項的資料繫結和事件的支援，只是現在一切都需要手動輸，並且是內遷在HTML中的XML，使用不夠方便，希望正式版的時候能提供像其它Web控制項那樣的可視化嚮導。除此以外，總體上沒感覺比Ajax.Net有太多本質提高，也不見得比AjaxHelper使用更靈活。