XMLHttpRequest

From Svg wiki

While getURL is purely a procedural method, XMLHttpRequest is based on an object and offers additional methods and properties. If you want to use remote calls in Mozilla SVG, you have to use the XMLHttpRequest() method, getURL() works in ASV3, ASV6 and Batik.

XMLHttpRequest was first introduced by Microsoft as an ActiveX extension and is meanwhile implemented in all major browsers, such as Firefox, Safari, Opera and Konqueror. It is also not a W3C standard (Correction: It is now a W3C draft, see http://www.w3.org/TR/XMLHttpRequest/), but the recommended way to do remote calls until the DOM3 W3C methods are implemented in the browsers. XMLHttpRequest allows to receive ResponseHeader data and provides additional status properties for data loading, including a progress event. It also allows to do synchronous remote calls and allows to cancel remote calls. Because this method is more powerful than the getURL() method it is also a little bit more complex to use.

Following is an example that covers both getURL and XMLHttpRequest:

function getData(myUrlString) { 
	//call getURL() if available, case ASV3, ASV6 and Batik
        if (window.getURL) {
                getURL(myUrlString,getURLCallback);
        }
        //call XMLHttpRequest() if available, case MozillaSVG
        else if (window.XMLHttpRequest) {
                //this nested function is used to make XMLHttpRequest threadsafe
                //(subsequent calls would not override the state of the request and can use the variable/object context of the parent function)
                //this idea is borrowed from http://www.xml.com/cs/user/view/cs_msg/2815 (brockweaver)
                function XMLHttpRequestCallback() {
                        //in this example we are only interested in the complete transaction (readyState 4)
			if (xmlRequest.readyState == 4) {
                                if (xmlRequest.status == 200) {
                                        addGeom(xmlRequest.responseXML.documentElement);
                                }
                        }
                }
                var xmlRequest = null;
                xmlRequest = new XMLHttpRequest();
                xmlRequest.open("GET",myUrlString,true);
                xmlRequest.onreadystatechange = XMLHttpRequestCallback;
                xmlRequest.send(null);
        }
        //write an error message if either method is not available
        else {
                alert("your browser/svg viewer neither supports window.getURL nor window.XMLHttpRequest!");
        }           
}

function getURLCallback(data) {
        //check if data has a success property
        if (data.success) {
                //parse content of the XML format to the variable "node"
                var node = parseXML(data.content, document);
                addGeom(node.firstChild);
        }
        else {
                alert("something went wrong with dynamic loading of geometry!");
        }
}

function addGeom(node) {
	//here you can do something with the data received, e.g. use the method .appendChild() to append the data
	//this function is finally called by both methods
}

We first need to create a new object instance of the XMLHttpRequest object, next we need to open a connection to a URL, register a callback function and finally do the .send(null) request. As with getURL, a callback function receives the data. This callback function is registered to the onreadystatechange event of the XMLHttpRequest object. Since this method is object based and we don't want to add many global objects we need to ensure that this method is threadsafe over several concurrent remote calls. One solution for this problem is to embed the callback function as an "inner function" in the function that makes the remote call. This way, the object and variable context is maintained and not lost after subsequently calling the same callback method. (see [A threadsafe implementation of XMLHttpRequest]).

To get more information on getURL() and XMLHttpRequest see the following resources: [The W3C XMLHttpRequest specification], [Dynamically updating SVG based on serverside information] by Jim Ley, [Dynamic HTML and XML: The XMLHttpRequest Object] by Apple and [XMLHttpRequest] by XULPlanet.