AJAX 导航简介
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 属性。 换句话说,每当用户进行缩放操作时,都将更新地址栏和旅行日志,这样用户便能够使用“后退”和“前进”按钮在各个缩放级别间进行前后导航。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>AJAX Map</title> </head> <!-- Load the Virtual Earth map control. --> <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" type="text/javascript"></script> <script type="text/javascript"> var 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); } } </script> <!-- Attaching the event handler to a new onhashchange event allows the page to detect when the hash has changed and an AJAX navigation has occurred. --> <body onhashchange="HashChangeHandler();" onload="GetMap();" style="overflow: scroll; height: 100%"> <div id="myMap" style="position: relative; width: 500px; height: 500px; vertical-align: middle"> </div> </body> </html>
每当用户进行缩放操作时,都将更新地址栏中的段标识符,如下图所示。 在此网页上,这只是简单表示数字符号 (#) 后的整数将增大。