XMLHttp Object

Initially created by Microsoft as a part of its ActiveX library called MSXML to provide support for XML in their IE 5.0

It was created to initiate HTTP requests from anywhere in an application.

These requests were intended to return XML.

It could be used in both web pages and desktop applications.

Now Mozilla, Safari and Opera also provide their version of the object.

Var oxmlhttp=new ActiveXObject(“Microsoft.XMLHttp); Creating XMLHttp Object: Var oxmlhttp=new ActiveXObject(“Microsoft.XMLHttp);

Different versions of XMLHttp Object: Microsoft.XMLHttp MSXML2.XMLHttp MSXML2.XMLHttp.3.0 MSXML2.XMLHttp.4.0 MSXML2.XMLHttp.5.0

Java Script to Check for XMLHttp Object Version: Function createHTML() { Var versions=[“MSXML.XMLHttp.5.0”, “MSXML2.XMLHttp.4.0”, “MSXML2.XMLHttp.3.0”, “MSXML2.XMLHttp”, “Microsoft.XMLHttp” };

For( var I = 0; I < versions.length; i++) { try{ Var oxmlhttp=new ActiveXObject(versions[i]); Return oxmlhttp; }

For( var I = 0; I < versions.length; i++) { try{ Var oxmlhttp=new ActiveXObject(versions[i]); Return oxmlhttp; }

catch (oError) { //Do nothing } throw new Error("MSXML is not installed.");

In Other Browsers: Var oxmlhttp=new XMLHttpRequest()

Creating XMLHttp Object depending on the browser:

Using XMLHttp Object: Open() : used to initialize the object. Open(rquesttype, URL, Async) Requesttype: GET/POST URL : a string indicating URL to send request to. Async : Synchrnous/Asynchronous (true/false)

To make asynchronous requests var oxmlhttp=XmlHttp.createRequest(); oxmlhttp.open(“get”, “phone.txt”, true)

XMLHttp.readystate property: Readystate property changes value as the request goes through and the response is received.

There are five possible values for readyState: 0 (Uninitialized): The object has been created but the open() method hasn't been called. 1 (Loading): The open() method has been called but the request hasn't been sent. 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.

Because of differences in browser implementations, the only reliable readyState values for cross-browser development are 0, 1, and 4. In most cases, however, you will check only for 4 to see when the request has returned:

So you need to define an onreadystatechange event handler to handle readystatechange event.

Every time the readyState property changes from one value to another, the readystatechange event fires and the onreadystatechange event handler is called.

var oXmlHttp = zXmlHttp. createRequest(); oXmlHttp. open("get", "info var oXmlHttp = zXmlHttp.createRequest(); oXmlHttp.open("get", "info.txt", true); oXmlHttp.onreadystatechange = function () { if (oXmlHttp.readyState == 4) alert("Got response."); } }; oXmlHttp.send(null);

send() method: will actually send the request. It takes String type of argument If the request does not require a body, then null is passes.

To retrieve data returned you can use the following properties: responseText: returns string containing the response body. responseXML: returns XML data got in response / if the data has text/XML as content-type.

So, to get the text contained in phone So, to get the text contained in phone.txt, the call would be as follows: var sData = oXmlHttp.responseText;

status property: contains the HTTP status code sent in the response. statusText: contains the text description of the status (such as "OK" or "Not Found").

200 code means request was completed succesfully. if (oXmlHttp.status == 200) { alert("Data returned is: "+ oXmlHttp.responseText; } else alert("An error occurred: "+ oXmlHttp.statusText; 200 code means request was completed succesfully.

The readyState property is set to 4 even if a server error occurred, so just checking that is not enough. In the above example, the responseText property is shown only if the status is 200; otherwise, the error message is displayed.

getResponseHeader() method: is used to access response headers

var sContentType = oXmlHttp.getResponseHeader("Content-Type"); if (sContentType == "text/xml") { alert("XML content received."); } else if (sContentType == "text/plain") alert("Plain text content received."); alert("Unexpected content received.");

setRequestHeader() method: is to specify the headers info you are sending out with the request.

var oXmlHttp = zXmlHttp. createRequest(); oXmlHttp. open("get", "info var oXmlHttp = zXmlHttp.createRequest(); oXmlHttp.open("get", "info.txt", true); oXmlHttp.onreadystatechange = function () { if (oXmlHttp.readyState == 4) alert("Got response."); } }; oXmlHttp.setRequestHeader("myheader", "myvalue"); oXmlHttp.send(null);

synchronous requests : var oXmlHttp = zXmlHttp.createRequest(); oXmlHttp.open("get", "info.txt", false); oXmlHttp.send(null); if (oXmlHttp.status == 200) { alert("Data returned is: "+ oXmlHttp.responseText; } else alert("An error occurred: "+ oXmlHttp.statusText;

XMLHttp using GET: XMLHttp using POST:

Advantages and Disadvantages of XMLHttp The user can view the output from the server in the same page. Http requests can be sent from anywhere in the page.

Client can have synchronous as well as asynchronous communication with the server. The code you write is much cleaner and the intent of the code is much more apparent than using numerous callback functions with hidden frames. You have access to request and response headers as well as HTTP status codes, enabling you to determine if your request was successful.

Disadvantages Disadvantage is that, unlike hidden frames, there is no browser history record of the calls that were made. The Back and Forward buttons do not tie in to XMLHttp requests, so you have effectively cut off their use.

It is for this reason that many Ajax applications use a mixture of XMLHttp and hidden frames to make a truly usable interface. Another disadvantage, which applies to Internet Explorer only, is that you depend on ActiveX controls being enabled.

If the user has your page set up in a particular security zone that doesn't allow ActiveX controls, you cannot access the XMLHttp object. In that case, you may have to default to using hidden frames.