AJAX stands for Asynchronous JavaScript and XML. It is a set of web development techniques to create interactive web applications. AJAX allows a web page to communicate with a server without reloading the page.
Ready states are an important part of working with AJAX requests. The ready state of a request indicates the request’s status to the server and allows the client to track the progress of the request.
In the below, we detailed the different ready states of AJAX.
UNSENT STATE (0)
This is the first ready state of the AJAX. It is denoted by the integer 0. When requesting with AJAX, the request is said to be in an “unsent” state until the send() method is called. This means that the request has not been sent to the server yet, indicating that the request still needs to be sent. This state is also referred to as XMLHttpRequest.UNSENT.
Syntax
http.onreadystatechange = function () {
if (this.readyState == 0) {
//put your code here
console.log('This is UNSET state')
}
}OPENED STATE (1)
This is the second ready state of the AJAX. It is denoted by the integer 1. AJAX’s opened state of a request is when a request is sent to the server, but the response has yet to be received. This is usually the first step in the AJAX request cycle and is typically triggered by a user action such as a button click or form submission. This indicates that the request has been opened and the request headers have been sent.
For example, when a user clicks a button to submit a form, the AJAX request is sent to the server, which then processes the request and sends back a response. The browser then processes this response, and the page is updated accordingly. Another example is when a user clicks a link to load more content, an AJAX request is sent to the server to fetch the additional content, which is then displayed on the page.
Syntax
http.onreadystatechange = function () {
if (this.readyState == 1) {
//put your code here
console.log('This is OPENED state')
}
}HEADERS_RECEIVED STATE (2)
This is the third ready state of the AJAX. It is denoted by the integer 2. Headers Received is a state of a request in AJAX that occurs when the request is sent, and the server responds with its headers. The server has received the request and is preparing a response, indicating that the response headers have been received.
For example, when a user sends a request to view a web page, the server will respond by sending back the page headers. These headers contain information such as the content type, the length of the page, and the date the page was last modified.
Another example is when a user sends a request to a server to download a file. The server will respond by sending back the file headers, such as the size and type of the file and the date it was last modified.
Syntax
http.onreadystatechange = function () {
if (this.readyState == 2) {
//put your code here
console.log('This is HEADERS_RECEIVED state')
}
}LOADING STATE (3)
A loading state of a request in AJAX is when a request is sent to a server and a response is received. During this time, the request’s status is “loading”, which indicates that the response body is being received.
For example, when a user clicks a button to submit a form, the loading state is when the form is submitted and when the response (e.g., a success or error message) is returned from the server.
Another example is when a user clicks a link to navigate a new page. The loading state is when the link is clicked, and the new page is loaded.
Syntax
http.onreadystatechange = function () {
if (this.readyState == 3) {
//put your code here
console.log('This is LOADING state')
}
}DONE STATE (4)
The done state of a request in AJAX is when the request has been completed, and the response is received. This is the point at which the server has responded to the request, and the data is available for further processing. This indicates that the request is complete and the response has been received.
Syntax
http.onreadystatechange = function () {
if (this.readyState == 4) {
//put your code here
console.log('This is DONE state')
}
}