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

來源:互聯網
上載者:User

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

問題

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使用更靈活。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.