What is XMLHTTPRequest Object ?

XMLHTTPRequest object is an API which is used for fetching data from the server. XMLHTTPRequest is basically used in Ajax programming. It retrieve any type of data such as json, xml, text etc. It request for data in background and update the page without reloading page on client side. An object of XMLHTTPRequest is used for asynchronous communication between client and server. The $.ajax() method is used for the creation of XMLHTTPRequest object.

The $.ajax() does following steps in background:

• Send data from background.
• Receives the data from the server.
• Update webpage without reloading the page.

Below we will see how to create XMLHTTPRequest object with $.ajax() method: 

Syntax: 

var XHR = $.ajax({configs});

Example: 

JavaScript

// Example showing how XMLHTTPRequest object created
var XMLO = $.ajax({

    // Our sample URL to make the request
    url: 'https://jsonplaceholder.typicode.com/todos/1',

    // type of Request
    type: "GET"
});

Now we will see the data-type of data that we can retrieve from the server and what pre-processor we have for respective data-type.

Data-type: These are the data-type for we can request to the server. The available data types are text, xml, html, script, jsonp and json. On the basis of these data type, we specify the pre-processor to the response before handling it to the handler of XMLHTTPRequest object. Following are the pre-processor to the specified data-type:

• Text: If data-type is text no pre-processor is applied to the response. It can be access through responseText property of XMLHTTPRequest object.
• xml: In case of XML, pre-processor jQuery.parseXML is applied to the response and then passed to the handler as xml document. It can be access through responseXML property of the XMLRequestHTTPRequest object.
• html: In case of html data-type, we don’t specify any pre-processor to response. It can be accessed to with the responseText property.
• string: In case of script, script will first run and then it is handled to the handler in form of string.
• jsonp:  In case of requesting jsong, we have to specify the jsonpCallback property of $.ajax() method. which will be execute before passing the json object to the successor handler.
• json: In case of json, response is parsed to jQuery.parseJSON before passing an object to the handler.

Properties: XMLHTTPRequest object have many useful class properties which helps in the flexible handling of response. The XMLHTTPRequest object properties are:

• readyState: This property indicate the status of the connection.
• status: It contains the http response code from the server.
• statusText: It contains the http response string from the server.responseText: It contains the response in text format from the server.
• responseXML: It contains the response Xml from server.
• getAllResponseHeaders: This property returns all the headers name as string.
• getResponseHeader: It takes name of header and returns the text value of header.
• setRequestHeader: It is used for setting the value of request header.
• overrideMimeType: This property is used to set the mime type which is used to treat the response data-type to be treated as Text or XML type.

Example:

JavaScript

// Demonstrating Properties of XMLHTTPRequest object
<script>

var xmlObj = $.ajax({

    // Our sample url to make request
    url: 'https://jsonplaceholder.typicode.com/todos/1',

    // type of Request
    type: "GET"
});

xmlObj.always(function(a, b, c) {
    console.log(" # Status of request is : ", c.status);
    console.log(" # readyState of request is : ", c.readyState);
    console.log(" # statusText of request is : ", c.statusText);
    console.log(" # All Response Headers of request is : ",
           c.getAllResponseHeaders);
 });
</script>

Output:

# Status of request is : 200
# readyState of request is : 4
# statusText of request is : success
# All Response Headers of request is : function(){return h?p:null}

Below is the example of some properties of XMLHTTPRequest object:

Methods: As we know XMLHTTPRequest make asynchronous communication and as a result it returns promise. We have many promise method of the jQuery XMLHTTPRequest object. Available promise methods are: 

• xmlObject.then(): This method takes two callback function func1, func2 as a parameters. func1 call when promise is successfully resolved. And func2 is call when request fails.
• xmlObject.always(): This method take single callback function. This method makes handler to call when request is either resolve or rejected. Parameter function is call always without concern about request.
• xmlObject.done(): This method accept single callback function. This method will be call when our request is resolved. Parameter function will be run with resolve of request.
• xmlObject.fail(): this method accept single callback function. This method is call when our request is rejected. after reflection of request callback function is resolve.

Below is the example of some of the method of XMLHTTPRequest object:

Example: 

JavaScript

// Example demonstrating methods of XMLHTTPRequest
// object
<script>

var xmlObj = $.ajax({

    // Our sample url to make request
    url: 'https://jsonplaceholder.typicode.com/todos/1',

    // type of Request
    type: "GET",
});

xmlObj.then(function(){
    console.log(" #Then is resolved ");
});

xmlObj.fail(function(){
    console.log(" #Fail is resolved ");
});

xmlObj.always(function(){
    console.log(" #Always is resolved ");
});

xmlObj.done(function(){
    console.log(" #Done is resolved ");
});

</script>

Output: 

#Always is resolved 
#Done is resolved 
#Then is resolved