AJAX设计模式 之 怎样构建一个可刷新的无刷新应用又是一个拗口的标题!既然是“无刷新”应用,又何来“可刷新”的“无刷新” 应用之说呢?其实一点也不怪—— 问题 As we 都知道,所谓基于AJAX的“无刷新应用”,一般就是指WEB应用中利用XmlHttp组件来实现一定的基于JavaScript后台异步数据传递的无刷新页面切换,以代替传统的基于HTML链接的“有刷新”页面切换。 这样的无刷新效果真的很酷,但是爱思考的开发者尝试一些时间之后就会发现一个最大的问题:我既然是无刷新了,那么对于一组无刷新的功能来说,也就是从打开网页起,所有的效果都是在当前页面的后台通过JavaScript异步调用XmlHttp来传递数据并替换当前页中的显示内容,没有传统的“有刷新”页面切换。但是,如果在某个状态,因为网络问题页面暂停载入了需要手动刷新,或者,用户想手动刷新一下当前页面获取更新的数据,或者哪怕是不小心按了一下“F5”或浏览器上的Refresh按钮会怎样呢?对了,这就是本文的标题提出的担心。如果没有特殊处理,那么,手动刷新页面过后,网页上的内容自然就回到最初的显示的内容,而不是手动刷新之前我们真正想要的数据了。是不是心中突然又一口闷气呢?:)大可不必~~ 分析 对于以上问题,当然是有解决办法的!如著名的AJAX应用网站http://www./就是一个很好的范例,大家可以亲自体验,无论在哪个页面手动刷新,都不会发生我们前面担心的问题~~发现没有呢?发现其中的玄机没?对了,就是“#”!!我们可以看到,每一次无刷新的页面切换之后,浏览器地址栏的内容都会改变,变成了什么呢?改变的内容都是在相同的网址(对于BackBase,自然都是http://www./这个首页了)之后,加上了#xxxx,这是什么呢?熟悉HTML的读者该想起来了,什么时候会出现这个“#”呢?对了,就是对我们来说最可爱最熟悉的,我们的万维网超链接的的鼻祖“<a>”。 不知道还有多少读者记得“#”原本的用处,那就是当前页面的内部定位功能。忘记了的朋友可以试试将下面的HTML建一个test.html,看看简单的效果。 <a name="top">top</a>
<a href="#bottom">go to bottom</a> <div style="height:800px"> </div> <a name="middle">middle</a> <a href="javascript:var tmp = document.location = ‘test.html#top‘">go to top</a> <div style="height:800px"> </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://下载。 另外也谈谈试用Atlas的感想。总体来讲,真正值的期待的还是对AJAX效果Web控件的数据绑定和事件的支持,只是现在一切都需要手动输,并且是内迁在HTML中的XML,使用不够方便,希望正式版的时候能提供像其它Web控件那样的可视化向导。除此以外,总体上没感觉比Ajax.Net有太多本质提高,也不见得比AjaxHelper使用更灵活。 posted on 2005-11-02 20:31 Teddy‘s Knowledge Base 阅读(3480) 评论(12) 编辑 收藏 引用 收藏至365Key 所属分类: Ajax |
|
评论
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2005-11-03 00:00 Learning .net
Teddy,你在AjaxHelper Flat Ver 0.6 Reference里写ajaxTemplate不用加后缀名,如.asp,但好象只有加了后缀才可以正常啊(至少在asp,win2003 iis6下是这样的)。
另外对这篇文章《AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 》,你可不可以举个例子啊。好象还维持刷新前的状态不是很简单的事情哦。 可能是我太笨了,没有领会你的意思。 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2005-11-03 08:59 Teddy‘s Knowledge Base
@Learning.net:
Flat版中ajaxTemplate的确是必须包含文件完整路径的,也就是说,必须是要回调的网页的绝对或相对路径,因为,ASP.Net版使用UserControl来处理回调,但Flat版可用于任意的环境,且其它环境可没有UserControl这种东西,所以只能是网页啦。
关于文中提到的这个模式,如果手动来实现的确是要对js比较了解的,为了简化该过程,我写了一个辅助类库,当然是js的,稍后会发布。这个辅助类库将可用于包括AjaxHelper,Atlas在内的任意的Ajax框架。 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2005-11-03 16:57 李天平
不太理解你说的,还是没解决手动刷新的问题啊,这样子按了一下“F5”或者点击一个button依然会刷新啊,还是回头原始状态了啊? 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2005-11-03 18:02 Teddy‘s Knowledge Base
@李天平:
你可以看看http://www./
我的站点上的demo是很久前写的,还没有实现该模式! 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2006-03-23 18:59 e
we 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2006-03-23 18:59 e
不错 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2006-03-26 23:12 ertgerfgt
xzcdxcv 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2006-03-26 23:13 dfgdf
dfgdfgfdg 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2006-08-09 15:19 shengnet
这个例子在FireFox中显示不正常。
还有就是一个页面如果用了两个Ajaxhelper.update2("","")后,只能保存一个的状态. 回复
# 希望增加新功能 2006-08-09 16:32 shengnet
希望加入后退前进按钮的状态 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2006-08-09 16:45 shengnet
是否能给,update再设立一个参数,如“state”,这个参数是显示loading的地方。这样可以订制loading的显示位置。 回复
# re: AJAX设计模式 之 怎样构建一个可刷新的无刷新应用 2006-08-11 14:16 shengnet
Ajaxhelp.js中的源码
Function.prototype.bind = function() {}什么意思!