AJAX 导航简介
01/29/2010
本文内容
Internet Explorer 8 引入了异步 JavaScript 和 XML (AJAX) 导航。 有些最终用户在启用 AJAX 的网站中无法通过“后退”和“前进”按钮进行导航,而且无法更新浏览历史记录,这些功能可帮助减少这种情况的发生。 只需使用简单的几行脚本,即可向网站添加 AJAX 导航,从而像“传统”导航一样平稳而无缝地导航启用了 AJAX 的内容。
本主题包含以下各部分:
简介
问题的示例
工作原理
示例代码
相关主题
简介
用户通过实现 AJAX 获得的最大好处之一(实际上,这也是 AJAX 存在的主要原因之一)是,可以更新网页内容,而无需导航到新网页。 不过在带来便利的同时,也存在一些使用户受到困扰的缺点。 例如,在启用大量 AJAX 的网页上,每次更新都不会更新地址栏。 接下来,也不会更新“旅行日志”(浏览历史记录)。
AJAX 导航更改了此行为,它允许用户向后和向前导航,而无需离开 AJAX 应用程序。 启用 AJAX 导航的网站将触发诸如地址栏之类的浏览器组件的更新,采用的方式是:设置 window. location. hash 值,然后引发针对网页中警报组件的事件,甚至在旅行日志中创建条目。
问题的示例
例如,以一个地图服务网站(如 Windows Live Search 地图)为例。 对于该应用程序中启用了 AJAX 的功能(如平移和缩放),地址栏和旅行日志都将无法更新。 对于习惯于在地址栏中更改新网页的用户或依赖浏览器的“后退”和“前进”按钮的用户而言,他们可能有时会对此过程感到不解。 虽然一些网站在通过 AJAX 更新内容时会通过导航隐藏的 iframe 来绕开此限制,但此技术会降低性能。
工作原理
为了启用 AJAX 导航,以 IE8 模式运行的 Internet Explorer 8 会像“传统”导航一样对待 window.location.hash 属性的更新。IE8 模式是默认兼容性模式;有关模式的更多信息,请参见定义文档兼容性(可能为英文网页)。 在更新 hash 属性时,将在地址栏、旅行日志和“后退”按钮中更新上一个文档 URL(可能来自上一个哈希段)。 同时,将引发新的 onhashchange 事件,并在用户离开网页前保存该哈希 URL 段。
在采用此新功能的启用了 AJAX 的网页上,当 AJAX 内容发生更改时,会像平常一样进行无缝导航,但用户可以像对待“传统”导航一样对 AJAX 导航执行后退和前进操作。
示例代码
以下示例演示了此新功能的一种用法。 在此示例中,将用 Microsoft Virtual Earth 地图控件的 onendzoom 事件设置 hash 属性。 换句话说,每当用户进行缩放操作时,都将更新地址栏和旅行日志,这样用户便能够使用“后退”和“前进”按钮在各个缩放级别间进行前后导航。
AJAX Mapvar oMap = null;
var iZoomLevel = 0;
function GetMap()
{
oMap = new VEMap('myMap');
oMap.LoadMap();
oMap.AttachEvent("onendzoom", ZoomHandler);
iZoomLevel = oMap.GetZoomLevel();
window.location.hash = iZoomLevel;
}
function ZoomHandler(e)
{
iZoomLevel = oMap.GetZoomLevel();
// The following declaration sets the hash property to a
// variable containing the URL fragment to be saved.
window.location.hash = iZoomLevel;
}
function HashChangeHandler()
{
var hash = window.location.hash;
var iNewZoomLevel = hash.substr(1);
if (iNewZoomLevel != iZoomLevel)
{
iZoomLevel = iNewZoomLevel;
oMap.SetZoomLevel(iNewZoomLevel);
}
}
style="overflow: scroll; height: 100%">
每当用户进行缩放操作时,都将更新地址栏中的段标识符,如下图所示。 在此网页上,这只是简单表示数字符号 (#) 后的整数将增大。
相关主题