Skip to content
Related Articles

Related Articles

Improve Article

What is XMLHTTPRequest Object ?

  • Last Updated : 19 Oct, 2021
Geek Week

XMLHTTPRequest object is an API which is used for fetching data from the server. XMLHTTPRequest is basically used in Ajax programing. 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
 
    // 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 XMLHTTPRquest 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 text value of header.
  • setReaquestHeader: It is used for setting the value of request header.
  • overrideMimeType: This property is used to set the mime type which is used to treate the response data-type ot be treated as Text or XML type.

Example:

JavaScript




// Demonstraiting Properties of XMLHTTPRequest object
<script>
 
var xmlObj = $.ajax({
 
    // Our sample url to make request
 
    // 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.then(): 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 refection of request callback function is resolve.

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

Example: 

JavaScript




// Example demonstraiting methods of XMLHTTPRequest
// object
<script>
 
var xmlObj = $.ajax({
 
    // Our sample url to make request
     
    // 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



My Personal Notes arrow_drop_up
Recommended Articles
Page :