University of Washington CSE 154

Section 8: Ajax & Web Services

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

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 url = "//webster.cs.washington.edu/cse154/sections/ajax/pets/ajaxpets.php?animal=" + animal;
	var ajax = new XMLHttpRequest();
	ajax.onload = displayPictures;
	ajax.open("GET", url, true);
	ajax.send();
}

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

Exercise : Boot Loader (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 : Pet-It (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 : Pet-It

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

Exercise : Pet-It

Exercise Solution

You can view the solution javascript here.

Exercise : Address Book, Client-Side (by Alex Miller)

screenshot

Write the JS code to connect to a server-side JSON address book called addressbook.php. Start from this HTML. (sample solution) (solution)

Exercise : Address Book, Server-Side (by Alex Miller)

screenshot

Write the PHP code to manage an address book using JSON. You are given the HTML and JS. The JS code sends requests to your addressbook.php web service that reads and saves address data. (sample solution) (solution) Write the PHP file, addressbook.php, that provides the following behavior:

You may assume that any necessary parameters are passed and are in valid formats.

Exercise : Prime Factors XML (by Eli White)

Write a PHP web service factors-xml.php that computes and outputs prime factorization of integers as XML. (sample solution) (solution code) Provide the following behavior:

Exercise : Prime Factors JSON (by Eli White)

Write a PHP web service factors-json.php that computes and outputs prime factorization of integers as JSON. (sample solution) (solution code) Provide the following behavior: