Data formats

Your choices

• XML
• HTML
• JSON

XML

The X in AJAX

• Returned in the responseXML property
• The server must send the correct header e.g. text/xml
• Can be traversed and manipulated using DOM methods (e.g getElementsByTagName) and properties (e.g. childNode, nodeValue, etc.)
• Example: People profiles (data) (JS)

Pros and cons of XML

• Advantages

  • Human readable
  • Popular

• Disadvantages

  • Finicky client-side DOM manipulation
  • Relatively slow

HTML

• Returned in the responseText property
• Can be dumped into the page using innerHTML
• Example: People profiles (data) (JS)

Pros and cons of HTML

• Advantages

  • Very little client-side processing
  • Fast

• Disadvantages

  • Uses the brute force of the proprietary innerHTML property
  • Not very useful for changing a document in more than one place

Object notation

• Object

  var person = function() {
    this.name = "Jeremy Keith";
    this.website = "http://adactio.com/";
    this.email = "jeremy@adactio.com";
  };

• Object literal

  {"person" : {
    "name" : "Jeremy Keith",
    "website" : "http://adactio.com/",
    "email" : "jeremy@adactio.com"
    }
  }

JSON

• JavaScript Object Notation proposed by Douglas Crockford.
• Allows name/value pairs to be nested just like XML
• Can be accessed using eval
• Example: People profiles (data) (JS)

Pros and cons of JSON

• Advantages

  • Lightweight
  • Some APIS will return JSON (e.g. Yahoo!)
  • Can get around the same-site restriction!

• Disadvantages

  • Not as readable as XML or HTML
  • Potential problems with character encoding and escaping quotes
  • Uses eval() so the source must be trustworthy

The script tag hack

• The URL parameter of the open method must be the same domain.
• JavaScript files referenced in a script element can be hosted on a different domain.
• JSON is JavaScript.
• Use DOM Scripting to change the src attribute of a <script> tag, pointing it to a resource that returns JSON.
• Example: Yahoo! News Search (JS)

Which format is best?

Choose the best format for the job.

• To update many different parts of the current document, XML may be best.
• To retrieve data directly from another server, JSON (and the <script> tag hack) is the only option.
• To update one part of the page, just use innerHTML to insert a fragment of HTML

Next...

Hijax