Topic 3

The Document Object Model and XML Parsing in AJAX

Today we will combine the topics of the first two weeks, by examining how we can connect to a web service from an AJAX-based front end. We will connect to a web service from AJAX and then parse or interpret the XML returned. XML parsing can be made easier through the use of frameworks such as jQuery (which we will look at next week) but this week, we will examine the standard DOM method of XML parsing as it is an important concept to be aware of.

The W3C Nodes Model for Dynamic Data Manipulation and its relevance to HTML and XML
XML Parsing in AJAX applications

Querying and Manipulating HTML and XML documents using the DOM

So far, we've seen the innerHTML property which can be used to read, or change, the text within an HTML element. However that's just the start: the DOM offers a whole range of ways to read and manipulate HTML pages or XML data. To understand how you can use DOM for document manipulation, you must understand the concept of nodes, which we will discuss below. The examples below use the DOM to manipulate HTML documents, however, more generally, the DOM is used for accessing and manipulating XML documents. An HTML web page is a particular, specific type of XML document. So, as well as using the DOM to query and manipulate web pages, we can use it in a more general sense to query and manipulate XML. In AJAX, this latter use of the DOM is used extensively.

The Concept of Nodes

Part of the W3C Document Object Model (DOM)
A systematic way to navigate and manipulate the content of an HTML or XML document, not only the elements, but also the text within them
An HTML or XML document consists of a series of hierarchical nodes
Each element (e.g p, div, or em in HTML; or a custom tag in XML) is treated as a node
However it's not just the elements themselves: the text within each element is also treated as a special kind of node, a text node
The nodes are a nested, hierarchical structure

An element within an element is a child node of that element

Example of Nodes Terminology

<body>

<p> Welcome to the <em>wonderful!</em> world of dynamic text!</p>
</body>

The paragraph is a child node of the body

The paragraph contains three of its own child nodes:

The text: "Welcome to the"
The em element
The text: "world of dynamic text!"

The em itself contains one child node:

The text: "wonderful!"
This is a child of the em not the p

Nodes Hierarchy Diagram: Tree view

<body>
<p> Welcome to the <em>wonderful!</em> world of dynamic text!</p>

</body>

Querying the Node Structure of a Document

document.body.childNodes is an array of all child nodes of the body
- i.e. all elements and text within the page
node.childNodes is an array of all child nodes of a given node (i.e. element)
node.nodeName gives the name of a node
- i.e. em, p, song, artist, etc; or #text for text nodes
node.nodeValue gives the text within a text node (only)
- It has no meaning for page elements

Example

Adding a new node

One of the keys to dynamic text
document.createElement() allows us to create a brand new element!
document.createTextNode() allows us to create a brand new text node
Having created an element we can then populate it with text nodes and child elements
... and finally add it to either:
- The body
- Another element, which will act as its parent

Example

Replacing an existing node

The other key to dynamic text
We can replace a whole paragraph of text with another!!!
Steps:
- Find the element to replace
- Create a new element (as per the previous example)
- Call replaceChild() to replace the old node with the new

Example

Getting all elements of a particular type

It can make it easier to find a page element if we can collect together all elements of a particular type (e.g. all paragraphs)
document.getElementsByTagName() allows us to do this
This gives us an array of all elements of a particular type, which we can then index

Example

Removing nodes

The final key to dynamic text is removing a particular node

Use

parentElement.removeChild(childElement)

Use IDs or getElementByTagName() once again to find the element to remove

Other useful features of the DOM

(Source: Quirksmode, a very useful reference site for JavaScript and the DOM)

childNodes property - an array of all the child nodes of a given node.e.g.:

for (var count=0; count<parent.childNodes.length; count++)
{
    alert(parent.childNodes[count].nodeName); // show name of the node
}

firstChild and lastChild properties - the first and last child node of a given node. e.g.


// create a child node of the parent, assume that 'parent' has no children yet
var p = document.createElement("P");
parent.appendChild(p);

// create a text node
var textNode = document.createTextNode("some text");

// append it to the first child of the node 'parent', which will be the
// paragraph we created above. In other words 'p' and 'parent.firstChild'
// are the same in this case.
parent.firstChild.appendChild(textNode);

parentNode property - the parent node of a given child node. So for the code:
```
var p = document.createElement("P");
parent.appendChild(p);
```
the parentNode of p would be parent.
previousSibling and nextSibling - find the sibling nodes (siblings = Geschwister in German). Imagine that a given parent node has three child nodes, 0, 1 and 2. The previousSibling of child node 1 would be child node 0. The nextSibling of child node 1 would be child node 2.
insertBefore method - inserts a child node into a parent node at an arbitrary position, e.g:
```
parentNode.insertBefore(newNode,parentNode.childNodes[3]);
```
This code would insert newNode before child node 3 of the parent.

Using the DOM to Parse XML in an AJAX application

The first AJAX example from last time communicates with a server side script which sends back plain text. However, more frequently, the server side component of an AJAX application will send back XML data. In other words, the server side component of an AJAX application is often a web service. The callback function will then parse (interpret) the XML, using the DOM, and integrate the data within the website s front end. Using XML allows us to structure the data, meaning that we can be very flexible in how we present it to the end user we can extract the data we need from the XML (which may not necessarily be all of it) and arrange it on the page how we like.

This process of extracting the relevant data is called parsing XML. As you will see below, we use the DOM node manipulation functions, discussed above, to parse the XML.

The DOM feature which is most useful to us in doing this is getElementsByTagName() , which takes a particular tag name and returns an array of all tags with that name. For example imagine the server sent back the results of search for flights to Paris on 1/7/08 as this XML:

<flights>
<flight>
<destination>Paris</destination>
<number>1</number>
<time>0900</time>
<date>1/7/08</date>
</flight>
<flight>
<destination>Paris</destination>
<number>3</number>
<time>1400</time>
<date>1/7/08</date>
</flight>
</flights>

The example below would parse XML in the above format in the callback:

Mega Airways! - Europe's top value airline!

SPECIAL IBIZA OFFER!!!!!!!!!!!!!!!!!!!!

Fly all the way to Ibiza for only GBP5!!!!!!!

Excludes baggage fee of GBP100 per bag, weight limit 1kg, increasing by GBP50 per kg. Quoted price only valid for the 4am flight from Biggin Hill Airport on January 17th in leap-years ending with an 8. Normal price GBP500, excluding baggage fees as quoted above. The Ibiza airport we fly into is Ibiza(Valencia) Airport, mainland Spain, only a few hours away by boat. Equipment: early 1950s Boeing. Toilet fee of GBP10 on board.

Destination:
Date:

]]>

So how is this working? Well, first we get an array of all the flight tags within the XML. We do this using

var flightsArray = xmlHTTP.responseXML.getElementsByTagName("flight");

xmlHTTP.responseXML represents the XML returned from the server. As seen above, getElementsByTagName() will give us an array of all the tags so this code will extract all the flight tags from the returned XML and place them in the array flightsArray. The tags are represented as JavaScript objects (see last week). So flightsArray will be an array of tag objects.

We then loop through each object representing a flight tag in the array. For each flight tag, we get hold of the number and time tags within it as follows:

var number = flightsArray[count].getElementsByTagName("number")[0].
                    firstChild.nodeValue;

var time= flightsArray[count].getElementsByTagName("time")[0].
                    firstChild.nodeValue;

The syntax might seem a bit more complex than is necessary, so I'll explain it in detail below.

Firstly, remember that getElementsByTagName() always returns an array of tags even if there is only one tag with that name. In this case, there will only be one tag, because each flight tag contains only one number tag and one time tag. So to extract that single number tag out of our one-member array we would use:

flightsArray[count].getElementsByTagName("number")[0]

i.e. the first (and only) member of the array of number tag objects.

However even this isn t exactly what we want. It gives us an object representing the number tag itself. However what we want is not the tag, but the actual text within it, e.g. 101 for flight 101.

To get that we need to extract the nodeValue of the firstChild of the tag.

var number=
flightsArray[count].getElementsByTagName("number")[0].
firstChild.nodeValue;