Code snippet:
<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 channelincluxmldom.doc umentElement. 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
It is recommended to write like this in the future. Because xmlHttp. status = 200, it indicates that the server returns the correct result, so that the XML can be correctly parsed.
ResponseXML
The program with the 9th line is as follows: var xmldom = xmlHttp. responseXML;
One XMLHttpRequest, after successfully reading data, we can actually have four methods,
Obtain the data. ResponseText is only one of them. There are also three types:
ResponseTextReturns response information as a string.
ResponseXMLFormat the response information as an XMLDOM object and return
ResponseBodyReturns the response information in the form of an unsigned byte array.
ResponseStreamReturns the response in the form of an IStream object.
Among them, we need to know in depth, only responseText and responseXML, as
ResponseBody and responseStream can be ignored.
For the so-called AJAX application, the main task is to transfer various XML data between the browser client and the server. If you want to read the String data by yourself and then manually parse the XML by yourself, it will be very complicated. With responseXML, you can directly get a parsed xml dom, this is very convenient.
XMLDOM APIs
Even if XMLDOM is obtained directly, the process is not over yet. We also need to use the APIS provided by XMLDOM to correctly read the data. XMLDOM is too much content. Here we will only introduce the APIs used in this program.
XMLDOM tree: An XMLDOM is actually a tree in memory and an XML data
The first word in each <> represents a node. For example:
<Rss>
<Channel/>
</Rss>
<Channel/> indicates the channel node. If the channel node ends with/>,
Then it does not contain subnodes. The rss node is a node that contains sub-node channels. We
It can also be said that rss is the parent node of the channel, and channel is the child node of rss. Root Node, that is, no
A node with a parent node, that is, a top-level node.
DocumentElement: In this way, you can get the root node of the xml dom tree.
The RSS document we want to analyze is the rss node.
ChildNodes and item: in this way, all the child nodes of a node can be obtained, with an Array
.
1 var childs = node. childNodes;
2 alert (childs. length );
3 var itemnode = childs. item (0 );
The childs above is a JavaScript array. We can use childs. length to obtain
The length of the array. You can also use item (int) to obtain an element,
Naturally, it is also a node.
TagName: Obtain the name of a node. <Rss> the tagName is rss, <title>
The tagName of is naturally the title. Our program identifies information by judging the tagName.
Text: Content contained by a node. For example, <author> reading, thinking, and living </author>.
The text of this node is reading, thinking, and living.
Okay, that's all. the xml dom api is certainly not that simple, but now
In the sequence, we only use so much.
InnerHTML and href
For example, the first line of the program: blogtitle. innerHTML = node. text;
Row 3: bloglink. href = node. text;
In fact, we can find that innerHTML is similar to node. text in xml dom.
. On the initial page, we wrote:
<Font color = blue> <a id = "bloglink" href = "#"> <div id = "blogtitle"> </div> </a> </font>
Such content is invisible to static HTML pages. But with <
Id = "bloglink"> and <div id = "blogtitle">
The access capability of html dom is dynamically displayed on the page.
Blogtitle. innerHTML = "test ";
It is equivalent
<Div id = "blogtitle"> test </div>
While
Bloglink. href = "url ";
It is equivalent
<A id = "bloglink" href = "url">
This is the initial Dynamic HTML (DHTML.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
