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

Displaying errors above the table. Executing ng-repeat in AngularJS

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

The React Material Component stubbornly resists being horizontally aligned in the Code Sandbox

Best practice for setting up components in Angular 2 using HTML

Error: Trying to send FormData to ajax results in an Illegal Invocation TypeError being thrown

Only scroll the div if it is not within the visible window

Is Selenium suitable for testing single page JavaScript applications?

Scroll bar in Highstock does not completely cover the entire length when dealing with multiple series

Experiencing challenges with showcasing numerical values in the grid cells

Is using parameterized routes in Node.js a recommended practice or a mistake?

Is it possible to use a shell script to replace the external CSS file link in an HTML file with the actual content of the CSS file

Express Validator: The Art of Isolating Validation Logic

Generating pop-up upon loading with CSS3

Call getElementById upon the successful completion of an AJAX request

Is it possible to use nodemailer locally with NodeJS? The issue is that the greeting emails are not being received

The noclose feature in Twitter Bootstrap is malfunctioning when placed within a div

alter objective response

Offering various language options on a website determined by the URL

Can HTML5 be used to store IDs in PHP chat applications?

The generated hook in vuejs is throwing an error stating that window/localstorage is not defined