Topic 3

The Document Object Model and XML Parsing in AJAX

Exercises

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 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 song 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;

Further advanced exercise - Developing a larger AJAX application

Here is an exercise to do if you successfully completed all the exercises above. Do not attempt this if you are not comfortable with programming concepts such as functions and parameter passing. You are going to extend the functionality of your AJAX-based HitTastic! website so that the user is able to buy music. To do this, you need to make sure that you have done Question 3 from Week 1, i.e. developed the web service which reduces the quantity in stock of a song by one.

Add a button labelled "Buy" next to each song that you extract from the XML. Use the following code:
```
html += '<input type="button" value="Buy!" onclick="" />';
```
This code will add an HTML button onto the HTML string that you are building up from parsing the XML, and which will go in your <div>. Only add the Buy button if the quantity in stock is greater than 0!
Next, write a JavaScript function to send a request over to the Question 3 web service from week 1. This will be very similar to the original function that you wrote to retrieve all the songs by the user's chosen artist. The key difference will be that the function will need a parameter containing the ID of the song that you wish to buy.
(A parameter is a piece of information passed to a function; in this case the function needs to know the ID of the song the user is buying, because it needs to send it to the server. So we need to pass the ID into the function as a parameter.)
To specify a parameter, you would declare the function like this:
```
function sendBuyRequest(songID)
```
where songID is the ID of the song we wish to buy.
Next, link the function you've just written to the button that you wrote in Question 1, so that when the user clicks on the button, the function to send the buy request to the server will run. To do this you would change the code you wrote in Question 1 so that it looks like this:
```
html += '<input type="button" value="Buy!" 
onclick="sendBuyRequest(' + ID + ')" />';
```
where ID is the ID of the song, extracted from the XML. (Make sure your XML includes the song ID if it doesn't already).

What this code is saying is that when the user clicks on the button, the sendBuyRequest function will run, and the ID of the current song will be passed to it as a parameter.

We are dynamically constructing the HTML to go in the <div> based on the values extracted from the XML. So the exact HTML code for the button will depend on the ID of the current song. So, for example, if the ID of the current song is 227, the HTML constructed will be:
```
<input type="button" value="Buy!" onclick="sendBuyRequest(227)" />
```
Finally, write the callback to the AJAX request. This should retrieve the output from the web service, interpret it and act accordingly. If the song was bought successfully, display a message in the <div> reading Bought successfully, otherwise display Out of stock!

Additional project: AJAX shopping basket

Here is a further, more extended exercise for you to do optionally in your own time if you have completed everything else and want some practise in developing a larger application with AJAX.

Develop a shopping basket application using AJAX. A user should be able to add a new item to the shopping basket when they select a song. Then, once they have finished shopping, they should be able to buy all the songs they requested at once. To do this:

Create a Hit class with attributes for title, artist, and ID.
Create a Basket class which contains an array of Hits. Add a global Basket object to your application.
Add an addHit() method to the Basket class. This should take an ID, artist and title as parameters, create a Hit object from them, and add the Hit to the Basket.
Add a display() method to Basket. This should take in the ID of a page element as a parameter, and fill the element with the contents of the basket (use innerHTML).
When the user clicks on the Buy button, it should add the song to the basket, rather than buy the song. You should call the addHit() method of the Basket, passing in the song's ID, title and artist. It should also call the Basket's display() method, passing in the ID of a suitable <div>.
Add a checkout() method to Basket. This should send a comma-separated list of the IDs of each song in the basket to checkout.php (see below) which should actually reduce the quantity in stock of each song in the basket. It should also interpret any XML errors generated by checkout.php.
Write a checkout.php script which interprets the comma separated list of IDs and reduced the quantity in stock of the song with each ID in the list. It should generate XML errors for any error conditions that might occur. Hint look up the PHP explode() function.