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 text file – 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 in (c))
      2. The data from the server is in XML format (if you wish, both interactions can use XML, but you need to use both synchronous and asynchronous behavior). 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.
    5. When finished, you should have two distinct AJAX-like features.
    6. Ensure your page works with Firefox or Chrome. 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 XHTML 1.1 without errors for full credit. The penalty for a file that does not validate is 10%.

 

Deliverables

1)      All of your files for Lab02 should be in a folder called "Lab02" (without the quotes) on the Web drive.

2)      Your main page for Lab02 should be called "index.html" (without the quotes) and placed inside the folder Lab02.

3)      Your instructor will assume that your web pages are viewable at http://intranet.cs.usna.edu/~mXXXXXX/Lab02/index.html where XXXXXX is your alpha number. You should check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

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):

a)      Completed assignment cover and grading sheets.

b)      The grading sheet (see calendar)

c)      The first page of the output of the W3C validator, as run on the final version of your 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. 

d)      A printout of the source to your Lab02/index.html file (not the rendered page that you normally see with Internet Explorer/Firefox).   Truncated lines are not acceptable.

e)      Printouts of external JavaScript files, if any.