来自 Web前端 2020-04-29 17:43 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

AJAX:如何处理书签和后退按钮(1)

时间: 2019-09-08阅读: 150标签: 库快速开始

本文将展示一个开源JavaScript库,该脚本库给AJAX应用程序带来了书签和后退按钮支持。在学习完这个教程后,开发人员将能够获得对一个AJAX问题的解决方案甚至连Google Maps和Gmail现在都不提供该解决方案):一个强大的、可用的书签和后退前进功能,其操作行为如同其他的Web应用程序一样。

通过在页面上包含两件事来快速入门。首先是JavaScript:

本文将阐述目前AJAX应用程序在使用书签和后退按钮方面所面临的严重问题;展示Really Simple HistoryRSH)库——一个可以解决以上问题的开源框架,并提供几个运行中的例子。

script // TogetherJS configuration would go here, but we'll talk about that // later/scriptscript src="-min.js"/script

本文所展示的这个框架的主要发明分为两部分。首先是一个隐藏的HTML表单,用于缓存大量短期会话的客户端信息;这种缓存功能为页面导航提供了强大的支持。其次是超链接锚点和隐藏Iframe的组合,它们被嵌入后退和前进按钮,用来截获和记录浏览器的历史记录事件。以上两种技术都被包装在一个简单的JavaScript库中来简化开发。

你可以把它放在任何地方;就在之前/body。

问题

下一步是在您的网站上放置一个按钮,让用户启动TogetherJS:

书签和后退按钮在传统的多页面Web应用程序中运行得非常好。当用户浏览web站点的时候,其浏览器的地址栏记录随新的URL而更新,这些记录可以被粘贴到电子邮件或者书签中供以后使用。后退和前进按钮也可以正常操作,使用户可以在访问过的页面中向前或向后翻动。

button onclick="TogetherJS(this); return false;"Start TogetherJS/button

但是AJAX应用程序却不一样,它们是运行在单个Web页面中的复杂程序。浏览器并不是为这类程序而构建的——这类Web应用程序已经过时,它们在每次鼠标点击的时候都需要重新刷新整个页面。

或者如果你不喜欢onclick:

在这种类似于Gmail的AJAX软件中,浏览器的地址栏在用户选择功能和改变程序状态的时候保持不变,这使得无法在特定的应用程序视图中使用书签。此外,如果用户按下“后退”按钮来“撤销”上次的操作,他们会惊奇地发现,浏览器会完全离开该应用程序的Web页面。

button Start TogetherJS/buttonscript$(function () { $("#start-togetherjs").click(TogetherJS);});/script

解决方案

调用TogetherJS()将启动该工具,或者如果工具已经启动则停止该工具。

开源RSH框架可以解决这些问题,它为AJAX应用程序提供了书签和控制后退、前进按钮的功能。RSH目前还处于Beta阶段,可以在Firefox 1.0、Netscape 7+、Internet Explorer 6+等浏览器上运行;目前还不支持Safari有关说明,请参见我的文章“Coding in Paradise: Safari: No DHTML History Possible”)。

togetherjs-min.js即使您没有包含“Start TogetherJS”按钮,也应该将脚本放在站点的每个页面上。只要脚本在页面上,那么两个人就可以在该页面上进行协作。如果您在页面上忘记了它,那么如果有人在TogetherJS会话中访问该页面,他们将基本上“离线”,直到他们回到另一个页面,包括togetherjs-min.js

目前有几个AJAX框架对书签和历史记录问题有所帮助;但这些框架目前都有几个由于实现而造成的重大Bug有关详细信息,请参见“Coding in Paradise: AJAX History Libraries”)。此外,很多AJAX历史记录框架被绑定到较大的库上,例如Backbase和Dojo;这些框架为AJAX应用程序引入了完全不同的编程模型,迫使开发人员使用全新的方式来获得历史记录功能。

请注意,这togetherjs-min.js不是TogetherJS的整个代码,它只是一个相当小的文件,可以根据需要加载其余的TogetherJS。您可以将script任意位置放在页面上

相较之下,RSH是一个可以包含在现有AJAX系统中的简单模块。此外,RSH库采用了一些技术以避免产生影响其他历史记录框架的Bug。

  • 通常在/body被认为是放置脚本的最佳位置之前。

RSH框架由两个JavaScript类组成:DhtmlHistory和HistoryStorage。

如果您想深入研究代码,可能需要跳到配置TogetherJS。

DhtmlHistory类为AJAX应用程序提供历史记录抽象。AJAX页面使用add()方法添加历史记录事件到浏览器,指定新的地址和相关的历史记录数据。DhtmlHistory类使用一个锚散列如#new-location)更新浏览器当前的URL,同时把历史记录数据和该新URL关联。AJAX应用程序将自己注册为历史记录的监听器,当用户使用后退和前进按钮进行浏览时,历史记录事件被触发,为浏览器提供新的位置以及与add()调用一起保存的任何历史记录数据。

技术概述

第二个类:HistoryStorage,允许开发人员保存任意数量的已存历史记录数据。在普通Web页面中,当用户导航到一个新的web站点时,浏览器卸载并清除web页面上的所有应用程序和JavaScript状态;如果用户用后退按钮返回,所有的数据都丢失了。HistoryStorage类通过一个包含简单散列表方法例如put()、get()、hasKey())的API来解决这类问题。上面的方法允许开发人员在用户离开Web页面之后保存任意数量的数据;当用户按后退按钮重新返回时,历史记录数据可以通过HistoryStorage类来访问。在内部,我们通过使用隐藏的表单字段来实现此功能,这是因为浏览器会自动保存表单字段中的值,甚至在用户离开Web页面的时候也如此。

在本节中,我们将描述TogetherJS的一般工作方式,而不涉及任何代码。如果您已准备好使用TogetherJS并想知道如何操作,请跳到下一部分;如果您想了解它是如何工作的,或者它是否可以帮助您解决特定用例,那么本节适合您。

例子

TogetherJS的核心是集线器:这是一个会话中的每个人都连接到的服务器,它使用Web套接字向所有参与者发送消息。除了在参与者之间传递消息之外,此服务器不会重写消息或执行任何操作。

让我们先从一个简单的例子开始。

WebRTC可用于音频聊天,但不以其他方式使用。我们经常被问到这个问题,因为WebRTC提供的数据通道允许浏览器在没有服务器的情况下直接将数据发送到其他浏览器。不幸的是,你仍然需要一个服务器来建立连接(用于连接浏览器的连接字符串非常笨重),它只支持一对一连接,并且该支持仅限于某些浏览器和浏览器版本。建立连接也明显慢于Web套接字。但也许有一天。

首先,任何需要使用RSH框架的页面都必须包含dhtmlHistory.js脚本:

TogetherJS所做的一切都是基于浏览器之间传递的这些消息。它并不要求每个人都在同一个页面上,只需要会话中的每个人都知道要连接到哪个中心URL(URL本质上是会话名称)。人们可以在不同的站点上,但会话URL存储在sessionStorage中,这是一个域的本地(因为我们使用sessionStorage而不是localStorage,它是一个选项卡的本地)。我们没有实现任何技术来跨多个站点共享会话,但唯一的障碍是会话信息的本地存储。

功能构建在此消息传递系统之上。例如,当您移动鼠标时,cursor-update会发送一条消息,给出新的鼠标位置。与您看到消息不在同一页面但忽略它的其他客户端。

DHTML历史记录应用程序也必须在与AJAX Web页面相同的目录下包含blank.html文件;这个文件与RSH框架打包在一起,且对于Internet Explorer来说是必需的。顺便提一下,RSH使用一个y隐藏Iframe来跟踪和添加Internet Explorer的历史记录变化;这个Iframe需要我们指定一个实际的文件位置才能正常工作,这就是blank.html。

大多数功能都直接与DOM配合使用,因此不需要对代码或集成工作进行任何特殊检测。我们尽可能地将消息内容锚定到可能的最具体元素。当使用响应式网页设计时,同一URL上的不同客户端可能会看到不同的内容,但在某种程度上,他们会看到相同的元素,例如鼠标位置将是“正确的”。例如,在移动设备上,您可能会在页面上的不同位置放置一个按钮,但由于光标消息显示“鼠标位于名为#submit”的按钮上方,因此鼠标将位于等效位置。因此,TogetherJS也与分辨率无关

RSH框架创建了一个叫做dhtmlHistory的全局对象,这是操纵浏览器历史记录的入口点。使用dhtmlHistory的第一步是在Web页面加载完成后初始化dhtmlHistory对象:

我们支持表单状态同步,并且还支持文本字段的操作转换。同样,这全部分层在消息系统之上。

window.onload = initialize;

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

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:AJAX:如何处理书签和后退按钮(1)

关键词: