Javascript EM228 – Project 3 Instructions - 74707

Solution Posted by


Rating : (19)A+
Solution Detail
Price: $20.00
Request Description



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.




This project is comprised of three files: an XHTML file, a JavaScript file, and an XML file:





You will be modifying both the Project03.html file and the Project03.js file in order to complete the project.  You will not need to modify the states.xml file as this file is just the source of the data used by the JavaScript file.  The provided project will run without error.  There are no hidden typos or logic errors in the provided files that need fixing before you can proceed with completing the 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


These characteristics provide a highly structured environment for information exchange.  But, note that this structure brings with it some work.  JavaScript code must navigate the structure in order to find the data it needs.  This navigation is through nodes.  The JavaScript code must navigate its way down the structure to the node that it needs.  Multiple nodes in the structure at the same level can have the same names.  So, it’s easy to retrieve all the data from a certain level by using the getElementsByTagName() method (specifying the tag name you need).  You then end up with an array with all the data elements from that level.  If they have different names, you will end up with only the data in the tag group that you specify.  You can refine your scope as you descend the structure by specifying a higher-level tag.  Then only the lower-level tags/data under that higher-level tag will be included in your results.  This allows you to successively narrow the scope of your results until you have just the results you want.


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")[0] 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.

2.      Add the supporting onclick event handlers in the JavaScript code to yield the appropriate region listings when their associated buttons are clicked.


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:

  • The original “All States” and “Northern States” buttons still work correctly
  • The new buttons you added display the state lists for their respective regions correctly.





  • Zip up your Project03 files and submit them through the portal under the Project 3 assignment.
Solution Description