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 JavaTM
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/