CSE 154

Section 4: AJAX with JavaScript

Exercise 1: Ajax Pets

Create an AJAX-powered gallery of pet images that allows you to switch between kitty and puppy images without reloading the page. You can view the finished product here.

You are provided with the following HTML file, ajaxpets.html:

You must write a JavaScript file ajaxpets.js which requests data from the ajaxpets.php script on webster with the parameter animal of value kitty or puppy, depending on which radio button is selected, and injects this into the #pictures div.

Exercise 1: Solution

Solution (JavaScript)

Exercise 2: Bootloader

Write a "Boot Loader" page that displays a randomly chosen fashionable boot when the "Load Boot" button is clicked. Start from this HTML skeleton. (sample solution)

  • Write the JavaScript code to make an Ajax request to loader.php on Webster when the 'Load boot' button is clicked.
  • The PHP service does not require any query parameters. Its output is simply a string containing a URL of an image of a random boot image to display.
  • Whatever URL the loader service returns, inject a new img tag into the page that points to that image.

Exercise 2: Bootloader Extras

  • The PHP service is slow; it takes 2-3 seconds to return the boot output. Make the page look better while it is waiting by temporarily displaying a "loading" animation. The page contains an element with id of loading that can be used to show an animated image while the page is waiting. Set its display DOM CSS property appropriately.
  • The PHP service is flaky; every 5-6 requests, it crashes with an HTTP error 500. Make your page check for this and display an alert on errors so the user knows something went wrong. Don't try to display the boot image when there is an error.

Exercise 2: Solution

Solution (JavaScript)

Exercise 3: Chat-It

Given this HTML skeleton, write the necessary JavaScript code to make the page into a chat program. Read and submit chat messages by making Ajax requests to the provided (chatit.php) on Webster. (sample solution)

  • Reading: every 5 seconds, make an Ajax GET request to ask the PHP script for all messages. Optional parameters: reverse returns output in reverse-chronological order; limit returns only that many most recent posts
  • Submitting: When the 'Send!' button is clicked, make an Ajax POST request to the PHP script with the parameter msg to submit a message.

Exercise 3: Solution

Solution (JavaScript)

Exercise 4: Recipes

Given this HTML file, write an accompanying recipe.js that displays recipe information on the page with ajax. When a radio button is clicked make an ajax GET request to recipes.php with a parameter r that has the value of the radio button.

The results from recipes.php is in json format. You must parse the results and fill the #main div with with a h1 containing the title, an img tag with the recipe's image and a ul filled with the recipe's ingredients. Check out a working example here.

Exercise 4: Recipes

The result json from recipes.php has the following structure (and some extra stuff): 

                                    
{
  "recipe": {
    "information": {
      "name": ...,
      "image": ...
    },
    "ingredients": {
      "item": [
        {
          "amount": ...,
          "text": ...
        },
        ...
        {
          "amount": ...,
          "prep": ...,
          "text": ...
        }
      ]
    },
    "directions": {
      "step": [
        ...,
        ...,
        ...
      ]
    }
  }
}

Exercise 4: Solution

Solution (JavaScript)

Exercise 5: Pet-It

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

Add the JavaScript event-handling and Ajax code. Click the following image to run our sample solution: (solution JS code petit.js)

expected output

Exercise 5: Pet-It

All required files are on Webster http://webster.cs.washington.edu/cse154/sections/9/petit. Breeds are located in the subdirectory breeds/ relative to the previous URL.

  • 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.json and cats.json.
  • 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.

Exercise 5: Pet-It

  • 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.

Exercise 5: Solution

Solution (JavaScript)