1 Objectives covered in this laboratory
- Practise to use XMLHttpRequest
- Practise to use DOM to search and change an XML document
2 Exercises
a) Copy the code of the "Contacts, Calendar, Advert" XHR example from Blackboard. These files are contained in Lec6Examples.rar under Lectures on Blackboard.
In this example, amend the example so that it "works" synchronously. Run in IE and Firefox. How does this behaviour change (if at all)? Now, add a 3 seconds delay in display.php using "sleep(3);". Run the example again and check whether there is an obvious change.
b) Copy the code of the "Hotel Booking" XHR example from Blackboard. These files are also located in Lec6Examples.rar under Lectures on Blackboard. Add some more hotel data, so that every city is covered, and that some category / city pairs have at least 3 hotels. Ensure that these hotels are not listed in the XML file in increasing order of price. Now, amend the code for the example to ensure that if there is more than one hotel to be displayed, they are displayed in order of increasing price (see Figure 1).
Figure 1 sorted hotel list
c) Design and create an XML document to record the maximum temperature details for Melbourne. Data to be stored for each entry is:
• Day (use a number eg 2)
• Month (use a number eg 9)
• Year (use 4 digit number eg 2009)
• Max temperature (in degrees C - eg 24.0)
Your data file should include just the data for 1 to 7 April 2013. Temperature data to be used is: 24.0, 21.9, 24.4, 25.8, 26.9, 25.3, 25.7
Read and manipulate the XML file to display, in the client, the dates and temperature figures, one to a line, with the average maximum temperature given below (see Figure 2). You must use Ajax techniques to get the XML data to the client, and must use the DOM API to extract, calculate and then display the relevant details.
Figure 2 request temperature xml
d) Copy the code of the simpleajax example from Blackboard. These files are in Lec1Examples.rar under Lectures on Blackboard. Change the code to allow three XHR requests as shown in Figure 3.
Figure 3 Extension of the Simple Ajax example for handling multiple requests