University of Washington CSE 154

Section 9: Ajax

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Exercise : Grade-a-nator

Given this HTML/JS skeleton, add the necessary additional JavaScript code to make the page remember the grades that the user has typed in previously. If the user returns to the page later, these values should be put back into the page. (sample solution)

• Use localStorage to implement this. (slides)
• Start out by just remembering the final exam score.
• Then add code to remember each homework assignment. (Can you do so without redundancy?)

Exercise Solution

You can view the solution JavaScript code here.

Recall: Ajax template

var ajax = new XMLHttpRequest();
ajax.onload = functionName;
ajax.open("GET", "url", true);
ajax.send();
...
function functionName() {
	if (this.status == 200) {   // request succeeded
		do something with this.responseText;
	} else {
		code to handle the error;
	}
}

• lecture slides

Exercise : Ajax Pets (by Alex Miller)

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 Solution

window.onload = function() {
   document.getElementById("puppies").onclick = updatePictures;
   document.getElementById("kitties").onclick = updatePictures;
};

function updatePictures() {
	var animal = "";
	if (document.getElementById("puppies").checked) {
		animal = "puppy";
	} else {
		animal = "kitty";
	}
	var ajax = new XMLHttpRequest();
	ajax.onload = displayPictures;
	ajax.open("GET", "ajaxpets.php?animal=" + animal, true);
	ajax.send();
}

function displayPictures() {
	document.getElementById("pictures").innerHTML = this.responseText;
}

Exercise : Bootloader (by Morgan Doocy)

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 extra features

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

You can view the solution javascript file here.

Exercise : Chat-It (by Eli White)

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. (see next slide and/or Ajax POST slides)

Creating an Ajax POST request

var params = new FormData();
params.append("name", value);
params.append("name", value);

var ajax = new XMLHttpRequest();
ajax.onload = functionName;
ajax.open("POST", "url", true);
ajax.send(params);

• use a FormData object to gather your POST query parameters
• pass the FormData to the request's send method
• method passed to open should be changed to "POST"

Exercise Solution

You can view the solution JavaScript code here.