XMLHttpRequest Object:

Use XMLHttpRequest objects for browser-server communication

JavaScript that allows for interaction with the browser and responding to events, XMLHttpRequest object is used for asynchronously exchanging the XML data between the client and the server.

The mechanism for sending data to and retrieving data from the server with Ajax is the XMLHttpRequest object.

You will need a JavaScript to be written which is able to create XML objects within a browser and is able to post information back to your ‘back-end’ page.

Creating the object:

The following Example shown here demonstrates how to create and use the XMLHttpRequest object:

This object is basically generated for all modern browsers like mozilla, safari including IE7.

Example:

var reqObj=new XMLHttpRequest();

The object that is shown below is generated for IE5 and IE6. For the ActiveX branch, pass the name of the object to the ActiveX constructor:

Example:

var reqObj =new ActiveXObject (“Microsoft.XMLHTTP”);

Object Properties:

There are 6 properties that is being used, while processing a ajax request, these properties are generally described below.

1. onreadystate change Event handler for an event that fires at every state change. This is usually your event handler for asynchronous callback.

2 . ready State There are five attributes describes the ready state, these are :

1.Unsent: when it is constructed the object (XMLHttpRequest Object) is in unsent state and the value of this state is Zero(0).

2.Opened:when the open method is called and it is successfully invoked , this shows the ready state. The setRequestHeader() can be set in between this state, and this request made by using the send() method, state having the value 1.

3.Headers_recieved when all the responses has been successfully received, the state would come is called the headers_recieved state, and the value of the state is 2.

4.Loading The state comes when the response of the entity body is being received. The value is 3.

5.Done This is the state when the completion of the process would occur. May be the result would be success or there is something wrong occurred in the result. The value is 4.

4. Response Text this is used for returning the response to the server, the response text contain the text of the http response. When the ready state value is 0,1 or 2 the response text contains an empty string, when the ready state value is 3 the response contains the incomplete response, the response completed when ready state is 4.

Response XML DOM compatible document object of data returned from server response.

Status this returns the HTTP status code from the server such as 200 for OK or 404 for not found.

Status Text this returns a string representation of HTTP status code as ok and 200 and not found for 404.

Object Methods:

There are some common object methods described below.

1: abort() This method is basically used for halt the http request.

2. open() you can call the open() method to initialize an XMLHttpRequest object. It assigns destination URL, method, and other optional attributes of a pending request

xmlhttp.open(“GET”,”validate.php”,true);

3.sent(content) Transmits the request, optionally with postable string or DOM object data, After preparing a request by calling the open() method, you send the request to the server. You may call send() only when threadByState value is 1, otherwise the XMLHttpRequest object raises an exception. The request gets sent to the server using the parameters supplied to the open() method. The send() method returns immediately when the async parameter is true, letting other client script processing continue.

xmlhttp.send(null);

4. setRequestHeader() Method Assigns a label/value pair to the header to be sent with a request .The setRequestHeader(DOMString header, DOMString value) method sets request headers. You may call this method after calling the open() method—when the ready State value is 1—otherwise you’ll get an exception.

5. getAllResponseHeaders() It returns all the response headers as a string, The method returns null if readyState value is not 3 or 4.

6. getResponseHeader() Method It is used to retrieve response header values. or you can say it returns the value of a specified header.

Flow process of Ajax:

• A user can send a request through an event (clicking a button, typing a text, selecting the dropdown value), this would be call for a JavaScript function.

• An xmlhttprequest object is created and it is configured with a request parameter, which includes the html component’s ID (that generated the event).

• This generated object makes an asynchronous request to the web server. Onset receives the request, processes the request and stores the data.

• The processing object which process the request returns an updated XML document .

• The xmlhttp request object receives the XML data, process it and update s the page with

• The retrieved data from the server end.