两种Web页面局部刷新技术的简单较量

    【摘要】本文针对两种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对象两种方案实现这一过程的思路，并探讨其各自的优劣点。

1