In this article, we will see what is XMLHttpRequest Object, along with knowing their properties with their implementation through the illustrations.
XMLHTTPRequest object is an API that is used for fetching data from the server. XMLHTTPRequest is basically used in Ajax programming. It retrieves any type of data such as JSON, XML, text, etc. It requests for data in the background and updates the page without reloading the page on the client side. An object of XMLHTTPRequest is used for asynchronous communication between client and server.
For security reasons, across domains, modern browsers will not support it. Hence any web page, XML/HTML/txt, or any format page should be located on the same server.
Properties of XMLHttpRequest Object:
- onload: When the request is received (loaded), it defines a function to be called.
- onreadystatechange: A function will be called whenever the readyState property changes.
-
readyState: It defines the current state of the request or holds the current status of the XMLHttpRequest. There are five states of a request:
- readyState= 0: It represents the Request not initialized.
- readyState= 1: Establishment of server connection.
- readyState= 2: Request has been received
- readyState= 3: During the time of processing the request
- readyState= 4: Response is ready after finishing the request
- responseText: It will return the data received by the request in the form of a string.
- responseXML: It will return the data received by the request in the form of XML data.
- status: It will return the status number of the request. (i.e. 200 and 404 for OK and NOT FOUND respectively).
- statusText: It will return the status text in form of a string. (i.e. OK and NOT FOUND for 200 and 404 respectively).
We will explore these concepts & understand them through the illustrations.
Example 1: In this example, the page is displayed with the ‘Get the contents’ button. On clicking the button, onload defines a function to be called. It will try to access gfg.html which is present inside the same server and since it is available, it will take the contents and display them in the <div> tag
<!DOCTYPE html> <html>
<head>
<title>XMLHttpRequest Object</title>
</head>
<body>
<div id="gfgdemo">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
The XMLHttpRequest Object onLoad Example
</h3>
<button type="button" onclick="loadDoc()">
Get the contents
</button>
</div>
<script>
function loadDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("gfgdemo").innerHTML =
this.responseText;
}
// Trying to open with GET method.
// We just want to get the contents from gfg.txt
// which is present in the server
xmlhttp.open("GET", "gfg.html");
xmlhttp.send();
}
</script>
</body>
</html>
|
<!DOCTYPE html> <html>
<body>
<h2>XMLHttpRequest Properties</h2>
<table border="2">
<th>onload</th>
<th>onreadystatechange</th>
<th>readyState</th>
<th>responseText</th>
<th>responseXML</th>
<th>status</th>
<th>statusText</th>
</table>
</body>
</html>
|
Output: Here, we can see that on clicking the button, the load is called & the content of the gfg.html file gets rendered.
Example 2: This example illustrates the onreadystatechange Property that will be invoked when the readyState property changes. Here, we will be using the above gfg.html file.
<!DOCTYPE html> <html>
<head>
<title>XMLHttpRequest Object</title>
</head>
<body>
<div id="gfgdemo">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
The XMLHttpRequest Object onreadystatechange Example
</h3>
<button type="button"
onclick="loadDoc()">
onreadystatechange demo
</button>
</div>
<script>
function loadDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
// Only when readyState is 4 and status as 200,
// we can get proper response
if(this.readyState == 4 && this.status == 200) {
document.getElementById("gfgdemo").innerHTML
= this.responseText;
}
};
xmlhttp.open("GET", "gfg.html");
xmlhttp.send();
}
</script>
</body>
</html>
|
Explanation: On execution of this, as gfg.html is present in the same server and assuming no issues in retrieving it, we will get the readyState as 4 and response as 200, and hence we can see the below output.
Output:
Note: It is very important to note that the URL that is getting opened must be available on the same server. If not, it will throw cross domain error.
Example 3: In this example, we are using the above code example. The requested page can be an HTML/XML/text file. Here, we will try to fetch the content from an XML file.
<breakfast_menu>
<food>
<name>Idli</name>
<price>30</price>
<description>
Famous South Indian Healthy Food
</description>
<calories>650</calories>
</food>
<food>
<name>Dosa</name>
<price>100</price>
<description>
Famous South Indian Most wanted Food
</description>
<calories>900</calories>
</food>
</breakfast_menu>
|
<!DOCTYPE html> <html>
<head>
<title>XMLHttpRequest Object</title>
</head>
<body>
<div id="gfgdemo">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
The XMLHttpRequest Object onreadystatechange Example
</h3>
<button type="button" onclick="loadDoc()">
onreadystatechange demo
</button>
</div>
<script>
function loadDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
// Only when readyState is 4 and status as 200,
// we can get proper response)
if(this.readyState == 4 && this.status == 200) {
document.getElementById("gfgdemo").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "foodDetails.xml");
xmlhttp.send();
}
</script>
</body>
</html>
|
Output: From the output, we can see that the content from the XML file gets rendered.
XMLHttpRequest properties are highly useful to open a web page that is present on the same server. Inside the web page, we can keep the necessary information, even like getting the contents from the Rest API call and setting the response from that to the HTML element controls present in the calling file or an XML file.