AJAX 导航简介

  • 项目

Windows Internet Explorer 8 的新增功能

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>

每当用户进行缩放操作时，都将更新地址栏中的段标识符，如下图所示。 在此网页上，这只是简单表示数字符号 (#) 后的整数将增大。

显示段标识符的地址栏的图像。

相关主题