University of Washington, CSE 190 M

Lab 7: Ajax

Except where otherwise noted, the contents of this document are Copyright 2010 Marty Stepp and Jessica Miller.

original lab idea and code by Kevin Wallace and Jeff Prouty; revised by Brian Le, Victoria Kirst, and Marty Stepp

Valid XHTML 1.1 Valid CSS!

Basic lab instructions

Today's lab

Today we'll write a page that can search data from Urban Dictionary using Ajax.

expected output

Info about Urban Dictionary

Many popular web sites like Google, Flickr, and Facebook allow others to access their data as text and/or XML. For this lab, we will access data from Urban Dictionary, a web site that catalogues slang and social terminology. (NOTE: Some content on Urban Dictionary may be considered offensive.)

We have created a service named urban.php on Webster that serves Urban Dictionary content. Pass it a term parameter, and it returns the term's definition as text. For example, for the term "API":

We're providing you the urban.html file for a page to search Urban Dictionary. Download it to your machine; you will not need to modify it. Write JavaScript code in a file urban.js. The page already links to this file and to the Prototype library.

Exercise : alert a single definition (~10-15 min)

Write JavaScript code so that when a user clicks "Search", the definition of "fnord" appears as an alert.

expected output

Exercise : Any word's first definition (~5-10 min)

Modify your code so that the definition of the word typed in the text box (not always "fnord") is displayed.

expected output

Exercise : Single definition/author from XML (~20 min)

Our Urban Dictionary lookup service can also send data in XML format. The XML data can return multiple definitions, and each definition comes with an example usage and the author's name. To get XML data, pass our service a parameter format, set to xml. The following is an example call and its output:
<entries term="API">
    <entry author="Nathanmx">
            An API is a series of functions that programs can use ...
            Windows uses an api called the Win32 API.  You can access ...
    <entry author="Tyler Menezes">
            Adaptive Pie Interface. Used by various sites to interact with ...
            $urb = new Urban::API;

Exercise , continued

expected output

Exercise : All definitions (~15 min)

Now modify your code to show three paragraphs about each of the definitions of the word.

expected output

Exercise : (h4x0rz only): Tidy up; loading animation

If you finish all of the previous exercises, do some additional work to make the page more robust:

If you finish them all...

If you finish all the exercises, you can add any other content or code you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Great work!