Explain the different ready states of a request in AJAX

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')
   }
}

Example

In this example, we will perform an AJAX call and see different ready states. We will update the webpage for different states stating their current states. We can’t perform the UNSENT state as this state is available only before we send an AJAX call. We used a button click event handler to trigger the AJAX call.

<html>
<body>
   <h2>Different <i>Ready State</i> of AJAX</h2>
   <button onclick = "ajaxCall()">Trigger AJAX Call</button>
   <div id = "root" style = "border: 1px solid black; padding: 1%"></div>
   <script>
      let root = document.getElementById('root')
      function ajaxCall() {
         root.innerHTML = 'AJAX Call Started! <br /><br />'
            
         //AJAX Call
         let http = new XMLHttpRequest()
         http.onreadystatechange = function () {
            if (this.readyState == 1) {
               root.innerHTML += 'This is OPENED state <br />'
            }
            if (this.readyState == 2) {
               root.innerHTML += 'This is HEADERS_RECEIVED state <br />'
            }
            if (this.readyState == 3) {
               root.innerHTML += 'This is LOADING state <br />'
            }
            if (this.readyState == 4) {
               root.innerHTML += 'This is DONE state <br />'
            }
         }
         http.open('GET', 'https://jsonplaceholder.typicode.com/posts/', true)
         http.onload = function () {
            root.innerHTML += '<br />AJAX Call Completed!'
         }
         http.send()
      }
   </script>
</body>
</html>

Conclusion

In JavaScript, there are four different ready states of an AJAX request: unsent, opened, headers received, and done. The unsent state is when the request has yet to be sent to the server. The opened state is when the request has been sent to the server but the response has not yet been received. The headers received state is when the server has responded with its headers and is preparing a response. The done state is when the request has been completed, and the response has been received. Each of these ready states can be accessed through the readyState property of the XMLHttpRequest object. They can be useful for tracking the progress of an AJAX request and handling the response appropriately.