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:
- 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 – read about this in later
steps below). 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:
- 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 text file – not a script at this point.
- Keep the above AJAX interaction
working, and now add a second AJAX
like functionality (one possibility – click on something that was added
by the synchronous interaction, causing more detail about it to be
provided). 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.
- Ensure your page works with 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 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://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 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.
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.