【聚杰网搜索引擎】基于AJAX技术提高搜索引擎排名
技巧
加载到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("Cannot copy HTML content into "+id); } } |
现在，细心的读者应该感到疑惑，为什么这么复杂？在IFRAME元素中加载导航元素不是更简单一些吗？事实证明，对于此方法还要加一些防止误解的说明为好：
· IFRAME具有固定的高度和宽度。如果内容彼此超出，则内容将被剪掉或者IFRAME要加上滚动条。然而，被复制到一个在父页面中的DIV元素中的HTML标记其大小却总是保持自动调整大小。
· 当在一个IFRAME中时，在导航内容中的链接(一个元素)将装载IFRAME中的新页面，除非你把target="_parent"添加到每一个链接之后。
· 依附到导航元素的JavaScript事件处理器将在IFRAME的上下文中工作（如果还保留这个上下文的话）。如果你把导航内容移动主页面上，那么事件处理器能够存取在主页面中定义的函数和变量。
四、 使用XmlHttpRequest
如果你的用户主要使用Internet Explorer的较新版本或基于Gecko的浏览器(Mozilla，Firefox，Netscape 7)，那么你可以决定使用XmlHttpRequest对象来把其它内容下载到你的web页面中。第一步非常类似于前面描述的方式。对于每一个占位符，你需要一个JavaScript函数调用来启动加载过程：
| ＜div id="header"＞ ＜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("cannot load "+url+" into "+id) ; } } |
