Client-side data management with XML (part 3: Opera’s DOM 3 Load & Save)

On most recent browsers, you can use a non-rendered DOM Document to load, hold and modify the data of your web application. So far, I’ve been using the Sarissa wrapper to get a simple, unified syntax that works for Gecko-based browsers (Firefox..) and Internet Explorer. Unfortunately Opera and Safari were left out.

Today I’ll show how you can extend support to Opera by using its implementation of the DOM 3 Load & Save specifications.

In short, here’s what we’re trying to do:

1. Instantiate a non-rendered DOM Document.
2. Populate the document with XML data loaded asynchronously from the server.
3. Use regular DOM Scripting to store and update application data in the document.

The code


if (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature('LS', '3.0')) {
var domDoc = null; // will hold our XML
var parser = document.implementation.createLSParser(document.implementation.MODE_ASYNCHRONOUS,null);
parser.addEventListener("load", loadHandler , false);
try {
parser.parseURI('/time-tracker/srvc-tracker.php?taskId=0');
} catch (e) {
alert('error:'+e.code);
}
function loadHandler(e) {
domDoc = e.newDocument;
}
}


The ‘Load & Save’ parser (LSParser) instantiates the DOM Document and takes care of the asynchronous load. The document can be retrieved, once the loading is complete, in the event’s ‘newDocument’ property.

At this point you can use any DOM Scripting method to access and modify the data. See my previous post for more details.

If you need to serialize the document back to a string, use:

var serializer = document.implementation.createLSSerializer();
var xmlstring = serializer.writeToString(domDoc);
alert(xmlstring);


Note: Code samples for a synchronous load can be found on molily’s site (in german) and on Grauw’s web spot.

Technorati Tags: Opera, Load and Save, Ajax