What is XMLHTTPRequest Object ?
Last Updated :
20 Jan, 2023
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
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing