四、使用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) ;
　}
} 注意

每一种主流浏览器家族都以一种不同的方式实现了XmlHttpRequest对象。处理这种兼容性问题的最容易的方法是，使用一个包装器库，例如Sarissa。我们在本文中示例中就使用了这种库。

回调函数contentLoaded负责检查XmlHttpRequest对象是否已经准备好及完成状态(如果请求已完成的话)，并且从响应中提取HTML标记。提取HTML代码(除非你使用XHTML，这种情况下，你可以使用XMLDOM接口)的最容易的方法是，使用字符串处理函数来查找＜body＞和＜/body＞标志之间的文本：

function contentLoaded(rq，url，id) {
　try {
　　if (rq.readyState != 4) { return; }
　　if (rq.status != 200) { alert("failed to load "+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("cannot load "+url+" into "+id) ;
　}
} 与前面描述的基于IFRAME的方法相比，使用XmlHttpRequest对象具有下列好处：

·代码更干净，并且不依赖于页面的上下文切换。

·XmlHttpRequest对象使你能够检测和处理错误（通过它的readyState和status属性）。而使用IFRAME加载内容时，如果出现错误，则只能显示非常粗略的错误提示，这主要是因为缺乏对回调函数的调用。

·你能够实现内容元素的平行装载(如在这一节中显示的)或顺序化装载请求以最小化带宽利用。

五、小结

在本文中，你学习了怎样实现把你的web页面内容与包围该内容的可导航元素分离开来。分离导致更为集中地描述搜索引擎要搜索的页面内容，并且也减少了用户使用低速互联网存取的加载时间（既然是在可导航元素被下载之前把实际内容显示给用户）。

当重新设计你的web页面来利用这种方案时，切记，一些基本格式的导航必须保留在页面上以便允许搜索引擎和决定禁止使用JavaScript的用户在你的网站的页面之间进行导航。

你可以使用嵌入式框架(IFRAME)或使用在最现代浏览器中实现的XmlHttpRequest对象来实现可导航元素的延迟装载。IFRAME方法能够为较老式的浏览器所支持；因此，它可能是你要考虑使用的方法-如果你非常关心向后兼容问题的话。另一方面，XmlHttpRequest对象的使用使你能够更为紧密地控制装载过程并能够检测和处理下载错误。