用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现在还不支持。 

　　目前存在的几个Ajax框架可以帮助我们做书签和发布历史，然而所有的框架都因为他们的实现而被几个重要的bug困扰。此外，许多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个自变量，新的页面地址，和任何可选的而且可以被关联到这个事件的历史数据。 
复制代码 代码如下:

window.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); 
} 

上面用到的debug()方法是例子代码中定义的一个工具函数，在完整的下载例子里有。debug()方法简单的在web页面上打一条消息，第2个Boolean变量，在代码里是true,控制一个新的debug消息打印前是否要清除以前存在的所有消息。 

　　一个开发者使用add()方法加入历史事件。加入一个历史事件包括根据历史的改变指定一个新的地址，就像"edit:SomePage"标记, 还提供一个事件发生时可选的会被存储到历史数据historyData值. 
复制代码 代码如下:

window.onload = initialize;  

function initialize() {  
  // initialize the DHTML History  
  // framework  
  dhtmlHistory.initialize();  

  // subscribe to DHTML history change  
  // events  
  dhtmlHistory.addListener(historyChange);  

  // if this is the first time we have  
  // loaded the page...  
  if (dhtmlHistory.isFirstLoad()) {  
    debug("Adding values to browser "  
          + "history", false);  
    // start adding history  
    dhtmlHistory.add("helloworld",   
                     "Hello World Data");  
    dhtmlHistory.add("foobar", 33);  
    dhtmlHistory.add("boobah", true);  

    var complexObject = new Object();  
    complexObject.value1 =   
                  "This is the first value";  
    complexObject.value2 =   
                  "This is the second data";  
    complexObject.value3 = new Array();  
    complexObject.value3[0] = "array 1";  
    complexObject.value3[1] = "array 2";  

    dhtmlHistory.add("complexObject",   
                     complexObject); 

在add()方法被调用后，新地址立刻被作为一个锚值显示在用户的浏览器的URL栏里。例如，一个AJAX web页面停留在http://codinginparadise.org/my_ajax_app，调用了dhtmlHistory.add("helloworld", "Hello World Data" 后，用户将在浏览器的URL栏里看到下面的地址 
复制代码 代码如下:

http://codinginparadise.org/my_ajax_app#helloworld

然后他们可以把这个页面做成书签，如果他们使用这个书签，你的AJAX应用可以读出#helloworld值然后使用她去初始化web页面。Hash里的地址值被Really Simple History 框架显式的编码和解码(URL encoded and d

上一个：AJAX客户端说明，XMLHttpRequest对象
下一个：AJAXCALL