XMLHttpRequest Object When Microsoft Internet Explorer 5.0 introduced a rudimentary level of XML support, an ActiveX library called MSXML was also introduced, one of the objects in this library became very popular: XMLHttp

XMLHttpRequest Object The XMLHttp object was created to enable developers to initiate HTTP requests from anywhere in an application. These requests were intended to return XML, so the XMLHttp object provided an easy way to access this information in the form of an XML document, this became a very popular feature of ActiveX. Mozilla duplicated the XMLHttp functionality for use in its browsers, other browsers also added support for the XMLHttp object.

XMLHttpRequest Object To create an XMLHttp object: var oXMLHttp = new ActiveXObject(“Microsoft.XMLHttp”); This creates the first version of XMLHttp, but because Microsoft is Microsoft, they had to improve on it with rapid deployment of updated versions which are from latest to oldest: MSXML2.XMLHttp.5.0 MSXML2.XMLHttp.4.0 MSXML2.XMLHttp.3.0 MSXML2.XMLHttp Microsoft.XMLHttp

XMLHttpRequest Object One should program for IE with the latest version but how to know what is the latest one? One approach is to try to create the latest version and if no error is thrown you found it but if an error is thrown try an earlier version.

XMLHttpRequest Object Code snippet for IE machines: if(window.ActiveXObject){ var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp", "Microsoft.XMLHttp" ]; for(var i =0; i<AVersions.length; i++){ try{ var oXMLHttp = new ActiveXObject(aVersions[i]); return oXMLHttp; } catch (oError){} // do nothing just iterate through the choices }

XMLHttpRequest Object For non IE machines use the following: if(typeof XMLHttpRequest != "undefined") return new XMLHttpRequest();

XMLHttpRequest Object Now put it all together and one gets: function createXMLHttp(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if(window.ActiveXObject){ var aVersions = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp", "Microsoft.XMLHttp" ]; for(var i =0; i<AVersions.length; i++){ try{ var oXMLHttp = new ActiveXObject(aVersions[i]); return oXMLHttp; } catch (oError){} } } throw new Error("XMLHttp object could not be created."); }

XMLHttpRequest Object After the XMLHttp object is created one can then make an HTTP request from Javascript. Step 1: call open(request type, url, async) to initialize the object; where request type = get or post url = the url to send the request to async = true then asynchronous, false then synchronous

XMLHttpRequest Object Step 2: define an onreadystatechange event handler, the XMLHttp object has a property called readyState that changes as the request goes through and the response is received.

XMLHttpRequest Object There are five possible values for readyState: 0 (uninitalized): the object has been created but not opened 1 (loading): the open method has been called on the object 2 (loaded): the request has been sent 3 (interactive): a partial response has been received 4 (complete): all data has been received and the connection has been closed N. B.: the only values that most browsers inplement are 0, 1, and 4

XMLHttpRequest Object Most programmers only check for state 4, code like this can be used: oXmlHttp.onreadystatechange = function () { if (oXmlHttp.readyState == 4) { if (oXmlHttp.status == 200) { do something with (oXmlHttp.responseText); } else { error function call("An error occurred: " + oXmlHttp.statusText); } }

XMLHttpRequest Object Step 3: send the request body as follows: oXMLHttp.send(null); // for gets oXMLHttp.send(sBody); // for post where sBody = the request body of name1=value1&name2=value2& etc