XML Document Parsing Using DOM API

One of the innovations of Yahoo® Widget Engine v. 3.0 is a built-in XML document parsing service. Now you can easily parse XML documents without the need for external libraries or Regular Expressions. You can do it using the DOM API which is fairly simple.

Parsing the Yahoo® World News RSS newsfeed

Here's a simple example which shows how the DOM API can be used to parse the Yahoo® World News RSS newsfeed:

First of all, you need to request the data (in this case, the XML document) from the server. This is why you need to create a new XMLHttpRequest() object which will be used to get the data:

var request = new XMLHttpRequest();

Now set the XMLHttpRequest() to request the information from the server. Do it using the open() command:

request.open("GET", "http://rss.news.yahoo.com/rss/world", false);

The first parameter is "GET", which means that you want to get the data from the server. The second parameter is the URL which contains the XML document. The last parameter determines whether you want an asynchronous request or not, in other words, whether you want the Widget to stop responding until the request process is finished or not. Use "false" for a synchronous request, or "true" for an asynchronous request. In this case, you use a short RSS feed, so you don't have to use an asynchronous request.

Finally, set the request object to request the data from the server using the send() command:

request.send();

If the request has succeeded and the server's response contains an XML document which can be parsed, the responseXML property of the request object is the parsed XML document and a DOMDocument object. If not, it is a null object. In order to use it safely, you'll have to check this later. It'll be easier for you if you first assign the responseXML to a variable:

var doc = req.responseXML;

Now check the server's response. You need to check 2 things: whether the request has succeeded and whether the server's response is an XML document which can be parsed. To check this, use the status and responseXML properties:

if(request.status == 200 && doc != null)
{

If the request's status is 200, it means it has succeeded. If the responseXML, represented by the "doc" variable in this case, isn't a null object, it is an XML document which can be parsed and a DOMDocument object.

Now you can start getting the information you want from the XML document. Use the evaluate() method to get all of the nodes which match the path "rss/channel/item/title". This way only the "title" tags which appear as the child nodes of an "item" tag will be used:

var titleNodes = doc.evaluate("rss/channel/item/title");

Use the item() function to put the first "title" tag in the "firstTitle" variable. The first tag can be achieved by passing 0 to the item() function. The others can be achieved by passing higher values:

var firstTitle = titleNodes.item(0);

Now the text of the first "title" tag appears in the "data" attribute of the first child of the "firstTitle" tag. Use the print() method to print the first title in the debug window:

print("The first node: " + firstTitle.firstChild.data);

Now print all of the titles which appear in the XML document as the child nodes of an "item" tag:

for(var i = 0; i < titleNodes.length; i++)
{
   print("Title " + (i+1) + ": " + titleNodes.item(i).firstChild.data);
}

Before you finish, remember that you checked whether the request has succeeded and whether the server's response is an XML document which can be parsed. Now you need to tell your Widget what to do in case a problem occurred. In this example, tell it to print an error message in the debug window:

}
else
{
   print("An error occurred. Response status: (" + request.status + ") " + request.statusText);
}

The error message prints the request.status which is the status code of the response, and request.statusText which is the HTTP status text returned by the server, e.g. "OK", "Not Found", etc.

That's it. Now you can run the Widget, and look at the debug window. You should see the first title of the RSS feed followed by the rest of the titles.

Final Result

Here is the whole code without explanations and comments (I also added try and catch commands to handle errors):

 var request = new XMLHttpRequest();	
 request.open("GET", "http://rss.news.yahoo.com/rss/world", false);	
 request.send();
	
 try
 {
	var doc = request.responseXML;
 
 	if(request.status == 200 && doc != null)
	{	
	    var titleNodes = doc.evaluate("rss/channel/item/title");
	    var firstTitle = titleNodes.item(0);
	
	    print("The first node: " + firstTitle.firstChild.data);
	
	    for(var i = 0; i < titleNodes.length; i++)
	    {
	       print("Title " + (i+1) + ": " + titleNodes.item(i).firstChild.data);
	    }
	}
        else
        {
           print("An error occurred. Response status: (" + request.status + ") " + request.statusText);
        }
 }
 catch(e)
 {
    print("An error occurred: " + e);
 }

Summary

The Yahoo® Widget Engine's XML services are really useful when you need to parse XML documents. This is just a simple example, but there is much more you can do with the DOM API. For more information about the Y!WE's XML services read pages 270-290 in the Yahoo® Widget Engine v. 3.0 Reference Guide.