Topic 3. AJAX and XML

AJAX - background

This is revision from the Developing For The Internet unit from last year. It may be new to you if you're a BIBS student.

The problem with "classic" web applications

Classic web applications

Classic web applications give no instant feedback to the user: when the web application's state changes (e.g. when the user enters something in a form), the page is reloaded in the browser.

This is because when a form is submitted, the server sends back a whole new HTML page as a response. So, web applications feel less responsive than desktop applications, because the user has to wait for the page to be sent back. They cannot interact with the page in the meantime.

A new approach – AJAX

AJAX applications

AJAX stands for Asynchronous JavaScript and XML. It is a relatively new technique which allows browsers to communicate with a web server without having to reload the page.

A user might enter a search term in a form and click Go, and then the search results would be sent back from the server and one small part of the page only (as opposed to the entire page) updated with the search results.

Furthermore, requests to the server are sent, and responses received, in the background without any interruption to the user's interaction with the website... so, unlike in a traditional web application where the user has to wait for a response from the server, the user can continue to interact with the page while waiting for the response to come back.

AJAX is not an actual language, but a combination of technologies used to produce the effect above. An AJAX application typically consists of three components:

the client side application, usually JavaScript running in the browser which sends HTTP requests to a server and processes the response;
a server side script which receives the HTTP request sent from the JavaScript, above, and delivers the response;
the data sent back from the server to the client, which can be either plain text or XML.

How AJAX Works - Part 1 - Sending the Request

User interacts with the page in some way e.g. clicks a button
JavaScript runs in response to this event, and sends a request to a server in the background
Server-side script processes the request, and sends back data (either plain text or XML)

How AJAX Works - Part 2 - Receiving the Response

JavaScript on the client receives the text or XML response
The response is used to change the state of the page in some way: for example, the server could send back some text, and JavaScript on the client could replace the text in a paragraph with the text returned
In this way, pages dynamically update with data from a server without having to reload

Typical structure of JavaScript code in an AJAX application

An AJAX application typically contains two JavaScript functions in addition to a server-side component:

The first function gathers the information from the user and sends the request to a server-side script (e.g. a PHP script);
The second - the callback - runs when the response is received from the server, and updates the page with the response.

The server-side script involved is no different to an ordinary server-side script: it simply receives the requests, acts upon it (e.g. looks up data in a database) and delivers a response. For example, if it's PHP, it uses $_GET or $_POST (depending on whether we're sending a GET request or a POST request) to read the data, then queries a database and sends back the results as plain text or XML.

Developing an AJAX application

Here is an example of an AJAX application offered by Solent Airways, to allow users to search for flights to a particular destination on a particular date.

The hard way!

Here is an example of some raw AJAX code. Don't worry too much if you don't understand this - there is an easier way, which we will discuss below!

AJAX test

Solent Airways!

Get the cheapest flights ever!!!!!!!!!!

Whether it's New York, LA, Paris or Alicante, you can be sure to find the best deals on the web right here!!!!!!!!!!!!!!!!!!!!

Destination:
Date:

]]>

So what's happening here? Let's consider the ajaxrequest() function first. This is the function which sends the data.

When the user clicks the Go! button, the ajaxrequest() function runs
At the start of ajaxrequest(), we read in the destination and date that the user entered in the destination and date text boxes;
We then form a query string to send to the specified server side script using the destination and date that the user entered;
We initialise the AJAX object - xmlHTTP - which will actually represent our transaction. Note that Firefox/Opera/Safari and Internet Explorer implement AJAX differently so we need an if/else statement to initialise the AJAX object differently depending on what browser we are using.
Having initialised our AJAX object, we open a connection to the server side script.
Next we specify the callback function. The callback function is the JavaScript function which will run when the response is received from the server. Here, the callback function is called resultsReturned.
Finally, we send the data off!

Next, let's consider the callback function (resultsReturned). This is a lot simpler:

First we test whether the readyState is equal to 4. The readyState will be 4 as soon as the response has been successfully sent back from the server. (different values of readyState indicate error conditions)
If so, we take the response received from the server (represented by xmlHTTP.responseText) and place it in the <div> with the ID of result using the innerHTML feature of the DOM.

AJAX libraries - simplifying AJAX code

You might be thinking, doesn't this code look a bit complicated for sending a request to a server and receiving the response back? Well it is a bit, due to the fact that we have to consider the differences between AJAX implementations in Firefox and Internet Explorer.

For this reason, various AJAX libraries have been written. These libraries do all the heavy work for you, such as catering for different browsers. Using an AJAX library makes writing AJAX code much simpler, as you will see in the next example. One of the best known AJAX libraries is Prototype ( http://www.prototypejs.org). As well as providing AJAX functionality, Prototype also extends the object-orientated capabilities of JavaScript.

AJAX example using Prototype - the easy way!

This example is available on the web here.

AJAX HitTastic! Example

Solent Airways!

Get the cheapest flights ever!!!!!!!!!!

Whether it's New York, LA, Paris or Alicante, you can be sure to find the best deals on the web right here!!!!!!!!!!!!!!!!!!!!

Destination:
Date:

]]>

Hopefully you can see this is working in a similar way, but with less code. How does this work? The ajaxrequest() function first retrieves the destination and date that the user entered and stores them in the variables a and b respectively. Then we send a request to the server using the Ajax.Request method:

var request = new Ajax.Request
        ('http://www.free-map.org.uk/course/flights.php',
            { method: 'get',
              parameters: 'destination=' + a  + '&date=' + b,
              onComplete: responseReceived }
        );

We specify four pieces of information:

the server side script we are communicating with (hits.php);
the HTTP method we are using (‘get’ in this case, could also be ‘post’);
the query string parameters we are sending (i.e. a query string containing the destination and date);
the JavaScript callback function (see above) which will run when we get the response back from the server (responseReceived in our case).

The ajaxrequest() function will send the information to the server. When we get the response back from the server, the responseReceived() function – the callback – runs, repeated below:

function responseReceived(xmlHTTP)
{
document.getElementById('response').innerHTML = xmlHTTP.responseText;
}

This takes the response sent back from the server (represented by the xmlHTTP variable) in text format (xmlHTTP.responseText) and puts it into the div with the ID of response (innerHTML represents the contents of a given page element). Thus the effect will be that the user’s search results will appear in the div without the rest of the page refreshing.

AJAX and XML Parsing

The simple example above 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. The callback function will then parse (interpret) the XML 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. To parse the XML, we use the Document Object Model (DOM) again, which you have already met in accessing and manipulating web pages. However, more generally it is used for accessing and manipulating XML documents; an XHTML web page is a particular, specific type of XML document. So we can use DOM functions to query the XML returned from the server and extract the data from it.

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:



Paris
1
0900
1/7/08


Paris
3
1400
1/7/08


]]>

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

";

    }
    document.getElementById("results").innerHTML = html;
}
]]>

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;

The firstChild notation is because the text is considered a "child" of the number tag, because the text is inside the number tag.

Similarly, the destination, number, date and time tags can all be considered "children" of the flight tag, because they are nested within it.

Exercises

Week 3 Preparation Exercise - Basic AJAX

This is designed to be done if you have not done AJAX before, or you have forgotten it :-) Try and do it in your own time, between now and Thursday, and email me or see me if you get stuck.

Located at http://edward/ajax/hits.php is a pre-prepared script which takes an artist as a query string and returns all the songs by that artist in plain text (not XML). For instance:
```
http://edward/ajax/hits.php?artist=Oasis
```
will return all Oasis hits.
Using AJAX and the Prototype library, write an AJAX front end which allows the user to search for all the songs by a particular artist. Place the response from the server in a <div>.

Main Week 3 Exercise - AJAX and XML Parsing

The main exercise is to write an AJAX front end which parses (interprets) the XML that your web service from Week 1 produced. Please come to the class on Thursday knowing where you uploaded your PHP script from Week 1, so you do not lose valuable time searching around for files!

Using AJAX and the Prototype library, write an AJAX front end which allows the user to search for all songs by a particular artist. It should connect to your web service from Week 1, and parse the XML returned using the DOM. Place each matching hit on a separate line within a <div>.
Next, display the results in a table.

Advanced exercise

Add a select box to your web page which allows the user to select the lowest chart position to show. For example, if the user selected 5, only songs which got to at least no.5 in the charts would be shown. Change your XML parsing code so that only songs which have reached at least the selected chart position are shown.
Add a similar select box to allow the user to select only songs from a given year.

Hint!: remember that you can get the value of a select box by using:

document.getElementById(selectBoxID).value;

Log book work (weeks 3/4)

Further research the Document Object Model (DOM) to get an idea of the range of features it offers for parsing (interpreting) XML. Try and understand the concept of "nodes" which is central to the way the DOM works.
Do further research on the Prototype library to get an idea of what it can do.
Investigate a range of articles which discuss the advantages and disadvantages of AJAX. Try and judge for yourself whether these articles are balanced, or whether they might contain bias. Carefully consider whether the positive or negative points that the authors make towards AJAX are reasonable, based on your own experience of web development.