亚洲视频在线精品_ AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用

AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用

又是一個(gè)拗口的標題！既然是“無(wú)刷新”應用，又何來(lái)“可刷新”的“無(wú)刷新” 應用之說(shuō)呢？其實(shí)一點(diǎn)也不怪——

問(wèn)題

As we 都知道，所謂基于A(yíng)JAX的“無(wú)刷新應用”，一般就是指WEB應用中利用XmlHttp組件來(lái)實(shí)現一定的基于JavaScript后臺異步數據傳遞的無(wú)刷新頁(yè)面切換，以代替傳統的基于HTML鏈接的“有刷新”頁(yè)面切換。

這樣的無(wú)刷新效果真的很酷，但是愛(ài)思考的開(kāi)發(fā)者嘗試一些時(shí)間之后就會(huì )發(fā)現一個(gè)最大的問(wèn)題：我既然是無(wú)刷新了，那么對于一組無(wú)刷新的功能來(lái)說(shuō)，也就是從打開(kāi)網(wǎng)頁(yè)起，所有的效果都是在當前頁(yè)面的后臺通過(guò)JavaScript異步調用XmlHttp來(lái)傳遞數據并替換當前頁(yè)中的顯示內容，沒(méi)有傳統的“有刷新”頁(yè)面切換。但是，如果在某個(gè)狀態(tài)，因為網(wǎng)絡(luò )問(wèn)題頁(yè)面暫停載入了需要手動(dòng)刷新，或者，用戶(hù)想手動(dòng)刷新一下當前頁(yè)面獲取更新的數據，或者哪怕是不小心按了一下“F5”或瀏覽器上的Refresh按鈕會(huì )怎樣呢？對了，這就是本文的標題提出的擔心。如果沒(méi)有特殊處理，那么，手動(dòng)刷新頁(yè)面過(guò)后，網(wǎng)頁(yè)上的內容自然就回到最初的顯示的內容，而不是手動(dòng)刷新之前我們真正想要的數據了。是不是心中突然又一口悶氣呢？：）大可不必~~

分析

對于以上問(wèn)題，當然是有解決辦法的！如著(zhù)名的AJAX應用網(wǎng)站http://www.backbase.com/就是一個(gè)很好的范例，大家可以親自體驗，無(wú)論在哪個(gè)頁(yè)面手動(dòng)刷新，都不會(huì )發(fā)生我們前面擔心的問(wèn)題~~發(fā)現沒(méi)有呢？發(fā)現其中的玄機沒(méi)？對了，就是“#”??！我們可以看到，每一次無(wú)刷新的頁(yè)面切換之后，瀏覽器地址欄的內容都會(huì )改變，變成了什么呢？改變的內容都是在相同的網(wǎng)址（對于BackBase，自然都是http://www.backbase.com/這個(gè)首頁(yè)了）之后，加上了#xxxx，這是什么呢？熟悉HTML的讀者該想起來(lái)了，什么時(shí)候會(huì )出現這個(gè)“#”呢？對了，就是對我們來(lái)說(shuō)最可愛(ài)最熟悉的，我們的萬(wàn)維網(wǎng)超鏈接的的鼻祖“<a>”。

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

<a href="#bottom">go to bottom</a>

<a name="middle">middle</a>

<a name="bottom">bottom</a>

<a href="test.html#middle">go to middle</a>

如果href中指定的“#”后的內name在指定頁(yè)中沒(méi)有定義，瀏覽器則簡(jiǎn)單的定位到指定頁(yè)的頁(yè)首。除了以一個(gè)鏈接的形式來(lái)調轉之外，也可以通過(guò)修改document.location = ‘test.html#top’ 這樣的方式來(lái)重訂向。凡是這樣跳轉的頁(yè)面，因為實(shí)際上還是在當前頁(yè)面內，因此，網(wǎng)頁(yè)是不會(huì )有物理刷新的。OK，這就是我們實(shí)現“可刷新的無(wú)刷新應用”的方案。

模式

作為一個(gè)設計模式，基于#鏈接的“可刷新的無(wú)刷新應用”的方案對于任意的AJAX框架，或者直接使用未經(jīng)封裝的XmlHttp都是同等適用的。這就要求我們在執行任意一個(gè)AJAX回調時(shí)，注意利用#標簽改變當前頁(yè)的url地址，那么，當用戶(hù)刷新頁(yè)面時(shí)，由于url中#后的參數不同，就可以在刷新時(shí)通過(guò)解析和判斷當前的#后的參數來(lái)獲得“可刷新的無(wú)刷新”效果。

題外話(huà)

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

另外也談?wù)勗囉肁tlas的感想?？傮w來(lái)講，真正值的期待的還是對AJAX效果Web控件的數據綁定和事件的支持，只是現在一切都需要手動(dòng)輸，并且是內遷在HTML中的XML，使用不夠方便，希望正式版的時(shí)候能提供像其它Web控件那樣的可視化向導。除此以外，總體上沒(méi)感覺(jué)比Ajax.Net有太多本質(zhì)提高，也不見(jiàn)得比AjaxHelper使用更靈活。

posted on 2005-11-02 20:31 Teddy‘s Knowledge Base 閱讀(3480) 評論(12) 編輯收藏引用收藏至365Key 所屬分類(lèi): Ajax

評論 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2005-11-03 00:00 Learning .net Teddy,你在A(yíng)jaxHelper Flat Ver 0.6 Reference里寫(xiě)ajaxTemplate不用加后綴名，如.asp，但好象只有加了后綴才可以正常啊(至少在asp,win2003 iis6下是這樣的）。另外對這篇文章《AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用》，你可不可以舉個(gè)例子啊。好象還維持刷新前的狀態(tài)不是很簡(jiǎn)單的事情哦。可能是我太笨了，沒(méi)有領(lǐng)會(huì )你的意思。回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2005-11-03 08:59 Teddy‘s Knowledge Base @Learning.net: Flat版中ajaxTemplate的確是必須包含文件完整路徑的，也就是說(shuō)，必須是要回調的網(wǎng)頁(yè)的絕對或相對路徑，因為，ASP.Net版使用UserControl來(lái)處理回調，但Flat版可用于任意的環(huán)境，且其它環(huán)境可沒(méi)有UserControl這種東西，所以只能是網(wǎng)頁(yè)啦。關(guān)于文中提到的這個(gè)模式，如果手動(dòng)來(lái)實(shí)現的確是要對js比較了解的，為了簡(jiǎn)化該過(guò)程，我寫(xiě)了一個(gè)輔助類(lèi)庫，當然是js的，稍后會(huì )發(fā)布。這個(gè)輔助類(lèi)庫將可用于包括AjaxHelper，Atlas在內的任意的Ajax框架。回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2005-11-03 16:57 李天平不太理解你說(shuō)的，還是沒(méi)解決手動(dòng)刷新的問(wèn)題啊，這樣子按了一下“F5”或者點(diǎn)擊一個(gè)button依然會(huì )刷新啊,還是回頭原始狀態(tài)了??？回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2005-11-03 18:02 Teddy‘s Knowledge Base @李天平: 你可以看看http://www.backbase.com/ 我的站點(diǎn)上的demo是很久前寫(xiě)的，還沒(méi)有實(shí)現該模式！回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2006-03-23 18:59 e we 回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2006-03-23 18:59 e 不錯回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2006-03-26 23:12 ertgerfgt xzcdxcv 回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2006-03-26 23:13 dfgdf dfgdfgfdg 回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2006-08-09 15:19 shengnet 這個(gè)例子在FireFox中顯示不正常。還有就是一個(gè)頁(yè)面如果用了兩個(gè)Ajaxhelper.update2("","")后,只能保存一個(gè)的狀態(tài). 回復 # 希望增加新功能 2006-08-09 16:32 shengnet 希望加入后退前進(jìn)按鈕的狀態(tài) 回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2006-08-09 16:45 shengnet 是否能給，update再設立一個(gè)參數，如“state”，這個(gè)參數是顯示loading的地方。這樣可以訂制loading的顯示位置。回復 # re: AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用 2006-08-11 14:16 shengnet Ajaxhelp.js中的源碼 Function.prototype.bind = function() {}什么意思！

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

AJAX設計模式 之 怎樣構建一個(gè)可刷新的無(wú)刷新應用

AJAX設計模式之怎樣構建一個(gè)可刷新的無(wú)刷新應用