Advertisment

Parsing XML in Mozilla Browser

author-image
PCQ Bureau
New Update

Mozilla is the de-facto browser that ships with most Linux distributions, including PCQLinux 2004. It incorporates many Web technologies such as Java, JavaScript, Liveconnect (Java and JavaScript communication), Flash and XML. Talking about XML (one of the numerous uses of this language is to structure content on the Web). While at the least, Mozilla can open a plain vanilla XML document and render it in a tree-like structure (similar to IE), italso supports parsing of the XML data residing in a file using JavaScript. The parsed data can be displayed as HTML-a common use.

Advertisment

This article explains the basics of how to parse or read XML data in Mozilla Web browser using Javascript. It also explains, through simple code examples, how to search through an XML file containing employee data. The Mozilla Web browser version used to run the code examples is 1.4.1-the one that is bundled with PCQLinux 2004. We assume that you know the basics of XML and are familiar with terms such as elements and attributes. 

The first and foremost Javascript statement for Mozilla to parse an XML file is as follows.

var xmlDoc = document.implementation.createDocument(“”, “”, null)

Advertisment
Direct

Hit!
Applies to: Web developers
USP:

Search and display XML documents more intutively Search and display XML documents more intutively
Links:

www.mozilla.org
 

Here is the namespace used for the XML document. The is the XML root element in the XML file. The third parameter, namely null, is always null because it is not implemented in the function. Sounds confusing? The good news is that the parameters are optional and thus this statement can take the form of:

var xmlDoc = document.implementation.createDocument(“”, “”, null)

Advertisment

As clean as it looks! What must be kept in mind is the above statement returns a document object that is stored in the variable xmlDoc. In simple words, a document object represents a document, an XML document in case of this article. We will be using the xmlDoc variable for subsequent parsing. 

Next, suppose the file we need to parse is dummy.xml, then we need to upload this file using the following statement.

xmlDoc.load(“dummy.xml”);

Advertisment

With this, we are all set and ready to parse the XML content in the file dummy.xml. But there is a catch. Before starting to parse the XML file, we need to ensure that the file has indeed been loaded. The load( ) function stated above can upload a file from the local hard disk as well as across the Internet. The file may take more than a couple of seconds to load in case of the Internet. To ensure that the statements to parse the XML file are executed only when the file is loaded, we must use the following statement before the load function.

xmlDoc.async=false;

To retrieve XML elements from the file, use the following statement.

Advertisment

var element = xmlDoc.getElementsByTagName(“”);

This will return an array of XML elements in the dummy.xml file, whose tag name is

To dwell more into XML parsing, we take you though a code example that searches an XML file containing details of employees in an organization. 

Advertisment

The employee XML file



The pcqlabs.xml file contains the details of, let's say, the employees at the PCQ Labs. It looks as follows.








Krishna


Kumar


kkkg@cmil.com













Anil


Chopra


anilc@cmil.com













Anoop


Mangla


anoopm@cmil.com













Anindya


Roy


anindyar@cmil.com










Code to Search through XML



Now to search for an employee whose first name is Anindya, the following is the code.

Advertisment





























 

Note that at the bottom of the above HTML page, the searchByFirstname( ) function is called with a parameter Anindya, which is the first name of the employee we intend to search in the XML file. If an employee with the first name as Anindya is found, the function searchByFirstname( ) shows an alert box saying the entry is found and also displays the full name of the employee and his e-mail address. 

The code behind



The first three lines of the function have been explained above. Note that we are assuming that pcqlabs.xml file is in the same directory as the HTML file containing the JavaScript function for searching. Hence in the load() function we are simply giving the name of the file without any path information. The line: 

employees =

xmlDoc.getElementsByTagName(“employee”);

returns an array of employee elements (tags) in the XML file and stores it in the employees variable. The next step is to iterate through this array of elements, which is done using the 'for' loop. Now, the first_name element lies within the employee element. We are interested in reading the value enclosed between and for each employee element. This is achieved by writing the following statement.

firstName =

employees.getElementsByTagName(“first_name”)<0>.childNodes<0>.nodeValue;

Here the getElementsByTagName( ) function refers to the first_name element within the employee element in question (employees<0> or the first employee element in the first iteration). Since there is only one first_name element within an employee element the index will be zero as in getElementsByTagName (“first_name”)<0>. Once we have a reference to the first_name element the next task is to retrieve the value within the first_name tag pair. This value is referred to as the childnode of the first_name element. Since there is only one childnode, namely the first name such as Anil or Anindya, the index will be zero. At last, the nodeValue property of the childnode gives the value (the first name) that we are interested in. We have broken down the statement below to simplify it.

//get the reference to the first_name element



first_name_element_ref = employees.getElementsByTagName(“first_name”)<0>;





//Get the reference to the childnode or the value contained between the first_name element


first_name_element_value_ref = first_name_element_ref.childNodes<0>;





//Get the value — the first name of the employee


firstName = first_name_element_value_ref.nodeValue;





The remaining part of the code checks whether the first name retrieved from the XML file matches the first name looked for (passed as a parameter to the searchByFirstname( ) function). If there is a match, the code retrieves the value for the last name and e-mail in the same way as for the first name and displays it in a JavaScript alert box. 

Reading attributes



We have specified the designation of the employees as attributes to the employee tag. For example:

To retrieve the information of the person who is the senior manager of PCQ Labs, we need to write a code that can retrieve the attribute from the XML file. Below is the code that achieves this.





























The noteworthy statement here is the one that is used to retrieve the value for the designation attribute of the employee tags.

designation =

employees.attributes<“designation”>.value;

The remaining code is same as the previous, which displays the search result. An XML search like this is a feasible method to search-enable data on the client side, within the Web browser, without using a server side script or database. 

Shekhar Govindarajan



IT4Enterprise

Advertisment