Web Design/AJAX Challenges
Please help out and update the following challenges if you think they can be improved!
|
Web Design → AJAX Challenges
|
Challenge 1: Postcodes and Suburbs
editAJAX can seem really scary when you're starting out, but the Mozilla team have worked hard to create the AJAX: Getting Started tutorial to help us understand the building blocks of AJAX.
Work your way through the tutorial through to Step 4, making sure you test it out as you go. Once you have Step 4 working, your challenge is:
- Modify the tutorial so that your html page contains three postcodes in your area.
- When a postcode is clicked on, your AJAX will request the corresponding XML file from the server corresponding to that postcode to find and display the suburb using a window Alert.
An example XML file for the suburb Bullaburra might be:
<?xml version="1.0" ?>
<suburb>
<name>Bullaburra</name>
</suburb>
Note: this is not a practical way at all to look up postcodes, it's just an example to build upon. We'll see a much more realistic example of this problem in a later challenge.
- Modify your code so that when a postcode is clicked, the population of that suburb is displayed as well as the suburb name (you'll need to update your XML files slightly to include the population)
- Modifying your code so that the suburb information displays in your actual page (rather than in an alert box). Hint: add an input box with an ID and set it's value from your Javascript code.
- Modify your code so that, instead of text that can be clicked on, your page provides a select drop-down box where the user can select their postcode. When a postcode is selected, your AJAX should then display the corresponding suburb and population info.
- Advanced Challenge: (not for the feint hearted) Instead of separate XML files for each postcode, create a single XML file that contains information for all three postcodes and update your code to use this one file instead.
Challenge 2: Looking up suburbs
editNote: this challenge requires that you are already familiar with PHP, MySQL and how to get info out of a database and into a page.
TODO Guide to Using AJAX and XMLHttpRequest from WebPasties
Resources
editSee also
edit