你仅需要从可导航DIV元素中删除内容并且插入一个空框，页眉将会出现在这里(为了简短起见，我们将忽略把公司标识和版权信息嵌入到每一个页面中的讨论)。下面是相应的代码：

＜div id="header"＞ ＜div style="height: 100px; width: 100%"＞＜/div＞ ＜/div＞ ＜div id="contentArticle"＞ ＜div id="firstCol"＞ ... article content .... ＜/div＞ ＜div id="secondCol" ＞＜/div＞ ＜/div＞ ＜div id="footer"＞＜/div＞

　　注意

　　如果你的web页面使用表格来实现所希望的页面布局，那么请不要把表格单元格重用作占位符；而把DIV元素放到表格单元格内比较好一些。

　　已经被从web页面中删除的可导航的元素必须被重新创建为独立的页面。你应该使用静态HTML文件来表达静态内容(这将允许缓冲内容，不管你使用什么样的web服务器)和在加载它们的web页面上创建显示基于动态元素的服务器端脚本。对于Informit来说，每一个web页面都有唯一一个文章标识符 (在URL中的"p="参数)；因此，你需要创建一个能够接受文章标识符并创建右边的栏目的服务器端脚本。在大多数情况中，你可以重用创建嵌入的可导航元素的服务器端代码。

　　在重新设计这些web页面后，接下来，你就可以实现本方案中的AJAX部分了。与通常一样，你可以使用嵌入式框架(IFRAME元素)工作，也可以选用一个XmlHttpRequest对象。

三、 嵌入式框架

　　如果你关心浏览器兼容性的话，你应该使用嵌入式框架。一些老式的浏览器支持IFRAME元素，但不支持XmlHttpRequest对象。当然，使用这种方式还有如下一些理由：

　　· 被加载到一个IFRAME中的内容在装载的过程中被显示于浏览器中，这向终端用户显示一个可视化进程。

　　· 页面缓冲总是使用加载到一个IFRAME中的内容工作。一些版本的Opera还不能较好地使用XmlHttpRequest对象处理经缓冲的响应。

　　为此，我们可以把一个空IFRAME插入到每一个DIV容器中，并且在每一个IFRAME后添加一个简短的JavaScript语句，如下所示：

＜div id="header"＞ ＜div style="height: 100px; width: 100%"＞＜/div＞ ＜iframe id="header_iframe" style="height: 0px;"＞＜/iframe＞ ＜script＞loadIframe("header"，"/navigation/header.html")＜/script＞ ＜/div＞

　　IFRAME的id应该等于以_iframe为后缀的占位符的id。loadIframe函数使用了两个参数：占位符的id和要加载到其中的URL。

　　技巧

　　如果你想在下载过程中使得IFRAME内容可见，那么你应该使用一个适当大小的IFRAME元素来替换在占位符内的空的DIV框。然而，如果你想使IFRAME保持不可见，那么你应该使用style属性来把它的高度设置为０以克服一些浏览器中的错误。

　　启动装载过程的loadIframe函数是很简单的：

function loadIframe(id，url) { 　try { 　　var iframeObj = document.getElementById(id+"_iframe"); 　　iframeObj.src = url ; 　} catch (err) { 　　alert("cannot load "+url+" into "+id) ; 　} }

　　注意

　　本文中所有示例代码都假定，浏览器兼容文档对象模型(DOM)。

　　然而，还没有一种机制来通知请求页面所希望的内容已经被加载到占位符IFRAME中。因此，被装载的内容必须通知父页面(经由一个JavaScript 调用)可以使用该内容了。实现这一操作的最好时机是，在页面加载完成以后。因此，在IFRAME内容中的BODY标志应该包含一个onLoad事件:

＜body onload="contentLoaded('header')" style="margin: 0px 0px; padding: 0px 0px"＞