(tech-talk-post)

The application that I'm developing lives on the client (Firefox) and, after having downloaded its script files, all subsequent communication with the server is in XML. Getting data from the server in XML is a pretty well documented process, there are several articles out there on the XMLHttpRequest object. Sending XML back to the server though seems to be a less trodden path.

XML games

Let me take a moment to explain the problem. When we download XML using the XMLHttpReqest object, it is automatically parsed and packaged up into a XMLDocument object with all of the associated DOM methods and niceties.

Using the document.implementation.createDocument() method we can also create our XML document objects from scratch on the client. Firefox is a wonderfully well equipped environment for working with XML and comes with all sorts of tools including XPath that we can use to query and manipulate the document.

These XML tools are without a doubt the client-side data layer to use for a serious AJAX app. However, until recently, I had laboured under the assumption that the layer came without an exit route.

Packing to go home

After having played with our XML document and used our powerful but thin client to manipulate the data in that document, how then do we post it back to the server? Previous articles I've seen have literally build the document up as a string:

var xmlString =" <?xml version="1.0" encoding="UTF-8"?>
<root><data></data></root> ";

Chances of me packaging up 30k of XML by hand? Not likely. Clearly a serializer is required and I figured there had to be a method built into the browser to do this.

Try as I might though I couldn't find one. The standards based solution (as exemplified in PHP5) is a method on the XMLDocument object called saveXML(). This method converts the DOM object into a string. Easy.

Mozilla does seem to have it on its to-do-list but judging what I can see in Venkman, there's currently no implementation (Firefox 1.0.6).

A hack solution

So faced with my little problem, I had three solutions:

1. Keep looking for a serializer method somewhere in the Mozilla documentation
2. Write my own serializer method
3. Think of something clever that required less work than option two

After exhausting option one I considered two, realised (with considerably more foresight than usual) that it was going to take me down a long dark road I didn't want to tread and came up with a hack. The hack went thus:

• create a new div object using window.document but don't append it to the tree
• grab the root node from the XML document
• append the root node to the div as a child node (oh-yes)
• grab the contents of the div using the innerHTML property

Rather clever even if I do say so myself. Well, rather clever until I started sending RSS back up to the server and it wouldn't parse. Oh tits.

Well it turns out that when you add the XML node to the div node, it gets converted to semi-valid XHTML. Semi valid because whilst the browser doesn't allow elements such as title or link to have any text-content, it's perfectly happy to sit the text content down next to the title or link tags and not to bother closing them. Thanks a bunch.

Uh-oh. Looks like it's serializer writing time and we all know the ever expanding time-greed of this type of task.

A light in the tunnel

Then suddenly and totally out of the blue some XDivinity injected the term XMLSerializer into my head (retrospectively it sounds slightly less divine than it seemed at the time).

Mwa-ha, come sit next to me little one. No idea what you are but let's go Googling and find out. Answer: nada. Twenty links to articles saying how the Mozilla serializer's got a big bad security hole in it but nothing telling how to use the damn thing.

Google, you sod, I need more info than just .NET porn, give me some meat! Finally I checked del.icio.us but even there, there were a couple of links but still no documentation.

There's clearly only one thing left to do. It's time to ask the debugger.

Venkman says

Trying to contain my nervousness, I crack open an new session and create a XMLSerializer instance. It works. I can't see any properties but there are two methods hidden in there:

XMLSerializer .serializeToStream()
XMLSerializer .serializeToString()

Hubba hubba. Next things next so I create a new XMLDocument object, add a couple of nodes and, as the "potatoes first and sausages last" kind of guy I am, I go straight for serializeToStream. Nothing. Gah.

The meal's not over yet though - it's time to eat that cumberland.

With shaky hands I give serializeToString a nice document object, hit return and... result! It returns me a string containing my XML. Bingo bango, we're cookin' on gas!

I guess when you spend all day programming, you take pleasure in small things but as you can tell this little nugget made me one happy bunny. I can guess at what serializeToStream does but since serializeToString has what I'm looking for I ain't that fussed.

Sample script can be found here:

http://www.webkitchen.co.uk/errata/mozilla_xmlSerialize.htm

No idea whether it works in any of the other browsers but since I'm only developing for the Fox I'm not bothered. One thing to note is that it only serializes downward from the root you specify i.e. you're going to have to package in your own doctype but that's easy enough. Other than that it seems to do what it says on the tin.

Updates:

1. I've now realised I was originally only searching Google UK and there are actually a ton of links out there including Mozilla's own documentation both here and here - heh!
2. Sorry Google.
3. I'm pretty certain that the Mozilla security hole has now been patched