柠檬铺

本文将展示一个开源JavaScript 库，该脚本库给AJAX应用程序带来了书签和后退按钮支持。在学习完这个教程后，开发人员将能够获得对一个AJAX问题的解决方案（甚至连Google Maps和Gmail现在都不提供该解决方案）：一个强大的、可用的书签和后退前进功能，其操作行为如同其他的Web应用程序一样。    本文将阐述目前AJAX应用程序在使用书签和后退按钮方面所面临的严重问题；展示Really Simple History（RSH）库——一个可以解决以上问题的开源框架，并提供几个运行中的例子。
    本文所展示的这个框架的主要发明分为两部分。首先是一个隐藏的HTML表单，用于缓存大量短期会话的客户端信息；这种缓存功能为页面导航提供了强大的支 持。其次是超链接锚点和隐藏Iframe的组合，它们被嵌入后退和前进按钮，用来截获和记录浏览器的历史记录事件。以上两种技术都被包装在一个简单的JavaScript库中来简化开发。
    问题
    书签和后退按钮在传统的多页面Web应用程序中运行得非常好。当用户浏览web站点的时候，其浏览器的地址栏记录随新的URL而更新，这些记录可以被粘贴到电子邮件或者书签中供以后使用。后退和前进按钮也可以正常操作，使用户可以在访问过的页面中向前或向后翻动。
    但是AJAX应用程序却不一样，它们是运行在单个Web页面中的复杂程序。浏览器并不是为这类程序而构建的——这类Web应用程序已经过时，它们在每次鼠标点击的时候都需要重新刷新整个页面。
    在这种类似于Gmail的AJAX软件中，浏览器的地址栏在用户选择功能和改变程序状态的时候保持不变，这使得无法在特定的应用程序视图中使用书签。此 外，如果用户按下“后退”按钮来“撤销”上次的操作，他们会惊奇地发现，浏览器会完全离开该应用程序的Web页面。
    解决方案
    开源RSH框架可以解决这些问题，它为AJAX应用程序提供了书签和控制后退、前进按钮的功能。RSH目前还处于Beta阶段，可以在Firefox 1.0、Netscape 7+、Internet Explorer 6+等浏览器上运行；目前还不支持Safari（有关说明，请参见我的文章“Coding in Paradise: Safari: No DHTML History Possible”）。
    目前有几个AJAX框架对书签和历史记录问题有所帮助；但这些框架目前都有几个由于实现而造成的重大Bug（有关详细信息，请参见“Coding in Paradise: AJAX History Libraries”）。此外，很多AJAX历史记录框架被绑定到较大的库上，例如Backbase和Dojo；这些框架为AJAX应用程序引入了完全不 同的编程模型，迫使开发人员使用全新的方式来获得历史记录功能。
    相较之下，RSH是一个可以包含在现有AJAX系统中的简单模块。此外，RSH库采用了一些技术以避免产生影响其他历史记录框架的Bug。
    RSH框架由两个JavaScript类组成：DhtmlHistory和HistoryStorage。
    DhtmlHistory类为AJAX应用程序提供历史记录抽象。AJAX页面使用add（）方法添加历史记录事件到浏览器，指定新的地址和相关的历史记 录数据。DhtmlHistory类使用一个锚散列（如#new-location）更新浏览器当前的URL，同时把历史记录数据和该新URL关联。 AJAX应用程序将自己注册为历史记录的监听器，当用户使用后退和前进按钮进行浏览时，历史记录事件被触发，为浏览器提供新的位置以及与add（）调用一 起保存的任何历史记录数据。
    第二个类：HistoryStorage，允许开发人员保存任意数量的已存历史记录数据。在普通Web页面中，当用户导航到一个新的web站点时，浏览器 卸载并清除web页面上的所有应用程序和JavaScript状态；如果用户用后退按钮返回，所有的数据都丢失了。HistoryStorage类通过一 个包含简单散列表方法（例如put（）、get（）、hasKey（））的API来解决这类问题。上面的方法允许开发人员在用户离开Web页面之后保存任 意数量的数据；当用户按后退按钮重新返回时，历史记录数据可以通过HistoryStorage类来访问。在内部，我们通过使用隐藏的表单字段来实现此功 能，这是因为浏览器会自动保存表单字段中的值，甚至在用户离开Web页面的时候也如此。
    例子
    让我们先从一个简单的例子开始。
    首先，任何需要使用RSH框架的页面都必须包含dhtmlHistory.js脚本：
    <!-- Load the Really Simple
    History framework -->
    <script type="text/javascript"
    src="//framework/dhtmlHistory.js">
    </script>
    DHTML历史记录应用程序也必须在与AJAX Web页面相同的目录下包含blank.html文件；这个文件与RSH框架打包在一起，且对于Internet Explorer来说是必需的。顺便提一下，RSH使用一个隐藏Iframe来跟踪和添加Internet Explorer的历史记录变化；这个Iframe需要我们指定一个实际的文件位置才能正常工作，这就是blank.html。
    RSH框架创建了一个叫做dhtmlHistory的全局对象，这是操纵浏览器历史记录的入口点。使用dhtmlHistory的第一步是在Web页面加载完成后初始化dhtmlHistory对象：
    window.onload = initialize;
    function initialize（） {
    // initialize the DHTML History
    // framework
    dhtmlHistory.initialize（）；
    然后，开发人员使用dhtmlHistory.addListener（）方法订阅历史记录变化事件。这个方法带有一个JavaScript回调函数，当 DHTML历史记录变化事件发生时，该函数接收两个参数：新的页面位置以及任何可与该事件关联的可选历史记录数据：
    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页面上；第二个布尔型参数（在上述代码中值为true）控制是否在打印新的调试消息之前清除原有的全部消息。
    开发人员使用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地址栏中。例如，对地址为http://codinginparadise.org/my_ajax_app的AJAX Web页面调用dhtmlHistory.add（"helloworld", "Hello World Data"）之后，用户将会在其浏览器URL地址栏中看到如下的地址：
    http://codinginparadise.org/my_ajax_app#helloworld
    然后用户可以将这个页面做成书签，如果以后用到这个书签，AJAX应用程序可以读取#helloworld值，并用它来初始化Web页面。散列后面的地址值是RSH框架可以透明编码和解码的URL地址。
    HistoryData非常有用，它保存比简单的URL更为复杂的AJAX地址变化状态。这是一个可选值，可以是任何JavaScript类型，例如 Number、String或Object。使用该保存功能的一个例子是在一个富文本编辑器中保存所有文本（比如在用户离开当前页面时）。当用户再回到这 个地址时，浏览器将会将该对象返回给历史记录变化监听器。
    开发人员可以为historyData提供带有嵌套对象和表示复杂状态的数组的完整JavaScript对象；JSON （JavaScript Object Notation）所支持的在历史记录数据中都支持，包括简单数据类型和null类型。然而，DOM对象以及可用脚本编写的浏览器对象（如 XMLHttpRequest）不会被保存。请注意，historyData并不随书签一起保存，当浏览器关闭，浏览器缓存被清空，或者用户清除历史记录 的时候，它就会消失。
    使用dhtmlHistory的最后一步是isFirstLoad（）方法。在某些浏览器中，如果导航到一个Web页面，再跳转到另一个不同的页面，然后 按“后退”按钮返回到起始的站点，第一页将完全重新加载，并触发onload事件。这样会对想要在第一次加载页面时用某种方式对其进行初始化（而其后则不 使用这种方式重新加载该页面）的代码造成破坏。isFirstLoad（）方法可以区分是第一次加载一个Web页面还是用户导航到保存在历史记录中的 Web页面时触发的“假加载”事件。
    在示例代码中，我们只想在第一次加载页面的时候添加历史记录事件；如果用户在加载页面后按后退按钮返回该页面，我们就不想重新添加任何历史记录事件：
    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）；
    让我们继续使用historyStorage类。类似于dhtmlHistory，historyStorage通过一个叫historyStorage 的全局对象来公开它的功能。该对象有几个模拟散列的方法，比如put（keyName、keyValue）、get（keyName）和 hasKey（keyName）。键名称必须是字符串，同时键值可以是复杂的JavaScript对象甚至是XML格式的字符串。在我们的源代码例子中， 在第一次加载页面时，我们使用put（）将简单的XML放入historyStorage：
    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）；
    // cache some values in the history
    // storage
    debug（"Storing key 'fakeXML' into "
    + "history storage", false）；
    var fakeXML =
    '<?xml version="1.0" '
    +　　　'encoding="ISO-8859-1"?>'
    +　　　'<foobar>'
    +　　　　 '<foo-entry/>'
    +　　　'</foobar>';
    historyStorage.put（"fakeXML", fakeXML）；
    }
    然后，如果用户离开页面后又通过后退按钮返回该页面，我们可以使用get（）方法提取保存的值，或者使用hasKey（）方法检查该值是否存在。
    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"）；