How To Return xmlHttp request status?

Question

I would like to know how to verify the status of an xmlHttp request after sending it. How do I go about doing it? Thanks.

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

     //insert 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');
    }

}

you can't as XMLHttpRequest is **asynchronous** - I hate linking to https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call for such questions because that duplicate deals with jquery, but the concept is similar — Jaromanda X, Oct 11 '17 at 03:15

score 1 · Answer 1 · answered Oct 11 '17 at 03:17

1

I think this is what you're looking for

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "http://your-url.com/your-page.php", true);
  xhttp.send();

answered Oct 11 '17 at 03:17

SYED SHAH

84
6

Thanks for this, but where do I put this relative to my code? – Balloon Fight Oct 11 '17 at 03:19

score 1 · Answer 2 · answered Oct 11 '17 at 03:25

The onreadystatechange event is triggered every time the readyState changes.

During a server request, the readyState changes 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

So in your code, you can add the listener to check for onreadystatechange event and check the status in it, like below-

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

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

     //Here is 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 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');
    }

}

score 1 · Accepted Answer · answered Oct 11 '17 at 04:01

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest object</h2>

<button type="button" onclick="loadXMLDoc()">Change Content</button>

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

<script>


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


    var xmlHttp = new XMLHttpRequest();
    var xhttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("test").innerHTML =
        this.responseText;
      }
    };
    //insert database
     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);



}

</script>

</body>
</html>

How To Return xmlHttp request status?

3 Answers3