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 in later weeks.

 

Instructions:

 

  1. Copy your Lab01 files to a new Lab02 directory. Your main file should still be called index.html

2.      Given the examples we saw in class (real web sites and toy examples), spend some time thinking about how you would you would like the AJAX interaction to work on your website.  Plan out the elements you will need, and talk briefly to the instructor about your plan for this.  At a minimum, you will need:

    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.
  1. In the steps below, try to be creative – avoid using precisely the same mechanisms as the in-class examples.  
  2. Create the bare-bones XHTML structure to support your design above – it won’t be all functional, but have the major elements there.
  3. Add some “synchronous” AJAX-like behavior 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 text file – not a script at this point.
  4. Keep the above AJAX feature working, and now add a second AJAX like functionality.  This time, however, make it “asynchronous”, and make the server data XML rather than text. So when finished, you should have two distinct AJAX-like features.

7.      Ensure your page works with Firefox. Having it work on IE is encouraged but not required.

8.      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 Lab01.

3)      Your instructor will assume that your web pages are viewable at http://www.mXXXXXX.it452.cs.usna.edu/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)      A completed assignment coversheet.  Your comments will help us improve the course.

b)      The first page of the output of the W3C validator, as run on the final version of your Lab01/index.html.  This should show that your document correctly validated, but turn it in anyway if you can’t get your page to validate. 

c)      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 – use Crimson Editor vice Notepad if needed for printing.  You could also paste into Microsoft Word etc. if needed.

d)      Printouts of external JavaScript files, if any.