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