Explain the different readiness states of requests in AJAX

AJAX stands for Asynchronous JavaScript and XML. It is a set of web development technologies for creating interactive web applications. AJAX allows a web page to communicate with the server without reloading the page.

The ready state is an important part of handling AJAX requests. The request's ready status indicates the status of the request to the server and allows the client to track the progress of the request.

Below we introduce the different readiness states of AJAX in detail.

Not sent status (0)

This is the first ready state of AJAX. It is represented by the integer 0. When making an AJAX request, the request is in an "unsent" state until the send() method is called. This means that the request has not yet been sent to the server, indicating that the request still needs to be sent. This state is also called XMLHttpRequest.UNSENT.

grammar

http.onreadystatechange = function () {
   if (this.readyState == 0) {
      
      //put your code here
      console.log('This is UNSET state')
   }
}

Open state (1)

This is the second ready state of AJAX. Represented by the integer 1. The open state of an AJAX request is when the request is sent to the server, but a response has not yet been received. This is typically 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 was opened and the request headers were sent.

For example, when a user clicks a button to submit a form, an AJAX request is sent to the server, which then processes the request and sends back a response. The browser then processes the response and updates the page accordingly. Another example is when a user clicks a link to load more content, an AJAX request is sent to the server to get the additional content and then display it on the page.

grammar

http.onreadystatechange = function () {
   if (this.readyState == 1) {
      
      //put your code here
      console.log('This is OPENED state')
   }
}

HEADERS_RECEIVED Status (2)

This is the third ready state of AJAX. It is represented by the integer 2. Headers Received is a status of a request in AJAX that occurs when a 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 content type, page length, and the date the page was last modified.

Another example is when a user sends a request to the server to download a file. The server will respond by sending back file headers, such as the size and type of the file and the date it was last modified.

grammar

http.onreadystatechange = function () {
   if (this.readyState == 2) {
      
      //put your code here
      console.log('This is HEADERS_RECEIVED state')
   }
}

Loading status (3)

The loading state of a request in AJAX is when a request is sent to the server and a response is received. During this time, the status of the request is "loading", indicating 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 a response (such as a success or error message) is returned from the server.

Another example is when a user clicks a link to navigate to a new page. The loading state is when a link is clicked and a new page loads.

grammar

http.onreadystatechange = function () {
   if (this.readyState == 3) {
      
      //put your code here
      console.log('This is LOADING state')
   }
}

Complete status (4)

The completion status of a request in AJAX is when the request has been completed and a response has been received. At this point the server has responded to the request and the data is available for further processing. This indicates that the request has completed and a response has been received.

grammar

http.onreadystatechange = function () {
   if (this.readyState == 4) {
      
      //put your code here
      console.log('This is DONE state')
   }
}

Example

In this example we will make an AJAX call and look at the different readiness states. We will update the different state webpages with their current status. We cannot do the UNSENT state because this state is only available before the AJAX call is sent. We use 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>

in conclusion

In JavaScript, AJAX requests have four different readiness states: Not Sent, Open, Header Received, and Completed. The unsent status means that the request has not yet been sent to the server. The open state is when a request has been sent to the server but a response has not yet been received. The header received state is when the server has responded with its headers and is preparing a response. The completion status means that the request has completed and a response has been received. Each of these ready states can be accessed through the readyState property of the XMLHttpRequest object. They are useful for tracking the progress of AJAX requests and handling responses appropriately.

The above is the detailed content of Explain the different readiness states of requests in AJAX. For more information, please follow other related articles on the PHP Chinese website!