COMP249 Web Technology

Tutorial - Week 12

Answer the following questions and hand in your answers in a text file (Notepad .txt) via WebCT before 9am Tuesday, May 27th.

The X in AJAX stands for XML but it has become common for AJAX based applications to use other formats for exchanging data. In particular, JSON (JavaScript Object Notation) is widely favoured. Find out what JSON is, give a brief description and summarise why it is preferred over XML.

JSON is essentially javascript data structures sent down the line. They can be directly evaluated and so require no extra parsing, although it is common to use a parser to prevent unsafe evaluation of arbitrary code -- even then it is said to be faster to parse than XML. JSON is designed for sending simple data structures whereas XML is a general purpose language.
Your AJAX server side script is designed to return the details of users stored in a database. It gets a query for the details for user 'steve' and returns the data: name is 'Steve Cassidy', age is 21, friends are 'bob' and 'jane'. Give an example of how this data might be returned as:
1. XML
2. JSON
XML: friends could be encoded in separate elements as here or as a space separated list. Advantages of this version is that there is no more parsing to be done beyond the XML parsing.
```
<user>
  <name>Steve Cassidy</name>
  <age>21</age>
  <friend>bob</friend>
  <friend>jane</friend>
</user>
      
```
The JSON version is more compact and just as expressive.
```
      {"name": "Steve Cassidy", "age": 21, "friends": ["bob", "jane"]}
      
```
Once your AJAX client side javascript has the data above, it must update the current page with the details. Assume that you have the following HTML fragment in your page:
```
<ul>
    <li id="name"></li>
    <li id="age"></li>
    <li id="friends"></li>
</ul>
      
```
Write javascript code to insert values from your XML or JSON data into the HTML page.
The basic code is to get the data from eg. the XML and insert it into the HTML, examples are in my slides.
```
xmlDoc = http.resultXML /* get the result of the XMLHttpRequest */
name = xmlDoc.getElementsByTagName('name')[0].value
document.getElementById('name').innerHTML = name
      
```
If it were JSON then the getting the data is even easier assuming a json parser called parse:
```
data = parse(http.resultText)
name = data['name']
...      
      
```

Additional topics for discussion in the tutorial (not for handing in):

What is Web 2.0? Discuss whether it really means anything or is just a load of hype. Choose two sites that might be considered Web 1.0 (old web) and Web 2.0 and list the interesting differences between them.

This could be a good group discussion question - split into groups and spend 5 mins coming up with a list. There are links in the lecture notes giving a link to an O'Reilly article that tries to define Web2.0 by listing sites and differences. There is no correct answer of course, just an interesting discussion point on where the web has come over the last few years.
One of the differences with Web 2.0 is said to be open access to data and open interfaces to services over the web. If our bookmarker application (assignment 1) was to be a good Web 2.0 site, what could be done to make the data easily available eg. for mashups?

You can take a look at del.icio.us for some ideas since it was the inspiration for bookmarker. XML feeds of user bookmarks are an obvious start but also XML feeds for tags and other searches. Then there is the ability to make new bookmarks by POSTing XML to the site without having to go through the form. Some of the XML could be RSS so we feed an RSS feed of the latest ten bookmarks made by a person.

Comments to: comp249-admin@ics.mq.edu.au

Department of Computing

Local Navigation

COMP249 Web Technology

Tutorial - Week 12

Copyright & Site information