Here is a little article on Persistent AJaX (P-AJaX) I will be publishing:

---

Persistent AJaX

Applications using Asynchronous JavaScript

There are a growing number of applications that use Asynchronous JavaScript with the XMLHttpRequest object to dynamically update the contents of the user interface. This style of application creation is commonly referred to as AjaX and it is used widely for web based applications. Typically these application can only be used while the client is connected to the internet, since they update the content of the user interface dynamically. A big benefit of AjaX applications is that they can present a very rich user interface and can be used across a large variety of platforms and browsers.

At the same time, it is possible to use similar techniques for creating dynamic applications that are hosted on a local machine and do not require a connection to a server. Such applications tend not to use the XMLHttpRequest object, since network connections are not used.

The boundary of connected and disconnected applications is usually not crossed: either an application requires a network connection or it does not. However, there are many applications that can operate in connected and in disconnected mode, such as email, calendar, etc. Users are usually online, but also take the application to places where network connections are not available and use them in an offline mode.

This paper describes a pattern to create AjaX applications that can be used in connected and in disconnected mode. Ideally, a Persistant AjaX (P-AJaX) application and its data could be stored on a portable mass storage device, such as a USB “thumb drive,” and taken to any computing platform whether connected or not.

Connection State Discovery

It is important to determine for an application whether it is connected to the server or not. This can be done very easily by sending an initial XMLHttpRequest synchronously and setting a boolean variable to online or offline:

var online = false;

function testState() {

req.onreadystatechange = testOnline;

req.open('GET', url, false);

req.send('');

}

function testOnline() {

if (req.readystate == 4) {

if(req.status == 200) {

online = true;

}

}

}

Persistence Technique

In order to be able to use the P-AJaX application on a disconnected computer, it has to locally cache at least some data it receives from the server while connected. This can be done is a variety of ways, e.g. through HTML browser cookies. A more powerful way to cache data is by using a Java^TM technology-based RDBMS system, as it has been described in [1].

There are some major drawbacks to these techniques: browser cookies are stored in installation specific parts of the file system and cannot easily be transferred from there to a USB drive. While the database table and the engine code for the Derby Java RDBMS can be stored anywhere, there is no guarantee that all platforms have a Java runtime installed, thus losing cross platform interoperability.

A simple way to store data in arbitrary locations is a flat file. Such files can contain XML, text or any other data that would be fit for use with a P-AJaX application. This can be easily achieved in Internet Explorer using the FileSystemObject:

var fso = new ActiveXObject('Scripting.FileSystemObject');

var f = fso.createTextFile("C:\\temp\\file.txt",true);

f.Write(time);

f.Close();

f = null;

The FileSystemObject is an ActiveX object and therefore only available on IE. For Firefox there exists the jslib library [2], which implements a similar file JavaScript API for file access.

Cache Updates

In order to allow offline updates to the application data, changed data should get flagged if it changes. This can be done by encapsulating the application data in an XML node and preceding this node with a 'dirty-flag' node. This should include a time stamp of the last write access to the data, like this:

<root>

<status changed=”1”>

Wed Aug 16 10:28:40 EDT 2006

</status>

<data>

...

</data>

</root>

[1] http://java.sun.com/developer/EJTechTips/2005/tt1122.html

[2] http://jslib.mozdev.org/