Explain the different ready states of a request in AJAX
Last Updated :
14 May, 2022
In this article, we are going to learn about the readyStates of a request in AJAX. readyState is an XMLHttpRequest property.
There are five ready states of a request as listed below:
- readyState=0
- readyState=1
- readyState=2
- readyState=3
- readyState=4
How to use readyState?
Before using the readyState, we need to send a request to the server using XMLHttpRequest and store incoming data in a variable, then you have to use onreadystatechange which generally holds a callback function that checks for the state of the current request and will execute every time when it sees a change in readyState property or its attributes.
Syntax:
var xhttp= new XMLHttpRequest();
xhttp.onreadystatechange = function(){
// Content of the function
}
Let’s study different readyState of a request in detail:
readyState=0: It is the state where the open() method doesn’t yet invoke, that’s why it is also an UNOPENED state. The first step to sending a request is to initialize it which is done using the open() method when we are using XMLHttpRequest() to send a request. But at this stage, the open() method is not invoked that is why it will not give us any data in response to the request.
Example: Below example illustrates the use of readyState=0.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Ready states of a request in ajax.</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 0) {
document.getElementById("container").innerHTML
= this.responseText + "Status Text: " +
this.statusText;
}
};
xhttp.open("GET", "gfgInfo.txt", true);
xhttp.send();
}
</script>
</body>
</html>
|
Output: Here, nothing is happening on clicking the button as the open() method is not called yet.
- readyState=1: It is OPENED state as the open() method is called in this state which means the request is initialized at this stage, But after calling the open() method we have to call the send() method which helps to process the request to get the data from the server.
Example: Below example illustrates the use of readyState=1.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Ready states of a request in ajax.</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 1) {
document.getElementById("container").innerHTML =
"Status Text: <br>" + this.statusText +
"It will show nothing in status text,<br>" +
"because we haven't called the send() method yet";
}
};
xhttp.open("GET", "gfgInfo.txt", true);
xhttp.send();
}
</script>
</body>
</html>
|
Output:
- readyState=2: In this state, headers are received as the send() method is being invoked. You can able to access the headers and status of the current request. By getting the status of the current request we can ensure whether the request is sent to the server or not.
Example: Below example illustrates the use of readyState=2.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Ready states of a request in ajax.</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 2) {
document.getElementById("container").innerHTML =
"Status Text: " + this.statusText + "<br>" +
"It is showing value of status text as OK,<br>" +
"that means the request has sent successfully.";
}
};
xhttp.open("GET", "gfgInfo.txt", true);
xhttp.send();
}
</script>
</body>
</html>
|
Output:
- readyState=3: This state shows that the request is still in the process and the data hold by responseText, which means we can access the data, while the request isn’t finished or complete yet. But at this stage, the data we get may or may not be complete as the request is still in the process.
Example: Below example illustrates the use of readyState=3.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Ready states of a request in ajax.</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 3) {
document.getElementById("container").innerHTML =
this.responseText + "Status Text: " +
this.statusText;
}
};
xhttp.open("GET", "gfgInfo.txt", true);
xhttp.send();
}
</script>
</body>
</html>
|
Output:
- readyState=4: This state is the symbol of the completion of the request. The request in this state is no more in the process it is completed and the data is successfully loaded. We can access the complete data that we requested and use it further to perform other operations or make some changes on the screen.
Example: Below example illustrates the use of readyState=4.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Ready states of a request in ajax.</title>
<style>
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="container">
<h1>Hey Geek,</h1>
<h3>Welcome to GeeksforGeek!</h3>
<button type="button" onclick="stateChange()">
Update Text
</button>
</div>
<script>
function stateChange() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
document.getElementById("container").innerHTML =
this.responseText + "Status Text: " +
this.statusText;
}
};
xhttp.open("GET", "gfgInfo.txt", true);
xhttp.send();
}
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...