Web Programming Step by Step
Discussion Section 7: Pet-It
Ajax

section idea/code by Stefanie Hatcher

Today we will write a page "Pet-It" that shows information about breeds of cats and dogs using Ajax. The HTML and CSS are already written; start from a skeleton petit.html and petit.js. Add the JavaScript event-handling and Ajax code. Click the following image to run our sample solution, written by Stefanie Hatcher: (solution JS code petit.js)

All required files are on Webster in the directory http://webster.cs.washington.edu/sections/09sp/section7/, or you can download them as section7.zip.

• Part 1: When the user selects "Dog" or "Cat", show a bulleted list of all breeds. Lists of breeds are stored on the server in files named dogs.txt and cats.txt.
• Part 2: When the user selects "Dog" or "Cat", show the image and info about the first breed. Each breed has an HTML and JPG file on the server; for example, Chow Chow has breeds/chow_chow.html and breeds/chow_chow.jpg.
• Part 3: When the user clicks "Next", advance to the next breed. Highlight the current breed (give its list item the class selected). If the user reaches the last breed and clicks Next, wrap around to the start.
• Other: If you finish all of the previous features, make it so that you can click any breed in the list to jump to info about that breed. Or make a "Previous" area (much like "Next") that allows the user to go back to the last breed.

References: Ajax.Request, Ajax.Updater, Ajax options, JSLint