一段代码:
<SCRIPT LANGUAGE="JavaScript">
var bloglist=new Array();
var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
function startload()
{
xmlHttp.open("GET", "http://www.blogjava.net/zbw25/Rss.aspx", true);
xmlHttp.onreadystatechange=function()
{
if (xmlHttp.readyState==4&&xmlHttp.status==200)
{
var xmldom=xmlHttp.responseXML;
var channel=xmldom.documentElement.childNodes.item(0);
var itemlist=channel.childNodes;
for(var i=0;i<itemlist.length;i++)
{
var node=itemlist.item(i);
if(node.tagName=="title")
{
blogtitle.innerHTML=node.text;
}
if(node.tagName=="link")
{
bloglink.href=node.text;
}
if(node.tagName=="description")
{
blogdescription.innerHTML=node.text;
}
if(node.tagName=="managingEditor")
{
managingEditor.innerHTML=node.text;
}
if(node.tagName=="item")
{
bloglist[bloglist.length]=node.childNodes;
}
}
showitem(bloglist[0]);
}
}
xmlHttp.send(null);
}
function showitem(itemlist)
{
for(var i=0;i<itemlist.length;i++)
{
var node=itemlist.item(i);
if(node.tagName=="title")
{
itemtitle.innerHTML=node.text;
}
if(node.tagName=="link")
{
itemlink.href=node.text;
}
if(node.tagName=="description")
{
description.innerHTML=node.text;
}
if(node.tagName=="author")
{
author.innerHTML=node.text;
}
if(node.tagName=="pubDate")
{
pubDate.innerHTML=node.text;
}
}
}
</SCRIPT>
<body onload="startload()">
<font color="blue"><a id="bloglink" href="#"><div id="blogtitle"></div></a></font>
<br>
By <font color="blue"><div id="managingEditor"></div></font>
<br>
<font color="blue"><div id="blogdescription"></div></font>
<br>
<br>
<font color="#000066"><a id="itemlink" href="#"><div id="itemtitle"></div></a></font><br>
By <font color="blue"><div id="author"></div></font><br>
<div id="description"></div><br>
<div id="pubDate" align="right"></div>
</body>
xmlHttp.status==200
以后都推荐像这样写。因为xmlHttp.status==200,代表服务器端返回的是正确的结果,这样才有可能正确的解析XML
responseXML
第9行的程序是这样的:var xmldom=xmlHttp.responseXML;
一个XMLHttpRequest,在顺利读取了数据之后,我们其实可以有四种方法,
得到这个数据。responseText只是其中一种。另外还有三种:
responseText 将响应信息作为字符串返回
responseXML 将响应信息格式化为XMLDOM对象并返回
responseBody 将响应信息以unsigned byte数组的形式返回
responseStream 将响应信息以IStream对象的形式返回
其中我们需要深入了解的,只有responseText 和responseXML 两种,至于
responseBody和responseStream,基本上可以不用考虑。
对于所谓AJAX应用,其实主要的工作,就是在浏览器客户端与服务器端之间,传递各种XML数据。如果要自己读取String数据,然后再全部自己手工解析XML,那就会非常复杂;而使用responseXML,就可以直接得到一个已经解析好了的XML DOM,这样就很方便了。
XMLDOM相关API
就算是直接得到了XMLDOM,事情也还没有结束。我们还需要运用XMLDOM提供的API,来正确的读取其中的数据。XMLDOM实在是太多内容了,这里只介绍这段程序里用到的API吧。
XMLDOM树:一个XMLDOM,其实是一个内存中的树,一个XML数据
中的每一个<>中的第一个单词,就代表着一个节点。比如:
<rss>
<channel/>
</rss>
<channel />,就代表channel节点。如果channel这个节点,直接以/>结尾,
那么它就不包含子节点。而rss节点,就是一个包含子节点channel的节点。我们
也可以说,rss是channel的父节点,channel就是rss的子节点。根节点,就是没
有父节点的节点,也就是顶层节点。
documentElement:这样就能够得到一个XML DOM树的根节点,具体到
我们想要分析的RSS文档,就是rss那个节点。
childNodes与item:这样就能够得到一个节点的所有子节点,以一个数组
的形式返回。
1 var childs=node.childNodes;
2 alert(childs.length);
3 var itemnode=childs.item(0);
上面的childs就是一个JavaScript的数组,我们可以通过childs.length,得
到这个数组的长度。也可以通过item(int),得到其中的某一个元素,这个元素,
自然也是一个节点。
tagName:可以获得一个节点的名称。<rss>的tagName自然就是rss,<title>
的tagName,自然就是title。我们的程序就是通过判断tagName,来识别信息的。
text:就是一个节点包含的内容。比如< author>读书、思考、生活</ author>。
那么这个节点的text,就是 读书、思考、生活。
OK,就说这么多,XML DOM API当然不会这么简单,不过在现在这个程
序里,我们用到的也就只有这么多。
innerHTML与href
比如程序的第15行:blogtitle.innerHTML=node.text;
第18行:bloglink.href=node.text;
其实我们可以发现innerHTML与XML DOM中的node.text,有某种相似之
处。在初始的页面上,我们写着:
<font color=blue><a id="bloglink" href="#"><div id="blogtitle"></div></a></font>
这样的内容,在静态的HTML页面里,其实什么都看不到。但是有了<a
id="bloglink">和<div id="blogtitle">这样的两个元素,我们就可以借助JavaScript
对于HTML DOM的访问能力,动态的在页面里显示出内容来。
blogtitle.innerHTML="test";
就相当于
<div id="blogtitle">test</div>
而
bloglink.href="url";
就相当于
<a id="bloglink" href="url">
这就是初步的动态HTML(DHTML)了。