Xml Extras (WebFX)

## Usage

In this document we will go through some common uses of the XML objects provided by IE and Mozilla.

To use the XML extras one has to include the needed JS file.

    <script type="text/javascript" src="xmlextras.js"></script>

Notice that this JS file uses try/catch statements and therefore it will give syntax errors in old browsers that does not support these.

## Load XML File

### ...using asyncronous XmlHttp

To load an XML file one can use both the `XmlHttp` object and the `XmlDocument` object but I usually prefer the first one because it is a bit more powerful.

    function loadAsync(sUri) {
       var xmlHttp = XmlHttp.create();
       var async = true;
       xmlHttp.open("GET", sUri, async);
       xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4)
             doSomething(xmlHttp.responseXML); // responseXML : XmlDocument
       }
       xmlHttp.send(null);
    }

The `open` method takes three arguments and the first one is either `"GET"` or `"POST"`. The last argument allows you to load the document synchronously or asynchronously. Synchronous loading is easier to use because the call to `send` does not return until the XML file has loaded. The downside to this is that the browser does not respond during this time. The argument to `send` is needed and in case one is using `"POST"` this should be of type `XmlDocument`.

### ...using syncronous XmlHttp

In case you want to use synchronous loading set the third argument of `open` to `false`. Once the `send` method has been called we can access the `responseXML` property.

    function loadSync(sUri) {
       var xmlHttp = XmlHttp.create();
       var async = false;
       xmlHttp.open("GET", sUri, async);
       xmlHttp.send(null);
       doSomething(xmlHttp.responseXML); // responseXML : XmlDocument
    }

## Posting an XML file

To post an XML document to the server we once again use the `XmlHttp` object. To do this one only needs to pass the `XmlDocument` as the argument to the `send` method.

    function postAsync(sUri, xmlDoc) {
       var xmlHttp = XmlHttp.create();
       var async = true;
       xmlHttp.open("GET", sUri, async);
       xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState == 4)
             doSomething(xmlHttp.responseXML); // responseXML : XmlDocument
       }
       xmlHttp.send(xmlDoc);
    }

## Loading a text file

The `XmlHttp` object also allows you to read non XML files. This is done in almost exactly the same way as one reads XML files but instead of looking at the `responseXML` property one looks at `responseText`.

    function loadTextSync(sUri) {
       var xmlHttp = XmlHttp.create();
       var async = false;
       xmlHttp.open("GET", sUri, async);
       xmlHttp.send(null);
       doSomething(xmlHttp.responseText); // responseText : String
    }

## Using XmlDocument

The `XmlDocument` can be used in almost exactly the same was as one uses the normal `document` object in DHTML. As long as one uses standard DOM methods and properties no problems should arise. Below is a simple example that creates a document, parses a string and then finds all test elements and alerts their name.

    var doc = XmlDocument.create();
    doc.loadXML( "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
       "<root>" +
          "<test name=\"Test 1\"/>" +
          "<test name=\"Test 2\"/>" +
       "</root>");

    var testEls = doc.getElementsByTagName("test");
    for (var i = 0; i < testEls.length; i++)
       alert(tests[i].getAttribute("name"));

### Load using XmlDocument

One can also load an xml file from the server using an `XmlDocument` object. This is done using the `load` method. To make the loading asychronous one sets the property `async` to `true` of the `XmlDocument` object. When using asynchronous loading wait until the `readyState` is `4`.

    function loadAsync2(sUri) {
       var doc = XmlDocument.create();
       doc.async = true;
       doc.onreadystatechange = function () {
          if (doc.readyState == 4)
             alert(doc.xml); // doc.xml : String
       }
       doc.load(sUri);
    }

## Demo

The demo page allows you to load a few different xml files as well as enter some text and load non xml files. When outputting an XMl tree the xml document is traversed and some color coded html is generated.

Try the demo

Xml Extras
Usage
Demo
Download

Author: Erik Arvidsson