Project 3 consists of completing the provided Ajax application that uses data supplied in an XML file. Use the information in the EM228-Project3SupplementalInstructions-UsingIIS.docx to set up and configure a local website to run this project.
The project as provided displays the user interface page below:
The XML file has a number of states listed in it. They are further broken down into <north>, <south>, <east>, and <west> subgroups (i.e., Northern, Southern, Eastern, and Western states) in the XML file. When the application starts, it displays the above page. When the user clicks one of the two buttons, the app makes an Ajax asynchronous call to the server to retrieve the XML file. It then determines which button was clicked and displays either all the states in the XML file or just the states that have been defined as being in the <north> states group. The list of states displays in a <div> tag block on the main page, not on a new page – so a full page reload is not required. As an example, here is how the page would look after the “Northern States” button was clicked:
This may not be fancy, but for our purposes, it is sufficient. If the user clicked the “All States” button, all the states in the XML file, regardless of region, would display in an “All States” list.
Running This Project Locally Using IIS
Please see the Project03SupplementalInstruction-UsingIISs.doc for details on using Internet Information Service to set up a local(on your computer) website where you can run this project.
What you will be doing for this project is implementing the missing three buttons that allow the user to display the <south>, <east>, and <west> state groups found in the XML file. So, the initial page should look like the screen shot below when these options are implemented.
Clicking any of the new buttons should provide a list of states in that group formatted in the same way as the “Northern States” group was. So for example, clicking the “Southern States” button would produce a states list as shown below:
You are working with two techniques in this project. The first is Ajax. The provided Ajax code retrieves the states.xml XML file for you after a button is clicked, so you don’t have to change anything in this code. Because you’re using Ajax, you can easily update part of a Web page (in this case, the <div> block with a name and id of statesList) without reloading the entire page. Additionally, if this was a more complex page, the asynchronous nature of the Ajax call used for this part would allow the user to go on and do other things on the page while Ajax waited for the XML data to come in from the server and subsequently built and displayed the requested states list.
The second technique you will be working with in the project is XML. XML has two major beneficial characteristics (aka, correctness levels):
1. It is well-formed: every start tag must have an end tag
2. It is valid: conforms to semantic rules – either user-defined or defined in an XML schema
The above applies to this project. The widest view (i.e., highest node level) of data is the <states> view/level in the XML file structure. It includes all the states regardless of what region they might belong to. The lstAllStates() function operates at the <states> view/level so it accesses and lists all the states in the XML file. The next lower/narrower view/level can be thought of as a regional view/level. This subdivides all the states further into <north>, <south>, <east>, and <west> regions. The listNorthStates() function operates at this view/level. If you choose one of these regions (e.g., via the xmlDoc.getElementsByTagName("north") spec), you then have access to only the states in that region.
Given the above info, you need to do two things to complete this project:
1. Add the buttons to the form to support the <south>, <east>, and <west> regions. This will include referencing additional onclick handlers.
Alternatively, you could have all four region buttons use the same event handler and make that event handler “smarter” than the original one by having it figure out which region button was clicked and display that region’s states. This approach would still use the original listAllStates() supporting function.
Test your resulting app to make sure: