What is the method for retrieving the status of an xmlHttpRequest?

Question

What is the method for retrieving the status of an xmlHttpRequest?

I'm curious about how to verify the status of an xmlHttp request once it has been sent. Can someone explain the process to me? Thank you.

function sendRequest(){
    //retrieve access token   
    var accessToken = 'xxx';
    //get user_id
    var userid = document.getElementById('userid').value;
    //retrieve request_token
    var requestToken = document.getElementById('requestToken').value;

     //insert into database
     var xmlHttp = new XMLHttpRequest();
     var url="database.php";
     var parameters = "accessToken=" + accessToken + "&userid=" + userid + "&requestToken=" + requestToken ;
     xmlHttp.open("POST", url, true);

    //send request
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xmlHttp.setRequestHeader("Content-length", parameters.length);
     xmlHttp.setRequestHeader("Connection", "close");
     xmlHttp.send(parameters);

    //check status
    if(xmlHttp.status == Ok){
        alert('Success!');
    }else {
        alert('Error');
    }

}

javascript xmlhttprequest

Answer 1

Answer №1

<!DOCTYPE html>
<html>
<body>

<h2>Utilizing the XMLHttpRequest object</h2>

<button type="button" onclick="sendRequest()">Update Content</button>

<p id="test"></p>

<script>


function sendRequest(){
    //retrieve access token
    var accessToken = 'xxx';
    //get user ID
    var userID = document.getElementById('userID').value;
    //obtain request token
    var requestToken = document.getElementById('requestToken').value;


    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("test").innerHTML =
        this.responseText;
      }
    };
   
     var url="database.php";
     var parameters = "accessToken=" + accessToken + "&userID=" + userID + "&requestToken=" + requestToken ;
     xmlHttp.open("POST", url, true);

    
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xmlHttp.setRequestHeader("Content-length", parameters.length);
     xmlHttp.setRequestHeader("Connection", "close");
     xmlHttp.send(parameters);



}

</script>

</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<body>

<h2>Utilizing the XMLHttpRequest object</h2>

<button type="button" onclick="sendRequest()">Update Content</button>

<p id="test"></p>

<script>


function sendRequest(){
    //retrieve access token
    var accessToken = 'xxx';
    //get user ID
    var userID = document.getElementById('userID').value;
    //obtain request token
    var requestToken = document.getElementById('requestToken').value;


    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("test").innerHTML =
        this.responseText;
      }
    };
   
     var url="database.php";
     var parameters = "accessToken=" + accessToken + "&userID=" + userID + "&requestToken=" + requestToken ;
     xmlHttp.open("POST", url, true);

    
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xmlHttp.setRequestHeader("Content-length", parameters.length);
     xmlHttp.setRequestHeader("Connection", "close");
     xmlHttp.send(parameters);



}

</script>

</body>
</html>

Answer 3

Answer №2

I believe this code snippet will solve your problem

let request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML =
      this.responseText;
    }
  };
  request.open("GET", "http://example.com/api/data.php", true);
  request.send();

Answer 4

I believe this code snippet will solve your problem

let request = new XMLHttpRequest();
  request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML =
      this.responseText;
    }
  };
  request.open("GET", "http://example.com/api/data.php", true);
  request.send();

Answer 5

Answer №3

The event known as onreadystatechange is activated each time the state of readyState undergoes a change.

Throughout a server request, the readyState transitions from 0 to 4:

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

In your code, you can include a listener to monitor the onreadystatechange event and assess the status within it, demonstrated below-

function sendRequest(){
    // Obtain refresh access token   
    var accessToken = 'xxx';
    // Retrieve user_id
    var userid = document.getElementById('userid').value;
    // Acquire request_token
    var requestToken = document.getElementById('requestToken').value;

     // Insert into database
     var xmlHttp = new XMLHttpRequest();
     var url="database.php";
     var parameters = "accessToken=" + accessToken + "&userid=" + userid + "&requestToken=" + requestToken ;

     // Set up the onreadystatechange event listener.
     xmlHttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             alert('success');
         } else if(this.readyState == 4 && this.status != 200) { 
             alert('error');
         }
     };
     xmlHttp.open("POST", url, true);

    // Send the request
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xmlHttp.setRequestHeader("Content-length", parameters.length);
     xmlHttp.setRequestHeader("Connection", "close");
     xmlHttp.send(parameters);

    // Validate the status
    if(xmlHttp.status == Ok){
        alert('success!');
    }else {
        alert('error');
    }

}

Answer 6

The event known as onreadystatechange is activated each time the state of readyState undergoes a change.

Throughout a server request, the readyState transitions from 0 to 4:

0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

In your code, you can include a listener to monitor the onreadystatechange event and assess the status within it, demonstrated below-

function sendRequest(){
    // Obtain refresh access token   
    var accessToken = 'xxx';
    // Retrieve user_id
    var userid = document.getElementById('userid').value;
    // Acquire request_token
    var requestToken = document.getElementById('requestToken').value;

     // Insert into database
     var xmlHttp = new XMLHttpRequest();
     var url="database.php";
     var parameters = "accessToken=" + accessToken + "&userid=" + userid + "&requestToken=" + requestToken ;

     // Set up the onreadystatechange event listener.
     xmlHttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             alert('success');
         } else if(this.readyState == 4 && this.status != 200) { 
             alert('error');
         }
     };
     xmlHttp.open("POST", url, true);

    // Send the request
     xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     xmlHttp.setRequestHeader("Content-length", parameters.length);
     xmlHttp.setRequestHeader("Connection", "close");
     xmlHttp.send(parameters);

    // Validate the status
    if(xmlHttp.status == Ok){
        alert('success!');
    }else {
        alert('error');
    }

}

What is the method for retrieving the status of an xmlHttpRequest?

Answer №1

Answer №2

Answer №3

Similar questions

Open boxes with walls that don't create shadows

Initiate Child Event within Parent Component

Trigger the function when the keyboard event is deactivated

"Presenting Invoice Information on an Invoice Template: A Step-by-Step Guide

Organize the outcomes according to the date provided by the object's keys, and simply tally the number

Developing an Easy-to-Use PDF Popup Interface

Sending files using AJAX without FormData in Internet Explorer 9

Create a datastring using a JSON object

Leveraging TipTap.dev for building a joint editing platform -

Matching an element that contains a specific string in JS/CSS

Angular-Google-Maps - display issues arise when adjusting map size on mobile devices

Using Vanilla JavaScript to Disable a Specific Key Combination on a Web Page

Attempting to showcase a list of 4 concatenated items in a dropdown menu sourced from the database

Tips for adjusting the speed of animations in Odometer/vue-odometer

Implement rotation in Three.js that mirrors the functionality of Blender

Is it possible to substitute a one-line jQuery.load() with a fetch() function that achieves the same result?

Tips for exchanging divs in a mobile view using CSS

Making rapid formatting changes by rearranging the positioning of words in Javascript

Retrieve the original state of a ReactJs button from the database

Comparison between Mobile Phone's innerWidth and innerHeight Versus Resolution