COMP249 Web Technology
Practical - Week 12
Working with AJAX
In this week's practical session you will implement an AJAX application and learn how to communicate via the XMLHttpRequest object with a server-side Python script.
- Build a simple web page that contains an HTML form which has fields for name, age, city, and country; these should all be simple input fields.
- Add JavaScript code to the web page that implements the XMLHttpRequest object, so that you can initialize a connection, send data to a Python script, and listen for events; use the code in the lecture notes as a guide. Call the javascript function from the onclick event of a button.
- To get started, make a simple XML file as follows and get your XMLHttpRequest to
retrieve that.
<person> <name>Steve</name> <age>21</age> <city>Sydney</city> <country>Australia</country> </person>
- Write a JavaScript function that retrieves the XML file and populates the form based on the contents.
- Write a Python script which accepts the name field and serves for each person specific XML snippets like the one above. You could make this come from a database if you wish but for experimentation purposes, use the following Python dictionary:
people = {'steve' : {'age': 21, 'city': 'Sydney', 'country': 'Australia'},
'kevin' : {'age': 52, 'city': 'Canberra', 'country': 'Australia'},
'george': {'age': 75, 'city': 'Washington', 'country': 'USA'}
}
Note that the Content-Type of this document should be text/xml not text/html. Since you are working with XML, you can use the responseXML property to get the response from the server as a DOM tree to process it on the client-side.
Your Portfolio
An expansion of this AJAX example would make a good addition to your portfolio. You could also try implementing something with one of the javascript AJAX toolkits such as jQuery.