Fordham, the Jesuit University of New York

CISC 3300 L01

Internet & Web Programming

Spring, 2015

Dr. Robert K. Moniot


back Back to course home page

Web Project 12: AJAX

Assigned: Monday, April 27
Due date: Monday, May 4
Points: 10

The aim of this project is to implement a simple AJAX application.

Background

For this project, you should again have a fictional enterprise in mind. It can be the same one as used for Project 8 or 10. The aim is to provide a page where information about the items (e.g. products) offered by the enterprise can be displayed, without using the form submit/response method. Instead, the page will have an area where information about the different items appears, and the user can cycle through the different items.

Specifications

For this project, no server side scripting is needed, so name the main project page file project12.html. The page needs style rules, which go in an external stylesheet file named project12.css. The JavaScript code goes in an external file named project12.js. Also include jQuery from a CDN.

The page contains an area with some fixed content, describing the purpose of the page and some information about the enterprise. Below it or to one side, place a content area of fixed size (so the size does not change when different content is loaded) that will have information about the different items. You may use the same item information that you used for Project 8 or 10, but in any case at least 3 different items. In a convenient location place two buttons, labeled "Prev" and "Next". Clicking on these buttons changes the content in the item information area. The series of items should cycle: when the last item is displayed, "Next" returns to the first item, and likewise when the first item is displayed, "Prev" goes to the last item. See screenshot below for an example layout.

Use AJAX (via jQuery) to load content into the item area. The content for different items is stored in text/html files like the first jQuery biography example in the AJAX lectures. There does not need to be an error handler.

Use unobtrusive techniques, and jQuery methods rather than native JavaScript wherever applicable.

Note: Your project page must pass the W3C validator with no more than the unavoidable warning about the experimental HTML5 conformance checker.

Implementation notes

The simplest way of keeping track of the items is to assign each one a number, from 1 up to the number of items. (Or, if you prefer, use 0 up to n-1.) Store the value of the currently displayed item in a variable. When Next is clicked, this variable is incremented, but if it goes past the maximum it is returned back to the lowest value; and similarly for Prev. If you name the content files "1.html", "2.html", etc., then the URL to load can be constructed simply by concatenating the item number with ".html". Alternatively, the file names can be put into an array, and obtained by indexing the array using the current item number. (For this solution, numbering items from 0 is simpler.)

Example

Minimal example of a project page. I'm sure you can do much better on styling and appearance!

project 12 screenshot