University of Washington, CSE 154

Lab 9: Urban Dictionary (Ajax, 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.

thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.

Valid HTML5 Valid CSS

Basic lab instructions

Today's lab

Many web sites like Google, Flickr, and Facebook allow you to access their data as text and XML. For this lab we will use Ajax to access data from Urban Dictionary, a web list of slang and social terminology. (NOTE: Some content on Urban Dictionary may be considered offensive.)

expected output

Info about Urban Dictionary

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

The service returns an HTTP error 410 if the term is not found.

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.

Exercise : alert 'fnord' definition (~10-15 min)

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

expected output

Recall: Making an Ajax request (template)

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

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 : Display all definitions 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 all, set to true. The following is an example call and its output:

<entries term="API">
  <entry defid="689981" author="Nathanmx" thumbsup="219" thumbsdown="22">
    <definition>
      An API is a series of functions that programs can use ...
    </definition>
    <example>
      Windows uses an api called the Win32 API.  You can access ...
    </example>
  </entry>

  <entry defid="2650554" author="Tyler Menezes" thumbsup="37" thumbsdown="49">
    <definition>
      Adaptive Pie Interface. Used by various sites to interact with ...
    </definition>
    <example>
      $urb = new Urban::API;
      $urb->ServePie('me');
    </example>
  </entry>
</entries>

Exercise , details

expected output

Modify your code to display each of the definitions of the word:

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

Exercise : XML, all definitions by an author (~20 min)

Our Urban Dictionary lookup service can also send data in XML format that lists all terms for which there is a definition submitted by a given author. To get this data, instead of term, pass our service a parameter author, set to the username of the author of interest. The following is an example call and its output:

<words author="silly_walk">
    <word entry="ATM" defid="825904 "/>
    <word entry="moog" defid="815030 "/>
    <word entry="OMC" defid="1012620 "/>
    <word entry="OFC" defid="1012612 "/>
</words>

Exercise , details

expected output
<div id="related">
    <h2>All entries by silly_walk</h2>
    <p>ATM, moog, OMC, OFC</p>
</div>

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!