Lab 2
AJAX Basics

Introduction

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.

Instructions

  1. Copy your Lab01 files to a new Lab02 directory. Your main file should still be called index.html
  2. 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:
    1. Some kind of search box where the user can enter a term or terms to search for.
    2. 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.
    3. 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.
  3. ACTUAL REQUIREMENTS for this lab:
    1. 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).
    2. 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!
    3. 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!).
    4. 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:
      1. It is "asynchronous" (unlike the synchronous behavior for the first example)
      2. 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.
      3. 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>.
    5. When finished, you should have two distinct AJAX-like features.
    6. Ensure your page works with Chrome or Firefox. Having it work on IE is encouraged but not required.
    7. 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%.

Deliverables

  1. All of your files for Lab 2 should be in a folder called "Lab02" (without the quotes) on the Web drive.
  2. Your main page should be called "index.html" and placed inside the folder Lab02.
  3. 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.
  4. 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.
  5. Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):
    1. Completed assignment cover and grading sheets.
    2. 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.
    3. A printout of the source to your Lab02/index.html file, and printouts of external JavaScript files, if any. Print 4 pages per sheet, "Down, then right" order.

Tips on Debugging