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

作者：IT168 朱先忠 2007-08-08

内容导航：

第1页：第1页 <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);
}
" >第2页：嵌入式框架—IFrame}
... <div style="height: 100px; width: 100%"></div>
<script>loadContent("header","/navigation/header.html")</script>
</div>

然而，loadContent函数是根本不同的：它创建了一个新的XmlHttpRequest对象，然后把一个事件处理器指派给它，并且以异步方式启动装载过程：

function loadContent(id，url) {
try {
var rq = new XMLHttpRequest() ;
rq.open("GET"， url， true);
rq.onreadystatechange = function() { contentLoaded(rq，url，id) }
rq.send(null);
} catch (err) {
alert("无法把"+url+"加载到 "+id) ;
}
}
【注意】每一种主流浏览器家族都以一种不同的方式实现了XmlHttpRequest对象。处理这种兼容性问题的最容易的方法是，使用一个现成的JavaScript包装器库，例如Sarissa（http://sourceforge.net/projects/sarissa），这是一个支持跨浏览器进行AJAX编程的免费的ECMAScript库）。

下面是相应于上面的异步回调函数的实现代码：
function contentLoaded(rq，url，id) {
try {
if (rq.readyState != 4) { return; }
if (rq.status != 200) { alert("无法加载"+url); return; }
var txt = rq.responseText ;
//查找<body>标记的开始位置
var startBodyTag = txt.indexOf("<body")
//查找<body>标记的结束，跳过任何属性
var endOfStartTag = txt.indexOf(">"，startBodyTag+1)
//查找</body>标记
var endBodyTag = txt.indexOf("</body")
if (endBodyTag == -1) { endBodyTag = txt.length ; }
//提取实际内容
var bodyContent = txt.substring(endOfStartTag+1，endBodyTag)
if (bodyContent) {
var placeholder = document.getElementById(id) ;
placeholder.innerHTML = bodyContent;
}
} catch (err) {
alert("无法把"+url+"加载到"+id) ;
}
" >第3页：使用XmlHttpRequest }
...

    【摘要】本文针对两种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

1 2 3

【内容导航】

第1页： 第1页 第2页：【技巧】加载到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}
...

第3页：使用XmlHttpRequest }
...

©版权所有。未经许可，不得转载。

[责任编辑：晓熊]

[an error occurred while processing this directive]