用 AJAX 来控制书签和回退按钮

　　这篇文章描述了一个支持AJAX应用书签和回退按钮的开源的javascript库。在这个指南的最后，开发者将会得出一个甚至不是Google Maps 或者 Gmail那样处理的AJAX的解决方案：健壮的，可用的书签和向前向后的动作能够象其他的web页面一样正确的工作。
　　
　　AJAX：怎样去控制书签和回退按钮 这篇文章说明了一个重要的成果，AJAX应用目前面对着书签和回退按钮的应用，描述了非常简单的历史库（Really Simple History），一个开源的解决这类问题的框架，并提供了一些能够运行的例子。
　　
　　这篇文章描述的主要问题是双重的，一是一个隐藏的html 表单被用作一个大而短生命周期的客户端信息的session缓存，这个缓存对在这个页面上前进回退是强壮的。二是一个锚连接和隐藏的iframes的组合用来截取和记录浏览器的历史事件，来实现前进和回退的按钮。这两个技术都被用一个简单的javascript库来封装，以利于开发者的使用。
　　
　　存在的问题
　　
　　书签和回退按钮在传统的多页面的web应用上能顺利的运行。当用户在网站上冲浪时，他们的浏览器地址栏能更新URL,这些URL可以被粘贴到的email或者添加到书签以备以后的使用。回退和前进按钮也可以正常运行，这可以使用户在他们访问的页面间移动。
　　
　　AJAX应用是与众不同的，然而，他也是在单一web页面上成熟的程序。浏览器不是为AJAX而做的—AJAX他捕获过去的事件，当web应用在每个鼠标点击时刷新页面。
　　
　　在象Gmail那样的AJAX软件里，浏览器的地址栏正确的停留就象用户在选择和改变应用的状态时，这使得作书签到特定的应用视图里变得不可能。此外，如果用户按下了他们的回退按钮去返回上一个操作，他们会惊奇的发现浏览器将完全离开原来他所在的应用的web页面。
　　
　　解决方案
　　
　　开源的Really Simply History(RSH)框架解决了这些问题，他带来了AJAX应用的作书签和控制前进后退按钮的功能。RSH目前还是beta版，在Firefox1.0上，Netscape7及以上,和IE6及以上运行。Safari现在还不支持（要得到更详细的说明，请看我的weblog中的文章Coding in Paradise: Safari: No DHTML History Possible).
　　
　　目前存在的几个AJAX框架可以帮助我们做书签和发布历史，然而所有的框架都因为他们的实现而被几个重要的bug困扰（请看Coding in Paradise: AJAX History Libraries 得知详情）。此外，许多AJAX历史框架集成绑定到较大的库上，比如Backbase 和 Dojo，这些框架提供了与传统AJAX应用不同的编程模型，强迫开发者去采用一整套全新的方式去获得浏览器的历史相关的功能。
　　
　　相应的，RSH是一个简单的模型，能被包含在已经存在的AJAX系统中。而且，Really Simple History库使用了一些技巧去避免影响到其他历史框架的bug.
　　
　　Really Simple History框架由2个javascript类库组成，分别叫DhtmlHistory 和 HistoryStorage.
　　
　　DhtmlHistory 类提供了一个对AJAX应用提取历史的功能。.AJAX页面add() 历史事件到浏览器里，指定新的地址和关联历史数据。DhtmlHistory 类用一个锚的hash表更新浏览器现在的URL，比如#new-location ，然后用这个新的URL关联历史数据。AJAX应用注册他们自己到历史监听器里，然后当用户用前进和后退按钮导航的时候，历史事件被激发，提供给浏览器新的地址和调用add()持续保留数据。
　　
　　第二个类HistoryStorage，允许开发者存储任意大小的历史数据。一般的页面，当一个用户导航到一个新的网站，浏览器会卸载和清除所有这个页面的应用和javascript状态信息。如果用户用回退按钮返回过来了，所有的数据已经丢失了。HistoryStorage 类解决了这个问题，他有一个api 包含简单的hashtable方法比如put(),get(),hasKey()。这些方法允许开发者在离开web页面时存储任意大小的数据，当用户点了回退按钮返回时，数据可以通过HistoryStorage 类被访问。我们通过一个隐藏的表单域（a hidden form field），利用浏览器即使在用户离开web页面也会自动保存表单域值的这个特性，完成这个功能。
　　
　　让我们立即进入一个简单的例子吧。
　　
　　示例1
　　
　　首先，任何一个想使用Really Simple History框架的页面必须包含（include）dhtmlHistory.js 脚本。
　　
　　<!-- Load the Really Simple　　　History framework --><script type="text/javascript"　　　　src="../../framework/dhtmlHistory.js"></script>
　　
　　DHTML History 应用也必须在和AJAX web页面相同的目录下包含一个叫blank.html 的指定文件，这个文件被Really Simple History框架绑定而且对IE来说是必需的。另一方面，RSH使用一个hidden iframe 来追踪和加入IE历史的改变，为了正确的执行功能，这个iframe需要指向一个真正的地址，不需要blank.html。
　　
　　RSH框架创建了一个叫dhtmlHistory 的全局对象，作为操作浏览器历史的入口。使用dhtmlHistory 的第一步需要在页面加载后初始化这个对象。
　　
　　window.onload = initialize;　　function initialize() {　// initialize the DHTML History　// framework　dhtmlHistory.initialize();
　　
　　然后，开发者使用dhtmlHistory.addListener()方法去订阅历史改变事件。这个方法获取一个javascript回调方法，当一个DHTML历史改变事件发生时他将收到2个自变量，新的页面地址，和任何可选的而且可以被关联到这个事件的历史数据。
　　
　　indow.onload = initialize;　　function initialize() {　// initialize the DHTML History　// framework　dhtmlHistory.initialize();　　// subscribe to DHTML history change　// events　dhtmlHistory.addListener(historyChange);
　　
　　historyChange()方法是简单易懂得，它是由一个用户导航到一个新地址后收到的新地址（newLocation）和一个关联到事件的可选的历史数据historyData 构成的。
　　
　　/** Our callback to receive history change　　 events. */function historyChange(newLocation,　　　　　　　　　　　　historyData) {　debug("A history change has occurred: "　　　　 "newLocation=" newLocation　　　　 ", historyData=" historyData,　　　　 true);}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有