用Ajax来控制书签和回退按钮的代码

这篇文章介绍了一个使用开源JavaScript库解决Ajax应用中的书签和回退按钮问题的指南。在这个指南中，开发者将了解如何通过利用一个简单的历史库——Really Simple History，实现Ajax应用的书签功能和回退前进按钮的正常操作。

文章首先指出了Ajax应用面临的问题：在传统的多页面web应用中，书签和回退前进按钮可以顺利运行，而Ajax应用则是在单一web页面上进行操作的成熟程序。浏览器并非专为Ajax设计，在Ajax应用中，书签和回退前进按钮的使用常常会出现问题。特别是在像Gmail这样的Ajax软件中，浏览器地址栏的变化并不能像传统web应用那样被书签保存，用户按下回退按钮也可能会完全离开原来的应用页面。

为解决这些问题，Really Simple History（RSH）框架应运而生。这个开源框架帮助Ajax应用实现了书签和控制前进后退按钮的功能。尽管RSH目前还处于beta阶段，但在Firefox 1.0、Netscape 7及以上和IE 6及以上版本中运行良好。它采用了一种简单的模型，可以轻松地集成到现有的Ajax系统中。与其他Ajax历史框架相比，RSH避免了一些常见的bug，并且不依赖于其他大型库，如Backbase和Dojo。开发者无需改变其编程模型即可获得浏览器的历史相关功能。

RSH框架由两个主要的JavaScript类库组成：DhtmlHistory和HistoryStorage。DhtmlHistory类提供了一个提取历史功能给Ajax应用。当用户在Ajax页面上导航时，它会向浏览器添加历史事件，并指定新的地址和关联数据。然后，当用户使用前进和后退按钮时，这些历史事件会被触发，为浏览器提供新的地址并保留数据。另一方面，HistoryStorage类允许开发者存储任意大小的历史数据。它通过一个隐藏的表单域利用浏览器的特性，即使在用户离开web页面时也能自动保存表单域值。

通过示例代码，文章展示了如何使用Really Simple History框架。任何想要使用此框架的页面都需要包含dhtmlHistory.js脚本。这个脚本提供了使用RSH框架所需的所有功能和工具。开发者可以通过简单的API调用实现Ajax应用的书签功能和正常的回退前进按钮操作，从而提升用户体验。

这篇文章为开发者提供了一个使用开源JavaScript库解决Ajax应用中书签和回退按钮问题的实用指南。通过利用Really Simple History框架，开发者可以轻松实现这些功能，提升用户体验并增强应用的健壮性。在网页开发的旅程中，我们遇到了一个强大的工具——Really Simple History（RSH）框架，它为我们的DHTML History应用提供了强大的支持。当我们引入这个框架时，必须在AJAX web页面的相同目录下包含一个特定的文件：blank.html。对于Internet Explorer，这个文件是必需的，因为RSH框架需要它来正常工作。

神奇的RSH框架通过创建一个名为dhtmlHistory的全局对象，为我们操作浏览器历史提供了入口。在页面加载完毕后，我们需要初始化这个对象。下面是如何进行的：

```javascript

window.onload = initialize;

function initialize() {

// 启动DHTML历史框架

dhtmlHistoryitialize();

// 订阅DHTML历史变更事件

dhtmlHistory.addListener(historyChange);

}

```

当我们的用户导航到一个新地址时，historyChange方法将接收到新的页面地址以及任何与事件关联的历史数据。这个方法是我们回调函数的核心，用于接收历史变更事件。

让我们深入理解一下historyChange函数：

```javascript

function historyChange(newLocation, historyData) {

debug("发生历史变更：" + "newLocation=" + newLocation + ", historyData=" + historyData, true);

}

```

这里的debug()方法是一个工具函数，用于在web页面上显示消息。当我们想查看新的debug消息时，我们可以通过设置第二个参数（在这个例子中是true）来控制是否要清除之前存在的所有消息。

作为开发者，我们还可以使用add()方法加入历史事件。通过这个方法，我们可以追踪用户的导航路径，了解他们访问了哪些页面，以及他们在何时进行了跳转。这对于分析用户行为、优化网站结构或实现复杂的单页应用非常有用。

随着技术的不断进步，前端开发领域对于用户体验的优化愈发重视。其中，历史记录管理成为了一个重要的环节。今天，我们将介绍一款名为Really Simple History的框架，它通过改变浏览器的历史地址来实现复杂状态的保存与恢复。

当页面加载完成时，我们调用initialize函数来启动DHTML History框架。通过监听DHTML的历史变化事件，我们能够实时了解用户的浏览轨迹。特别是在页面首次加载时，我们会向浏览器的历史记录中添加一些初始值。

想象一下，我们正在开发一个AJAX应用，用户浏览的URL地址是 World Data"作为新的历史地址和值，浏览器的URL栏将立刻显示这个新的地址。这意味着用户可以保存这个页面作为书签。当他们通过书签再次访问时，我们的AJAX应用可以读取helloworld等哈希值并据此初始化页面。

这种方式的实现背后有着一套复杂的编码和解码机制。Really Simple History框架会显式地对URL进行编码和解码，以解决字符编码问题。这样做可以确保地址值在浏览器中稳定存在，不受字符编码的干扰。

对于那些需要保存更复杂状态的情况，historyData应运而生。它是一个可选的值，可以是任何JavaScript类型，如Number、String或Object。以一个多文本编辑器为例，我们可以使用historyData保存所有文本内容。当用户离开这个页面并返回时，浏览器会将这个对象返回给历史变化侦听器。

开发者可以构建一个完整的historyData JavaScript对象，使用嵌套的对象和数组来描述复杂的状态。只要符合JSON（JavaScript Object Notation）规范，任何数据类型都是允许的，包括简单数据类型和null。请注意DOM对象和如XMLHttpRequest这样的浏览器可编程对象是不会被保存的。historyData并不会被书签持久化。如果浏览器关闭、缓存被清空或用户清除历史记录，这些数据将会消失。

值得一提的是，使用dhtmlHistory时需要注意isFirstLoad()方法的使用场景。当您导航到一个web页面，然后跳转到另一个页面，再按下后退按钮返回到起始页面时，该页面会完全重新加载并触发onload事件。这意味着在初次加载时，我们可以利用这个机会向历史记录中添加特定的值和状态。

Really Simple History框架为前端开发者提供了一种强大的工具来管理浏览器的历史记录。通过巧妙利用浏览器的历史机制，我们可以为用户提供更丰富、更流畅的体验，同时确保应用的稳定性和可扩展性。当代码首次加载页面时，它渴望以某种方式初始化页面，却不希望在此过程中刷新页面。为此，我们引入了`isFirstLoad()`方法。这个方法使我们能够区分页面是首次加载，还是用户通过浏览器历史记录返回。这在触发加载事件时显得尤为重要。

在示例代码中，我们仅在页面首次加载时添加历史记录。如果用户返回页面，我们并不想重新添加任何历史记录。当`window.onload`事件触发时，会调用`initialize`函数。

在`initialize`函数中，我们首先初始化DHTML历史框架，然后订阅DHTML历史更改事件。接下来，我们检查是否这是第一次加载页面。如果是，我们将开始添加历史记录。例如，我们可能会添加像"helloworld"、"foobar"、"boobah"这样的历史条目，并伴随相应的值或对象。

让我们继续`historyStorage`类。与`dhtmlHistory`类似，`historyStorage`通过名为`historyStorage`的全局单一对象展现其功能。这个对象的方法仿佛是一个哈希表，如`put(keyName, keyValue)`、`get(keyName)`和`hasKey(keyName)`。键名必须是字符串，而键值可以是复杂的JavaScript对象甚至是XML格式的字符串。

在我们的源代码示例中，当页面首次加载时，我们会将简单的XML数据通过`put()`方法存入`historyStorage`。这样的设计使得我们可以轻松地保存和检索页面状态，无论用户何时返回页面，都可以恢复先前的状态。通过使用键值对存储数据，我们可以轻松地管理和组织这些信息，以便在需要时快速访问。这种机制对于创建丰富的、交互式的网页应用来说非常有用。

`isFirstLoad()`方法和`historyStorage`类的结合使用，提供了一种优雅的方式来处理页面的初始化过程，确保只有在第一次加载页面时添加历史记录，同时允许我们存储和恢复页面的状态信息。这使得我们的网页应用更加用户友好，提供了更好的用户体验。当页面完全加载时，我们的初始化程序开始运行。这是一个名为 `initialize` 的函数，它的主要任务是启动DHTML历史框架并对其进行配置。

DHTML历史，这个强大的工具，允许我们在网页上保存和追踪用户的浏览历程。一旦页面加载完成，我们首先调用 `dhtmlHistoryitialize()` 来启动框架。随后，我们订阅历史变更事件，确保每当历史记录发生变化时，我们都能得到通知。

如果这是用户首次加载此页面，我们会进入一系列的操作。我们通过 `debug` 函数输出信息，告知用户我们正在向浏览器历史中添加值。接着，我们添加了一些简单的历史记录，如 "helloworld"、"foobar"、"boobah"，并附带一些数值和布尔值。我们还创建了一个名为 `plexObject` 的对象，并添加了一些复杂的数据，包括字符串、数组等，然后将其存入历史记录中。

不仅如此，我们还将一些重要的值缓存到历史存储中。这里有一个示例，我们将一段XML数据存储在名为 'fakeXML' 的键下。这样做的目的是，如果用户在未来的某个时刻返回此页面，我们可以轻松地获取之前存储的数据。

当用户在浏览过程中离开此页面，并稍后通过返回按钮返回时，我们可以利用 `get()` 方法提取之前存储的值。我们还可以利用 `hasKey()` 方法检查某个键是否存在于历史存储中。

我们的代码像一部精密的机器，静默地在后台工作，确保用户的浏览体验流畅且富有互动性。无论是初次访问还是返回页面，都能迅速获取所需信息，提供无缝的用户体验。这就是DHTML历史的魅力所在，让网页应用更加智能和响应迅速。当页面完全加载时，我们的故事开始了。一个名为 `initialize` 的函数被唤醒，这是我们的启动程序。它的首要任务是初始化 DHTML 历史框架，并为其变化事件添加监听器。我们知道，当页面第一次加载时，历史记录还未开始，因此我们将启动历史记录的添加过程。

想象一下，我们正在向浏览器的历史记录中添加一系列的事件和数据。这些事件和数据包括简单的字符串如 "helloworld" 和 "foobar"，还有复杂的数据结构如包含多个元素的数组和包含多个属性的对象。我们的历史记录不仅保存了简单的数据点，还有用于调试的信息。通过这种方式，我们可以轻松地跟踪和追溯我们的应用程序的活动。我们还将一个假定的 XML 数据保存到了历史存储中，方便后续检索和调试。

值得注意的是，我们的数据只在页面历史中使用，也就是说，只有在用户浏览页面并使用前进或后退按钮时，这些数据才被保留。如果浏览器被关闭或用户打开新窗口并进入我们的ajax应用，这些数据将不可用。这是因为这些数据仅在浏览器会话期间存在，一旦浏览器关闭或缓存被清空，这些数据就会消失。对于那些需要长期持久化的数据，我们需要寻找其他的解决方案，比如 Ajax MAssive Storage System (AMASS)。

O'Reilly Mail：一个Ajax邮件应用的示例

在我们的第二个示例中，将呈现一个模拟的Ajax邮件应用——O'Reilly Mail，它的设计灵感来源于我们熟知的Gmail。O'Reilly Mail不仅向我们展示了如何使用dhtmlHistory类来控制浏览器的历史记录，还告诉我们怎样利用historyStorage对象来缓存历史数据。

O'Reilly Mail的用户界面设计简洁直观，分为两部分。在页面的左侧，是一个包含不同邮件文件夹和选项的菜单，如收件箱、草稿箱等。当用户从菜单中选择一个选项，比如“收件箱”，页面的右侧将实时更新以显示所选内容。在实际应用中，我们会远程获取并显示所选的内容，但在O'Reilly Mail中，我们仅通过简单的模拟来展示这一过程。

借助Really Simple History框架，O'Reilly Mail能够向浏览器历史记录中添加菜单变化，并更新地址栏。这意味着用户可以利用浏览器的回退和前进按钮来操作这个应用，还可以对应用的菜单变化进行书签。

现在，让我们重点关注一个特别的菜单项——地址簿，来看看historyStorage如何被使用。地址簿是一个包含联系人姓名、电子邮件和地址的JavaScript数组。在一个真实的应用中，我们会从远程服务器获取这些信息。但在O'Reilly Mail中，我们在本地创建这个数组，添加一些模拟的联系人信息，然后将其存储在historyStorage对象中。

当用户离开这个网页后再次返回时，O'Reilly Mail会从缓存中重新获取地址簿，而不是被迫访问远程服务器。这种缓存机制极大地提高了用户体验，使得应用更加流畅。

初始化程序在网页加载完成后运行。在该函数中，我们首先初始化DHTML历史框架，然后添加一个历史变化监听器。接着，我们检查地址簿是否已经检索过。如果没有，我们会模拟创建一个地址簿并将其存储在历史存储中。如果地址簿已经存在，我们将从历史存储中检索它。

处理历史变化的代码同样简洁高效。每当用户点击浏览器的回退或前进按钮时，都会触发handleHistoryChange函数。在O'Reilly Mail中，这意味着无论用户如何操作，地址簿信息都能被迅速而准确地重新加载和显示。

O'Reilly Mail是一个展示Ajax邮件应用基本功能的优秀示例，它向我们展示了如何利用浏览器历史记录和缓存机制来创建流畅、用户友好的Web应用。我们欣然接纳了新的地址信息，将其命名为“newLocation”，并巧妙地运用这一信息更新了我们的用户界面，以改变状态。这一切的实现，得益于我们借助了一款名为“displayLocation”的O'Reilly Mail工具方法。

在这个智能化、信息化的时代，每一个细节的优化都关乎用户体验的提升。我们深知地址信息对于用户的重要性，对于新地址的接纳与利用，我们表现出了高度的专业性和灵活性。这个新的“newLocation”，就像一把解锁未来界面的钥匙，带领我们迈向更加便捷、个性化的服务体验。

此刻，“newLocation”不再仅仅是一个简单的地址标签，而是承载着用户需求和期望的重要信息。我们以用户为中心，将这个新地址信息融入到我们的用户接口中，使其成为了改变状态、提升用户体验的有力工具。每一次地址的更新，都是我们对用户需求的理解和精准把握。

在这个过程中，“displayLocation”这款O'Reilly Mail工具方法发挥出了巨大的作用。它如同一座桥梁，连接着我们的应用界面与用户的需求。通过它，我们能够轻松地将新地址信息融入到我们的系统中，实现状态的实时更新。无论是地理位置的显示，还是个性化服务的提供，都得益于这款工具方法的强大功能。

我们坚信，用户体验的改善是无止境的。我们将继续和创新，将更多的用户需求和反馈融入到我们的产品中。而“newLocation”和“displayLocation”将会成为我们不断进步的重要推动力。让我们一起期待，这个新的地址信息能够带给我们更多惊喜和可能，让我们的用户体验更上一层楼！处理历史变化事件——为导航和内容展示而设计

在我们这款创新的web应用中，当用户浏览不同的板块时，历史变化事件发挥着重要的作用。这就是我们的“handleHistoryChange”函数大显身手的地方。每当用户切换到新的位置时，这个函数就会被触发。

让我们深入了解这个函数的工作原理：

检查用户是否提供了新的位置信息。如果没有，那么我们就假定他们正在查看收件箱，这是我们的默认设置。这是通过判断“newLocation”变量的值实现的。如果它是空的，我们就将其设定为“section:inbox”。

接下来，我们从新的位置信息中提取出要展示的板块。通过替换字符串中的“section:”前缀，我们可以获取到用户正在浏览的具体板块名称。之后，我们调用“displayLocation”函数来更新浏览器显示的内容。

我们的第二个重要函数是“displayLocation”，它负责在右侧的内容区域显示给定的位置信息。它首先获取到被选中的菜单元素，然后清除旧的选中菜单项。接着，使新的选中菜单项在用户界面中以不同的方式出现。然后，根据新的位置信息在屏幕的右侧显示新的板块内容。如果新的位置是“addressbook”，那么就会显示地址簿信息。如果之前没有缓存地址簿数据，那么会从历史存储中获取。如果无法获取板块内容（sectionData），那么就会使用假的数据来填充内容区域。在实际的应用中，我们会远程获取这部分内容。

我们的应用不仅仅是一个静态的展示，它还具备丰富的交互功能。你可以通过点击不同的菜单项来浏览不同的板块，查看收件箱、地址簿等。当你切换板块时，历史变化事件会自动更新，使你的浏览体验更加流畅。我们的应用还具备丰富的样式和布局选项，可以根据你的需求进行个性化设置。你可以通过修改CSS样式来改变应用的外观和布局。这是一个功能丰富、易于使用的web应用，可以帮助你更好地管理邮件和联系人信息。你可以通过演示版或下载源代码来了解更多关于这个应用的信息和功能。无论你是开发者还是普通用户，都可以在我们的应用中体验到便捷和高效的操作体验。结语

通过这篇文章的指导，你已经学会了使用Really Simple History API来增强你的AJAX应用的响应能力，使其能够与书签以及前进和回退按钮完美兼容。你也获取了创建自己应用的代码素材。我真诚地期待你能够利用这些关于书签和历史支持的知识，完成你的AJAX创新之旅。

这篇文章的版权由Techtarget授权Matrix发布。如果你需要转载本文，请尊重原作者Brad Neuberg的劳动成果。以下是文章相关的资源和链接：

Java开发者社区Matrix-onjava：你可以在此社区下载本文章的所有示例代码。还有更多示例供你和学习。

Really Simple History框架：你可以通过下载projects/dhtml_history/latest.zip获取Really Simple History框架。

O'Reilly Mail的演示或源代码下载：你还可以下载O'Reilly Mail的源代码，其中的完整示例还包括更多实例供你实践。

Coding in Paradise博客：作者在此博客上分享了AJAX、DHTML和Java技术，以及协同技术如WikiWikis的发展。如果你对这些话题感兴趣，不妨前去一竟。

在此，我要特别感谢所有审阅这篇文章的人们，你们的支持和建议使这篇文章更加完善。特别感谢Really Simple History框架的贡献者们：Michael Eakes、Jeremy Sevareid、David Barrett、Brendon Wilson、Dylan Parker等，你们的努力和贡献对本文至关重要。在此对你们表示由衷的感谢！愿每一位阅读本文的朋友都能从中收获知识，并应用到自己的项目中。再次感谢！让我们一起创造更好的未来！最后感谢cambrian系统为渲染提供强有力的支持！请通过点击相关链接查看更多详细信息，如果你需要进一步的帮助或有任何疑问，欢迎联系作者Brad Neuberg或参与社区讨论。让我们共同学习进步！