Processing XML with JavaScript

Tweet

I came across a situation at work today where I needed to take an XML string from a textarea and perform DOM manipulations on it using JavaScript. After some digging around, I remembered an open source library called Sarissa I had checked out a few days ago. Sarissa is a remarkably useful piece of code: it offers a unified interface in both Internet Explorer and Mozilla for handling HTTP requests, processing XML documents and fragments and performing XSLT transformations. The IE functions are mostly provided using ActiveX objects, while the Mozilla functions take advantage of Mozilla’s XML Extras package.

Using Sarissa, converting a string containing XML in to a regular DOM node can be done using the following:


var dom = Sarissa.getDomDocument();
var xml = 'This is XML!';
dom.loadXML(xml);

‘dom’ can then be treated as a DOM node, and manipulated using the regular DOM API functions (appendChild, childNodes and so on). To convert the node back to XML, simply access it’s ‘xml’ property:


var xml_again = dom.xml;

Sarissa has one disadvantage: the library itself is a hefty 24 KB. As the application I’m working on only needs to work with Mozilla, I decided to dig in to the Sarissa source code to see how the above could be achieved without the compatibility layer. Here’s the equivalent Mozilla specific code, making direct calls to additional classes provided by Mozilla’s XML extras:


var xml = 'This is XML!';
var dom = (new DOMParser()).parseFromString(xml, "text/xml");

And to convert back to a string:


var xml_again = (new XMLSerializer()).serializeToString(dom);

Unfortunately, as far as I can tell the only official documentation for the XML extras package takes the form of a test suite.

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

  • http://www.phppatterns.com HarryF

    There’s some further documention at XULPlanet’s Scriptable Object Reference under “XML Objects”. DOMParser seems to relatively complete. XMLSerializer less so (but comments can be added).

  • http://simon.incutio.com/ Skunk

    Excellent – thanks for the link. It looks like it’s mostly generated from the IDL files, but at least it’s there and linkable.

  • kans

    hi, iam working with php and xml. i have sent a xml from javacript but i dont knw how to retirve it in php
    this is my javascript
    open(“POST”, “SelectCamps.php”, false);
    send(objXMLDoc.xml);
    this is my php after tht
    $doc1 = DOMDocument::load(“”)i dont knw wht to write in load. plz help me

  • Anonymous

    You need to use $HTTP_RAW_POST_DATA or fopen php://input. For simplicity of testing, make sure your php.ini is set to always_populate_raw_post_data = On

  • Ian

    Thanks Simon, your post saved me a lot of hassles.

  • deepa

    i doing my project in xml.i need to get input Using html form.The input should be converted to a xml file.Using vbscript DOM i have done this.The problem is “i couldn’t save xml file in vbscript”.
    Any one can tell what how to save xml file in Vbscript or Javascript.

  • f3l

    deepa, use filesystemobject (or a decent server side option)

  • zahid ayar

    whats the corresponding $HTTP_RAW_POST_DATA in javascript?

  • testing

    testing sarissa