嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能。许多设计良好的web站点都包含大量的与实际内容相联系的可导航信息。用于导航的HTML标记能影响你的搜索引擎评价，而且能够改进访问者的页面下载体验感。在本文中，你会看到如何使用AJAX来创建更为集中的更快速加载的web页面。
一、 分离导航与内容
让我们使用一个例子作为开始。请考虑你现在阅读的文章，它有下列一些内容：
上面的"混合"很可能会影响搜索引擎索引你的数据的方式：
注意
即使你不使用站点地图，你也可以通过Google的站点地图用户接口来了解一下你的页面的页面排名情况。
添加到一个web页面的可导航元素还可能影响使用低速互联网存取的用户，而如果web页面不使用DIV元素（Informit使用之）而使用表格时更是如此。在这种情况中，在把它显示给用户之前，整个表格必须被加载到一些web浏览器中。
传统地，web设计者一般都使用框架集或通过构建整套的导航架构（广泛使用JavaScript代码）来实现导航与内容的分离。这两条途径都存在其缺点；因此，许多大型网站避免使用框架集就不足为奇了。
借助于在AJAX框架中使用的技术，你可以为这一问题提供一种方案：
在使用这种方法重新设计你的web页面之前，你需要考虑下列问题：
当你确定好应该把你的导航结构哪些部分依附到页面上以及哪些部分应该与之分开之后，你就可以开始下一步骤了。
二、 设计你的Web页面
实现分离内容和导航的第一步是，在web页面上创建将插入可导航元素的占位符。对于每一个可导航元素的连续区域，你应该创建一个具有唯一id的独立DIV元素；这样以来，以后你可以在你的JavaScript代码中标识它。为了防止过度晃动，在创作页面期间，目录上方或右边的DIV元素的尺寸应该调整到非常接近你的可导航元素的实际大小；这样，当你使用希望的HTML代码来代替它们时内容就不会移动位置。为此，一种最巧妙的方法是把一个空的适当大小的DIV元素插入到该占位符处。
对于Informit网站来说，其页面结构已经是良好设计的，且DIV元素已经非常到位，如图1所示。
你仅需要从可导航DIV元素中删除内容并且插入一个空框，页眉将会出现在这里(为了简短起见，我们将忽略把公司标识和版权信息嵌入到每一个页面中的讨论)。
如果你的web页面使用表格来实现所希望的页面布局，那么请不要把表格单元格重用作占位符；而把DIV元素放到表格单元格内比较好一些。
已经被从web页面中删除的可导航的元素必须被重新创建为独立的页面。你应该使用静态HTML文件来表达静态内容(这将允许缓冲内容，不管你使用什么样的web服务器)和在加载它们的web页面上创建显示基于动态元素的服务器端脚本。对于Informit来说，每一个web页面都有唯一一个文章标识符(在URL中的"p="参数)；因此，你需要创建一个能够接受文章标识符并创建右边的栏目的服务器端脚本。在大多数情况中，你可以重用创建嵌入的可导航元素的服务器端代码。
在重新设计这些web页面后，接下来，你就可以实现本方案中的AJAX部分了。与通常一样，你可以使用嵌入式框架(IFRAME元素)工作，也可以选用一个XmlHttpRequest对象。
三、 嵌入式框架
如果你关心浏览器兼容性的话，你应该使用嵌入式框架。一些老式的浏览器支持IFRAME元素，但不支持XmlHttpRequest对象。当然，使用这种方式还有如下一些理由：
为此，我们可以把一个空IFRAME插入到每一个DIV容器中，并且在每一个IFRAME后添加一个简短的JavaScript语句
然而，还没有一种机制来通知请求页面所希望的内容已经被加载到占位符IFRAME中。因此，被装载的内容必须通知父页面(经由一个JavaScript调用)可以使用该内容了。实现这一操作的最好时机是，在页面加载完成以后。因此，在IFRAME内容中的BODY标志应该包含一个onLoad事件:
在IFRAME的上下文中执行的contentLoaded函数将提取body部分相应的HTML内容并且把它传递到一个在父页面上下文中执行的函数，此函数将使用它来填充相应的占位符：
现在，细心的读者应该感到疑惑，为什么这么复杂？在IFRAME元素中加载导航元素不是更简单一些吗？事实证明，对于此方法还要加一些防止误解的说明为好：
