Ajax Makeover : Client-side data management with XML (part 1)

As I stated before, to build an application that is as responsive as traditional desktop applications, we need to cut down on server accesses. With that objective in mind, we are going to build an Ajax engine that can maintain a complete representation of the state of the Time Tracking application. The engine will process user inputs, apply changes and repaint the interface without any server access (be it a page load or a XMLHttpRequest).

Let’s clarify a bit what the application is supposed to do:

1. Maintain a list of user-defined tasks.
2. Keep track of the time spent since the task was started (ie. created in the application).
3. Allow the user to ‘freeze’ a task that he has temporarily put aside.
4. Allow the user to leave the application with running or frozen timers and come back later.
5. Report the time spend on each task.

Loading XML Data

The state of our application will be maintained in a XML document, resident in the browser’s memory. That XML document will be populated with content loaded from the server when the application starts.

For a new user with an empty task list, the XML is really simple:

<?xml version="1.0"?>
<tasklist name="" >
</tasklist>

<tasklist> is our root element. The ‘name’ attribute will be used as a title for the page.

The Ajax engine, which is nothing more than a well designed javascript, loads that XML using this code:

  var xmlTaskList = Sarissa.getDomDocument();
  xmlTaskList.onreadystatechange = loadHandler;
  xmlTaskList.load("/time-tracker/xml/tmpl_tasklist.xml");

  function loadHandler() {
    if(xmlTaskList.readyState == 4) {
       // ... paint user interface ...
    }
  }

The Sarissa object is a wrapper that offers a unified cross-browser syntax for everything XML. It’s a convenient low-level tool, not an application framework.

The Sarissa.getDomDocument method creates a new instance of a DOM document. The exact same kind of document that holds the representation of a web page, but this one is not rendered and can conveniently hold any type of XML data.

Finally, the Document Object Model offers all kind of methods to manipulate the document. We’ll be using extensively appendChild, removeChild, getAttribute, setAttribute and to a lesser extent createElement and createCDataSection, but this will covered in the second part of this article.

The next article of the Ajax Makeover series will cover the interface rendering using XSLT. That’s when the benefit of client-side XML will reveal itself, so don’t miss it

Technorati Tags: ajax, xml, xlst, zero-latency