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.0MSXML2.XMLHttp.4.0MSXML2.XMLHttp.3.0MSXML2.XMLHttpMicrosoft.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; whererequest type = get or posturl = the url to send the request toasync = 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 opened1 (loading): the open method has been called on

the object2 (loaded): the request has been sent3 (interactive): a partial response has been

received4 (complete): all data has been received and the

connection has been closedN. 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