History API, hashchange, iframe
唯一 URL 模式
URL 是 Web 的基础。用户可以将中意的 URL 保存下来以供将来参考、可以按照 URL 所指开始新的内容体验,此外还可以使用 URL 回到先前的状态。在 AJAX 和 SPI 模型中,应用程序可以在单个 URL 中完成许多任务。这将使 Web 体验的核心支柱面临彻底的改变,即:应用程序的离散状态是由不同的 URL 来标识的。
浏览器会在用户浏览时构建其各自的 URL 缓存。但如果使用 AJAX,许多操作都不通过浏览器,因此不会被缓存到访问过的 URL 列表中(在此列表中可驱动“后退”和“前进”菜单)。另一方面,客户端浏览器不会提供将 URL 添加到列表中的 JavaScript 代码编程模型。在现有列表中,浏览器对象模型只会提供向前和向后的导航方法。
“唯一 URL”模式为每个重要的应用程序状态都分配一个唯一的、含义鲜明的 URL。例如,如果用户在 AJAX 页面中通过单击来编辑某个值,则新 URL 会被添加到浏览器缓存中,即使此操作是通过 XMLHttpRequest 在同一页面中执行的。
可使用以下 JavaScript 来更改 URL 而无需重新加载页面:
window.location.hash = stateInfo;
此代码的作用是将以 # 作为前缀的片段添加到 URL 中,如下所示:
http://www.contoso.com/shopping.aspx#edit-1234
使用此模式时,URL 实际上是在您启动任何给定的 AJAX 操作时发生改变的,因此可以通过浏览器来跟踪应用程序状态的变化。
但是,要执行的操作远不止捕获 URL 这样简单。如果浏览器被定向到基于哈希值的 URL,它首先会加载主 URL,然后再查找具有此哈希名称的页面段。在 AJAX 上下文中,哈希名称并不指向实际的页面段,而是指向代表当前状态的特定于应用程序的信息。例如,edit-1234 可能表示您正在编辑的项目其 ID 是 1234。实际格式完全取决于您。
如果浏览器找不到适当的段,则它将忽略 URL 哈希值。这样,用户会加载该页面,但可能不是以预期的应用程序状态。此外还需要另一个技巧。您应截取页面的 onload 事件、分析 URL、提取哈希值并运行将页面置于期望状态所需的 JavaScript 代码,如下所示:
window.onload = function() { checkAndParseURL(); } checkAndParseURL() { var state = window.location.hash; restorePage(state); }
在 ASP.NET 3.5 扩展所提供的历史记录支持中也采用了类似的方法。您可以访问 quickstarts.asp.net/3-5-extensions/ajax 了解更多相关信息。ASP.NET 3.5 扩展中的解决方案已完全集成到此框架中。它将以添加到 ScriptManager 控件的新属性和事件的形式显示出来。但最终,它将是“唯一 URL”模式的具体实现。
另外还应注意,基于 URL 哈希值的技巧对 Internet Explorer® 无效,因为 Internet Explorer 无法识别出 URL 哈希值的变化,除非是内嵌帧。实际上,所有浏览器在处理段导航方面所表现出的行为特点都是互不相同的(有关本主题的详细信息,请参阅 weblogs.asp.net/bleroy/archive/2007/09/07/how-to-build-a-cross-browser-history-management-system.aspx)。ASP.NET 3.5 扩展中的解决方案考虑到了此差别,这使得它成为真正的跨浏览器技巧。