最近评论
正在载入评论列表...
3.1.9 附加信息链接实例
当在线阅读一篇文章时，通常需要提供一个与进一步阅读该主题的附加信息链接。这里的关键问题是：主要内容是什么？显然文章内容是页面中的主要内容，因此在最初载入该页面时必须先下载这部分信息。而附加信息链接不太重要，因此应该后一步载入。这个例子将说明如何创建这种解决方案。
首先，要对一个显示文章的页面进行布局。对于本例而言，下面是一个很简单的布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Article Example</title>
<script type="text/javascript" src="zxml.js"></script>
<script type="text/javascript" src="Article.js"></script>
<link rel="stylesheet" type="text/css" href="Article.css" />
</head>
<body>
<h1>Article Title</h1>
<div id="divAdditionalLinks"></div>
<div id="divPage1">
<!-- article content here -->
</div>
</body>
</html>
这段HTML代码最重要的部分是ID为divAdditionalLinks的<div/>元素。它是用来放置用于下载该文章的附加链接的容器。默认情况下，其格式是右对齐、不可见：
#divAdditionalLinks {
float: right;
padding: 10px;
border: 1px solid navy;
background-color: #cccccc;
display: none;
}
由于将CSS的display属性设置为none非常重要，这使得该空的<div/>元素不会占用页面的空间。如果没有这个设置，将会在文章的右边看到一个很小的空方框。
与前一个例子不同，下载的内容只是包含链接和标题的文本文件中的纯文本。这个AdditionLinks.txt文件包含一些简单的HTML代码：
<h4>Additional Information</h4>
<ul>
<li><a href="http://www.wrox.com">Wrox</a></li>
<li><a href="http://www.nczonline.net">NCZOnline</a></li>
<li><a href="http://www.wdonline.com">XWeb</a></li>
</ul>
这个文件可以使用服务端程序逻辑动态地创建，但对于该实例的用途，静态内容就足够用了。
完成工作的JavaScript很简单，也与本章前几个例子十分相似：
function downloadLinks() {
var oXmlHttp = zXmlHttp.createRequest();
oXmlHttp.open("get", "AdditionalLinks.txt", true);
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
var divAdditionalLinks =
document.getElementById("divAdditionalLinks");
divAdditionalLinks.innerHTML = oXmlHttp.responseText;
divAdditionalLinks.style.display = "block";
}
}
}
oXmlHttp.send(null);
}
window.onload = function () {
if (zXmlHttp.isSupported()) {
downloadLinks();
}
};
完成该任务的函数是downloadLinks()，只有当浏览器支持XMLHttp，并且页面已经完全装载之后才调用该函数。在downloadLinks()函数中的代码也是前面一直使用的标准XMLHttp算法。当从AdditionalLinks.txt中获取内容后，将使用innerHTML属性将内容放置到占位符<div/>中。最后一步则是将<div/>元素的display属性设置为block，以使其结果可见。最终的结果如图3-5所示。
图 3-5
如果浏览器不支持XMLHttp，包含附加链接的区域将永远不会显示，因此第一段将会像其他段落一样展开。
这个技术可以在同一个页面的多个部分中多次使用，显然也不会限于在最初的页面载入，完成后每次只能更新一个部分。你可以为每个请求创建一个新的XMLHttp对象，然后相继地发送各个请求，也可以按顺序地发送——等收到前一个请求的响应后再发送下一个请求。这些选择完全取决于你及其预期的功能。
