【摘要】本文针对两种Web页面局部刷新技术—IFRAME与XmlHttpRequest，作正反面比较；并给出各自的应用示例。
本文试图通过一个简单的实现文章展示的Web页面布局的例子探讨当前两种流行的Web页面局部刷新技术—IFRAME与XmlHttpRequest。

    当前，许多设计良好的web站点往往都包含大量的与实际内容相联系的可导航信息。而用于实现导航的HTML标记往往极大地影响你的网站的搜索引擎评价指数，而且也极大地影响访问者页面下载体验感。基于本文中的实现思路，将会有助于你创建基于AJAX技术但又尽可能少地受搜索引擎影响的web页面。

一、 初步设计Web页面
    根据内容与导航相分离的原则，我们的第一步应该是，先在web页面上创建一些将插入可导航元素的占位符。对于每一个可导航元素的连续区域，必须创建一个具有唯一id的独立DIV元素；以便将来方便地在JavaScript代码中标识它。为了防止过度抖动现象，在创作页面期间，目录上方或右边的DIV元素的尺寸应该调整到非常接近你的可导航元素的实际大小；这样，当你使用希望的HTML代码来代替它们时内容就不会移动位置。为此，一种最巧妙的方法是把一个空的适当大小的DIV元素插入到该占位符处。
很简单。你仅需要从可导航DIV元素中删除内容并且插入一个空框，页眉以后将会出现在这里。下面是一段示例代码： 

<div id="header">
<div style="height: 100px; width: 100%"></div>
</div>
<div id="contentArticle">
<div id="firstCol">
文章内容放在此处……
</div>
<div id="secondCol" ></div>
</div>
<div id="footer"></div> 

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

    已经被从web页面中删除的可导航的元素必须被重新创建为独立的页面。你应该使用静态HTML文件来表达静态内容(这将允许缓冲内容，不管你使用什么样的web服务器)和在加载它们的web页面上创建显示基于动态元素的服务器端脚本。典型情况下，每一个web页面都应该有唯一一个文章标识符(例如可以使用URL中的“p=”参数)；因此，你需要创建一个能够接受文章标识符并创建右边的栏目的服务器端脚本。在大多数情况中，你可以重用创建嵌入的可导航元素的服务器端代码。
在重新设计这些web页面后，接下来，你就可以实现“AJAX”编程部分了。下面，我们将分别讨论基于嵌入式框架(IFRAME元素)和XmlHttpRequest对象两种方案实现这一过程的思路，并探讨其各自的优劣点。

二、 嵌入式框架—IFrame
    如果你在Web开发过程中尤其注重浏览器兼容性的问题，那么，你最好使用嵌入式框架。因为一些老式的浏览器支持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">
【技巧】加载到IFRAME中的内容的body部分应该总是有零尺寸的边距和填充空白；否则，当把它集成到父页面中时，它往往会产生轻微的移位。
在IFRAME的上下文中执行的contentLoaded函数将提取body部分相应的HTML内容并且把它传递到一个在父页面上下文中执行的函数，此函数将使用它来填充相应的占位符：
contentLoaded在IFRAME上下文的上下文中执行：
function contentLoaded(parentID) {
var myContent = document.body.innerHTML ;
parent.copyContent(parentID，myContent);
}
而copyContent却是在父web页面的上下文中执行：
function copyContent(id，content) {
try {
var placeholder = document.getElementById(id) ;
placeholder.innerHTML = content;
} catch (err) {
alert("无法把指定HTML内容复制到 "+id);
}
}
现在，细心的读者应该感到疑惑，为什么这么复杂？在IFRAME元素中加载导航元素不是更简单一些吗？事实证明，对于此方法还要加一些防止误解的说明为好：
• IFRAME具有固定的高度和宽度。如果内容彼此超出，则内容将被剪掉或者IFRAME要加上滚动条。然而，被复制到一个在父页面中的DIV元素中的HTML标记其大小却总是保持自动调整大小。
• 当在一个IFRAME中时，在导航内容中的链接(一个元素)将装载IFRAME中的新页面，除非你把target="_parent"添加到每一个链接之后。
• 依附到导航元素的JavaScript事件处理器将在IFRAME的上下文中工作（如果还保留这个上下文的话）。如果你把导航内容移动主页面上，那么事件处理器能够存取在主页面中定义的函数和变量。
【另注】IFRAME极大地影响到其所开发的网站的搜索引擎优化问题。如今，大多数人的观点是尽可能不要在以推广为主要目标的网站开发中使用此技术。本人也持有同样观点。因此，这种方案宜慎重选用为好。