Week 4

Continue with AJAX

There is no new subject for the lecture this week, as the time will be spent going over the AJAX example and answering any questions people might have on recent material. However, note the log book question below.

If you did not complete the Week 3 exercises, you should make sure that you complete them today. The most important exercise to do is to write the code to parse (interpret) the XML returned from your web service in Week 1 (don't worry so much if you do not get round to doing the advanced exercises)

Important log book question

Answer this in about a paragraph in your log book. Why do you think that web services, which deliver pure data as XML, rather than HTML content, are ideal server side back ends for AJAX applications?

Further exercise - Developing a larger AJAX application

Here is an exercise to do if you successfully completed all the exercises from last week. 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>.
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!