Structured Data: XML and JSON

Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)

Erik Wilde, UC Berkeley School of Information
2010-02-08

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde: Structured Data: XML and JSON

Contents

Erik Wilde: Structured Data: XML and JSON

(2) Abstract

Many mobile applications are based on communications with a service. In most cases, these communications are based on structured data, with the client receiving and/or sending structured data to a service. The two most popular data formats for exchanging structured data in use today are the Extensible Markup Language (XML) and the JavaScript Object Notation (JSON). This lecture explains and compares these two formats, and is the foundation for the following lectures about Content Syndication and Ajax.



Erik Wilde: Structured Data: XML and JSON

(3) Dynamic HTML (DHTML)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <script src="jquery.js" type="text/javascript"></script>
  <script>
   $(document).ready(function() {
    $("p").click(function() {
     $(this).fadeOut(5000, function(){
      $(this).after("<p>... and a new one appears.</p>");
     });
    });
   });
  </script>
 </head>
 <body>
  <p>If you click on this paragraph, it fades away ...</p>
 </body>
</html>


Erik Wilde: Structured Data: XML and JSON

(4) Ajax = DHTML + HTTP



Erik Wilde: Structured Data: XML and JSON

(5) Ajax and DHTML

Comparison of Ajax and DHTML

Erik Wilde: Structured Data: XML and JSON

(6) JavaScript and XML



Extensible Markup Language (XML)

Outline (Extensible Markup Language (XML))

  1. Extensible Markup Language (XML) [8]
  2. JavaScript Object Notation (JSON) [5]
Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(8) XML Use Cases



Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(9) Markup?



Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(10) Basic Concepts

<?xml version="1.0" encoding="UTF-8"?>
<element>
 <subelement attribute="value">Content</subelement>
 <subelement a2="value2">More Content</subelement>
 <empty-element a3="v3"></empty-element>
 <empty-element a4="v4" a5="v5"/>
</element>


Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(11) Tree Syntax



Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(12) Elements



Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(13) Attributes

 <section id="xml" author="bob">
  <title>Extensible Markup Language (XML)</title>
  <p>XML is based on SGML (Section <ref name="sgml"/>) ...</p>
  <p type="example">XML can be used ...</p>
  <section id="xml-syntax" author="dret">
   <title>XML Syntax</title>
   <p>Section <ref name="sgml-syntax"/> describes ...</p>
  </section>
 </section>


Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(14) Attribute Syntax



Extensible Markup Language (XML) Erik Wilde: Structured Data: XML and JSON

(15) The Price for Markup

<li>Attribute using both kinds of quotes: <code>&lt;elem attr="Single ' and Double &amp;quot;"/></code></li>


JavaScript Object Notation (JSON)

Outline (JavaScript Object Notation (JSON))

  1. Extensible Markup Language (XML) [8]
  2. JavaScript Object Notation (JSON) [5]
JavaScript Object Notation (JSON) Erik Wilde: Structured Data: XML and JSON

(17) XML Example

<feed xmlns="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:georss="http://www.georss.org/georss" xmlns:woe="http://where.yahooapis.com/v1/schema.rng" xmlns:flickr="urn:flickr:" xmlns:media="http://search.yahoo.com/mrss/">
 <title>The MobApp2010 Pool, with geodata</title>
 <link rel="self" href="http://api.flickr.com/services/feeds/geo/?g=1313291@N20&amp;lang=en-us&amp;format=atom"/>
 <link rel="alternate" type="text/html" href="http://www.flickr.com/photos/"/>
 <id>tag:flickr.com,2005:/photos/public/group/1313291@N20/geo/</id>
 <icon>http://l.yimg.com/g/images/buddyicon.jpg#1313291@N20</icon>
 <subtitle/>
 <updated>2010-01-31T06:10:25Z</updated>
 <generator uri="http://www.flickr.com/">Flickr</generator>
 <entry>
  <title>DSC00809</title>
  <link rel="alternate" type="text/html" href="http://www.flickr.com/photos/47030217@N06/4318229442/"/>
  <id>tag:flickr.com,2005:/photo/4318229442</id>
  <published>2010-01-31T06:10:25Z</published>
  <updated>2010-01-31T06:10:25Z</updated>
  <dc:date.Taken>2010-01-30T21:14:39-08:00</dc:date.Taken>
  <content type="html">&lt;p&gt;&lt;a href=&quot;http://www.flickr.com/people/47030217@N06/&quot;&gt;stoodle246&lt;/a&gt; posted a photo:&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;http://www.flickr.com/photos/47030217@N06/4318229442/&quot; title=&quot;DSC00809&quot;&gt;&lt;img src=&quot;http://farm5.static.flickr.com/4028/4318229442_5ac597fdf5_m.jpg&quot; width=&quot;240&quot; height=&quot;180&quot; alt=&quot;DSC00809&quot; /&gt;&lt;/a&gt;&lt;/p&gt;</content>
  <author>
   <name>stoodle246</name>
   <uri>http://www.flickr.com/people/47030217@N06/</uri>
  </author>
  <link rel="enclosure" type="image/jpeg" href="http://farm5.static.flickr.com/4028/4318229442_e8ac9d23aa_o.jpg"/>
  <georss:point>37.873633 -122.256975</georss:point>
  <geo:lat>37.873633</geo:lat>
  <geo:long>-122.256975</geo:long>
  <woe:woeid>55858022</woe:woeid>
 </entry>


JavaScript Object Notation (JSON) Erik Wilde: Structured Data: XML and JSON

(18) JSON Example

{
 "title":"The MobApp2010 Pool, with geodata",
 "link":"http://www.flickr.com/photos/",
 "description":"",
 "modified":"2010-01-31T06:10:25Z",
 "generator":"http://www.flickr.com/",
 "items":[
  {
   "title":"DSC00809",
   "link":"http://www.flickr.com/photos/47030217@N06/4318229442/",
   "media":{
    "m":"http://farm5.static.flickr.com/4028/4318229442_5ac597fdf5_m.jpg"
   },
   "date_taken":"2010-01-30T21:14:39-08:00",
   "description":"<p><a href=\"http://www.flickr.com/people/47030217@N06/\">stoodle246<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/47030217@N06/4318229442/\" title=\"DSC00809\"><img src=\"http://farm5.static.flickr.com/4028/4318229442_5ac597fdf5_m.jpg\" width=\"240\" height=\"180\" alt=\"DSC00809\" /><\/a><\/p> ",
   "published":"2010-01-31T06:10:25Z",
   "author":"nobody@flickr.com (stoodle246)",
   "author_id":"47030217@N06",
   "tags":"",
   "latitude":"37.873633",
   "longitude":"-122.256975"
  },


JavaScript Object Notation (JSON) Erik Wilde: Structured Data: XML and JSON

(19) Object Notation



JavaScript Object Notation (JSON) Erik Wilde: Structured Data: XML and JSON

(20) JSON via URI Parameter



JavaScript Object Notation (JSON) Erik Wilde: Structured Data: XML and JSON

(21) JSON via Content Negotiation



Erik Wilde: Structured Data: XML and JSON

(22) Conclusions



2010-02-08 Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)