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.

Valid HTML5 Valid CSS

IMPORTANT notes this week

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;
	}
}

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)

Exercise extra features

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)

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);

Exercise Solution

You can view the solution JavaScript code here.

Exercise : Recipes (by Roy McElmurry)

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 xml 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 : Recipes

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

<recipe>
	<information>
		<name></name>
		<image></image>
	</information>
	<ingredients>
		<item amount=""></item>
		...
	</ingredients>
	<directions>
		<step></step>
		...
	</directions>
</recipe>

Exercise Recipes

You can view the solution javascript here.

Exercise : Petit (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 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 Petit

All required files are on Webster http://webster.cs.washington.edu/cse154/sections/9/petit, or you can download them as section9.zip. Breeds are located in the subdirectory breeds/ relative to the previous URL.

Exercise Petit

Exercise Solution

You can view the solution javascript here.