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.

Recall: Fetching XML using Ajax (template)

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

• ajax.responseText contains the data in plain text (a string)
• ajax.responseXML is a parsed XML DOM tree object

  var elms = node.getElementsByTagName("tag");   // get a group of nodes
  var text = node.firstChild.nodeValue;         // get text inside a node
  var attrValue = node.getAttribute("name");    // get an attribute's value
  

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)

• 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, such as peas.
  • The results from recipes.php are in XML format.
• Parse the results and fill the in the following elements:
  • the #main div with a h1 containing the title
  • an img tag with the recipe's image
  • a ul filled with the recipe's ingredients

Exercise XML format

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

<recipe>
	<information>
		<name>Peas with Butter</name>
		<image>https://webster.cs.washington.edu/cse154/sections/ajax/recipe/peas.jpg</image>
		<author>Vance McElmurry</author>
		<category>Entree</category>
		<description serves="4">A simple, but delicious frozen pea recipe.</description>
	</information>
	<ingredients>
		<item amount="1 lb">Frozen Peas</item>
		<item amount="1/4 cup">Water</item>
		<item amount="to taste">Salt</item>
	</ingredients>
	<directions>
		<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>
	</directions>
</recipe>

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:

• the name of the author of the recipe
• the quantities of each ingredient
• the description of the recipe
• ...

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:

<scores>
	<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>
</scores>

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:

(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;
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.

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

• 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.xml and cats.xml. The XML data follows a format such as the following:

<breeds>
	<breed>Alaskan Malamute</breed>
	<breed>Beagle</breed>
	...
</breeds>

Exercise , continued

• 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;
    the file name is the lowercase dog breed with spaces replaced by underscores.
  • For example, Chow Chow has breeds/chow_chow.html and breeds/chow_chow.jpg.
• Part 3: When the user clicks "Next", advance to the next breed.
  • If you have time, 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.

Exercise Solution

You can view the solution javascript here.

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

• Jump to any breed: Make it so that you can click any breed in the list to jump to info about that breed.
• Previous button: Make a "Previous" area (much like "Next") that allows the user to go back to the last breed. Have it show a preview image of the previous breed that will be shown if you click it.