This week you will add basic AJAX functionality to your website. It's not realistic AJAX yet since the response from the server is always the same, but you will lay the groundwork for a fully functional application to come soon.
- Copy your Lab01 files to a new Lab02 directory. Your main file should still be called index.html
- PLANNING: The actual requirements for this lab are to create two AJAX interactions (one synchronous, one asynchronous). However, before deciding what these two interactions will be, spend some time thinking about how you would you would eventually like all of the AJAX interaction to work on your website. Consider the examples we saw in class (real web sites and toy examples). Plan out the HTML elements you will need, and talk briefly to the instructor about your plan for this. You will not be implementing all of this for this lab, but eventually you will need all of the following:
- Some kind of search box where the user can enter a term or terms to search for.
- Some kind of mechanism whereby, in response to user action, multiple pieces of content are loaded from the server and displayed on the page - without refreshing the whole page. The "user action" could be clicking on the search box described above but it could also be something else. For instance, clicking on something to expand it or to get more info or to create some new element.
- There needs to be some mechanism for the user to enter multiple fields of information and have that saved to the server in a database, to be retrieved later.
- ACTUAL REQUIREMENTS for this lab:
- In the steps below, try to be creative - avoid using precisely the same mechanisms as the in-class examples. In particular, no more than one of your interactions can be "add a new row to a table" (like we did in class).
- Create the bare-bones XHTML structure to support your design above - it won't be all functional, but have the major elements there. Don't spend a lot of time on this this week - get working on the interactions!
- Add some "synchronous" AJAX-like interaction to your page. For instance, clicking on "Search" might retrieve data from the server and add it to a list or table. The data from the server should just be a static file (in text or XML format) - not a script at this point. The text file must contain at least 5 instances of whatever kind of data you are retrieving. For instance, if it is a search feature, 5 results. If it is a list of all members on your site, 5 members. Each instance must then show up on your page in its own list item, table cell, or whatever format you are using (do not just text append everything together in a paragraph!).
- Keep the above AJAX interaction working, and now add a second AJAX functionality (one possibility - click on something that was added by the synchronous interaction, causing more detail about it to be provided). This interaction, however, must satisfy the following requirements:
- It is "asynchronous" (unlike the synchronous behavior for the first example)
- The data from the server is in XML format (if you wish, the synchronous interaction above can also use XML). This must again be 5 instances of data in XML format, or 1 instance with 5 unique attributes (e.g., A user's name, location, hobbies, etc.). Basically, make the XML sufficiently interesting that you have to write code to parse it. This asynchronous data must be different from the synchronous data.
- WARNING: an XML document must have a single "root" element that surrounds all of the content. So if you want to have a list of books, you can't have a document that just consists of three <book> elements; you need to place all three of these inside a root element, which you might call <booklist>.
- When finished, you should have two distinct AJAX-like features.
- Ensure your page works with Chrome or Firefox. Having it work on IE is encouraged but not required.
- Ensure all your pages validate and that you have met all requirements.
NOTE: all HTML files must validate as HTML 5 without errors for full credit. The penalty for a file that does not validate is 10%.
- All of your files for Lab 2 should be in a folder called "Lab02" (without the quotes) on the Web drive.
- Your main page should be called "index.html" and placed inside the folder Lab02.
- Your instructor will assume that your page is viewable at http://intranet.cs.usna.edu/~mXXXXXX/it452/Lab02/index.html where XXXXXX is your alpha number.
- All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after you have submitted your assignment.
- Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):
- Completed assignment cover and grading sheets.
- The first page of the output of the validator, as run on the final version of your it452/Lab02/index.html. This should show that your document correctly validated, but turn it in anyway if you can't get your page to validate.
Tips on Debugging
- Web server required. Make sure that the URL you are using shows "intranet.cs.usna.edu" (not your U drive, W drive, etc.) -- if you open your page directly from a network drive/file interface, AJAX can't work.
- Check permissions. Don't forget to change permissions if you make a new file (see Lab 01).
- Verify permissions. Verify small pieces of your lab at once. For instance, if you a text file "dummy.txt", try to load
http://intranet.cs.usna.edu/~mXXXXXX/it452/Lab02/dummy.txt with your browser. Does it show the right file?
- Verify XML. Remember that your XML file must have a .xml extension, and be valid XML. Try loading it from the browser
(something like http://intranet.cs.usna.edu/~mXXXXXX/it452/Lab02/dummy.xml) and verify that the browser recognizes it as XML (you should be able to click on the elements to open/close). If not, the AJAX "responseXML" field is not going to
- Watch your URL! For your lab itself, pay careful attention to the URL at the top of your browser. It should look like:
If you instead see a question mark in the URL, and then some other parameters, like this:
then what happened (at least once) is that you clicked submit on a form to try and do AJAX, but you had an error in your JavaScipt, so the needed "return false" was never reached, and the browser tried to "submit" your form
(which is NOT what you want for AJAX). Do this:
- In your browser, erase the question mark and everything after it; hit return to reload your page.
- Try clicking again, and look -- did the URL change?
- If the URL did *not* change: debug in the normal way (use the error console).
- If the URL *did* change, debugging is a little trickier -- because the error console is probably erased when the URL changes to a new page. See directions below about "catching exceptions." (this will show you the error before the page can chnage)
Follow these directions