【摘要】本文针对两种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元素中加载导航元素不是更简单一些吗？事实证明，对于此方法还要加一些防止误解的说明为好：
• IFRAME具有固定的高度和宽度。如果内容彼此超出，则内容将被剪掉或者IFRAME要加上滚动条。然而，被复制到一个在父页面中的DIV元素中的HTML标记其大小却总是保持自动调整大小。
• 当在一个IFRAME中时，在导航内容中的链接(一个元素)将装载IFRAME中的新页面，除非你把target="_parent"添加到每一个链接之后。
• 依附到导航元素的JavaScript事件处理器将在IFRAME的上下文中工作（如果还保留这个上下文的话）。如果你把导航内容移动主页面上，那么事件处理器能够存取在主页面中定义的函数和变量。
【另注】IFRAME极大地影响到其所开发的网站的搜索引擎优化问题。如今，大多数人的观点是尽可能不要在以推广为主要目标的网站开发中使用此技术。本人也持有同样观点。因此，这种方案宜慎重选用为好。
在此，回调函数contentLoaded首先检查XmlHttpRequest对象是否已经准备好（第一个if语句），并判断其完成状态(如果请求已完 成的话)。如果一切顺利，则从响应中提取HTML标记。接下来的编码即是从服务器返回的响应信息中提取我们所关心的内容。当然，提取HTML代码（除非你 使用XHTML，这种情况下，你可以使用新式的XMLDOM接口）的最容易的方法是，使用字符串处理函数来查找<body>和< /body>标志之间的文本。
与前面描述的基于IFRAME的方法相比，使用XmlHttpRequest对象具有下列优点：
• 代码更利索，并且不依赖于页面的上下文切换。
• XmlHttpRequest对象能够为我们提供检测和处理错误（通过它的readyState和status属性）功能。而使用IFRAME加载内容时，如果出现错误，则只能显示非常粗略的错误提示，这主要是因为这种技术缺乏对回调机制的支持。
• 开发人员既能够实现内容元素的平行加载(如在本节中所描述的)，也可以以顺序化方式加载页面内容以达到最为有效地利用带宽。
【另注】使用AJAX技术开发后的网站是否也不利于搜索引擎的优化（或支持）？对此观点，在这种技术刚刚推出时就被争论不休，以至于到现在仍无定论。本人 建议，如何你的网站以早期推广为主，则基于各种AJAX技术的内容宜少用为好。当然，如果你的网站已经发展相对成熟（推广相对成功；此时，搜索引擎自然会 找上门来），则适当利用AJAX技术自然会极大地提高用户体验感。
四、 小结
在本文中，我们强调基于web页面内容与包围该内容的可导航元素分离开来的观点来构建网页。因为，这种分离将导致更为集中地描述搜索引擎要搜索的页面内 容，而且也有助于减少用户使用低带宽存取的加载时间（因为我们是在可导航元素被下载之前把实际内容显示给用户的）。
本文试图通过一个简单的实现文章展示的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元素中加载导航元素不是更简单一些吗？事实证明，对于此方法还要加一些防止误解的说明为好：
• IFRAME具有固定的高度和宽度。如果内容彼此超出，则内容将被剪掉或者IFRAME要加上滚动条。然而，被复制到一个在父页面中的DIV元素中的HTML标记其大小却总是保持自动调整大小。
• 当在一个IFRAME中时，在导航内容中的链接(一个元素)将装载IFRAME中的新页面，除非你把target="_parent"添加到每一个链接之后。
• 依附到导航元素的JavaScript事件处理器将在IFRAME的上下文中工作（如果还保留这个上下文的话）。如果你把导航内容移动主页面上，那么事件处理器能够存取在主页面中定义的函数和变量。
【另注】IFRAME极大地影响到其所开发的网站的搜索引擎优化问题。如今，大多数人的观点是尽可能不要在以推广为主要目标的网站开发中使用此技术。本人也持有同样观点。因此，这种方案宜慎重选用为好。
在此，回调函数contentLoaded首先检查XmlHttpRequest对象是否已经准备好（第一个if语句），并判断其完成状态(如果请求已完 成的话)。如果一切顺利，则从响应中提取HTML标记。接下来的编码即是从服务器返回的响应信息中提取我们所关心的内容。当然，提取HTML代码（除非你 使用XHTML，这种情况下，你可以使用新式的XMLDOM接口）的最容易的方法是，使用字符串处理函数来查找<body>和< /body>标志之间的文本。
与前面描述的基于IFRAME的方法相比，使用XmlHttpRequest对象具有下列优点：
• 代码更利索，并且不依赖于页面的上下文切换。
• XmlHttpRequest对象能够为我们提供检测和处理错误（通过它的readyState和status属性）功能。而使用IFRAME加载内容时，如果出现错误，则只能显示非常粗略的错误提示，这主要是因为这种技术缺乏对回调机制的支持。
• 开发人员既能够实现内容元素的平行加载(如在本节中所描述的)，也可以以顺序化方式加载页面内容以达到最为有效地利用带宽。
【另注】使用AJAX技术开发后的网站是否也不利于搜索引擎的优化（或支持）？对此观点，在这种技术刚刚推出时就被争论不休，以至于到现在仍无定论。本人 建议，如何你的网站以早期推广为主，则基于各种AJAX技术的内容宜少用为好。当然，如果你的网站已经发展相对成熟（推广相对成功；此时，搜索引擎自然会 找上门来），则适当利用AJAX技术自然会极大地提高用户体验感。
四、 小结
在本文中，我们强调基于web页面内容与包围该内容的可导航元素分离开来的观点来构建网页。因为，这种分离将导致更为集中地描述搜索引擎要搜索的页面内 容，而且也有助于减少用户使用低带宽存取的加载时间（因为我们是在可导航元素被下载之前把实际内容显示给用户的）。
接下来，我们通过示例代码片断简要讨论了使用嵌入式框架(IFRAME)与使用新式的XmlHttpRequest对象两种方案来实现可导航元素的延迟装载。显然，各存在其优缺点；因此，在实际开发网站的过程中，还宜视具体情况来定夺。
本文转自朱先忠老师51CTO博客，原文链接：http://blog.51cto.com/zhuxianzhong/59892 ，如需转载请自行联系原作者
