University of Washington CSE 154

Section 10: Ajax and XML

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: Fetching XML using Ajax (template)

var ajax = new XMLHttpRequest();
ajax.onload = functionName;"GET", url, true);
function functionName() {
	do something with this.responseText or this.responseXML;

Exercise : Recipes (by Roy McElmurry)


Given this HTML file, write an accompanying recipe.js that displays recipe information on the page with Ajax. (sample solution)

Exercise XML format

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

		<name>Peas with Butter</name>
		<author>Vance McElmurry</author>
		<description serves="4">A simple, but delicious frozen pea recipe.</description>
		<item amount="1 lb">Frozen Peas</item>
		<item amount="1/4 cup">Water</item>
		<item amount="to taste">Salt</item>
		<step>Place the frozen peas and water in a microwavable bowl.</step>
		<step>Place the lid on th ebowl and cook in th emicorwave for 4 minutes.</step>

Exercise Solution

You can view the solution javascript here.

If you finish the basic exercise, try adding more of the recipe info to the page, such as:

Exercise : Grade-a-nator Revisited


Given this HTML/JS skeleton, add the necessary additional JavaScript code to use Ajax requests to save and load the student's grades from the server. This is similar to the previous version of this problem that used localStorage, but saving the grades on the server means the student can see them from any computer. (sample solution)

(see next slides)

Exercise , Part A: Lookup

Make it so that when the Look Up button is clicked, any saved scores on the server for the current user ID are loaded into the text boxes on the page. Make an Ajax GET request to grades.php with a parameter uwnetid. Test your code with user ID test for now. The result XML from grades.php has the following structure:

	<score item="hw1">10</score>
	<score item="hw4">22</score>
	<score item="hw5">9</score>
	<score item="hw7">17</score>
	<score item="final">58</score>

The server will send back a plain text response to your POST request letting you know what happened. Inject this text into the page in the area with the id of output.

Exercise , Part B: Save

Make it so that when the Save button is clicked, any non-blank scores typed into the page are saved on the server. Make an Ajax POST request to grades.php with parameter names/values such as:

name value
uwnetid jsmith
hw1 15
hw3 23
final 87

(see next slide for syntax of making an Ajax POST request)

Creating an Ajax POST request

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

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

Exercise Solution

You can view the solution JavaScript code 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. Add the JavaScript event-handling and Ajax code. (sample solution)

Exercise , Part 1

All required files are on Webster (see directory). Breeds are located in the subdirectory breeds/ .

	<breed>Alaskan Malamute</breed>

Exercise , continued

Exercise Solution

You can view the solution javascript here.

If you finish the basic exercise, try adding more features to the page, such as: