,

Lab :

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, XML, and/or JSON. 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.responseText or this.responseXML;
}

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

Our Urban Dictionary lookup service can also send data in JSON format that lists all terms for which there is a definition submitted by a given author. To get this JSON 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:

{
  "author": "silly_walk",
  "dictionary": "Urban Dictionary",
  "entries": [
    {"word": "ATM", "defid": "825904"},
    {"word": "moog", "defid": "815030"},
    {"word": "OMC", "defid": "1012620"},
    {"word": "OFC", "defid": "1012612"}
  ],
  "school": "University of Washington",
  "timestamp": "Thu 2012 Nov 29, 3:52:41 am"
}

Exercise , details

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!