XMLHttpRequest.readyState & XMLHttpRequest.status final stage comparison

Question

I have a script that I want to see if I can fix a comparison.

this.refreshLyric = function (currentSong, currentArtist) {
    
     var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                var data = JSON.parse(this.responseText);

                var openLyric = document.getElementsByClassName('lyrics')[0];

                if (data.type === 'exact' || data.type === 'aprox') {
                    var lyric = data.mus[0].text;

                    document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
                    //debugging
                    console.log("Success Lyric found");
                    
                } else {
                //debugging
                    console.log("Lyric not found");
                }
            } else {
               //HERE if the condition is not met, it goes to another function
               var page = new Page();
               page.refreshLyric2(currentSong, currentArtist);
              }
        }
        xhttp.open('GET', 'https://api.vagalume.com.br/search.php?apikey=' + API_KEY + '&art=' + currentArtist + '&mus=' + currentSong.toLowerCase(), true);
        xhttp.send()
}

The code is simple, but what I want I cannot achieve.

This comparison to be true has to go through some previous states:

if (this.readyState === 4 && this.status === 200) {

XMLHttpRequest.readyState:

Value State Description

0 UNSENT Client has been created. open() not called yet.

1 OPENED open() has been called.

2 HEADERS_RECEIVED send() has been called, and headers and status are available.

3 LOADING Downloading; responseText holds partial data.

4 DONE The operation is complete.

XMLHttpRequest.status:

Before the request completes, the value of status is 0. Browsers also report a status of 0 in case of XMLHttpRequest errors.

UNSENT: 0
OPENED: 0
LOADING: 200
DONE: 200

What I want to do is if the final stage comparison of the states is not identical to 4 and 200 respectively then go to another function.

if (this.readyState === 4 && this.status === 200) {
//run this code
.....
 } else {
//Go to another function
   var page = new Page();
   page.refreshLyric2(currentSong, currentArtist);
 }

Is it possible to achieve this, or am I daydreaming?

Your other function will be run for all the intermediate states that the request goes through. Is that really what you want? — Barmar, Aug 14 '20 at 05:03
Or do you want to do it just when the request is done and you get a non-200 status? — Barmar, Aug 14 '20 at 05:04
For intermediate states I don't want the other function to run. It should only be run when all previous states have been completed and the final condition is not met. — Juan, Aug 14 '20 at 05:06

Barmar · Accepted Answer · 2020-08-14T05:13:00.727

1

If you want different actions in the final stage depending on the status, you need nested if statements. The first if detects the final stage, then you test the status.

this.refreshLyric = function(currentSong, currentArtist) {

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
      if (this.status == 200) {
        var data = JSON.parse(this.responseText);

        var openLyric = document.getElementsByClassName('lyrics')[0];

        if (data.type === 'exact' || data.type === 'aprox') {
          var lyric = data.mus[0].text;

          document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
          //debugging
          console.log("Success Lyric found");

        } else {
          //debugging
          console.log("Lyric not found");
        }
      } else {
        // go to another function
        var page = new Page();
        page.refreshLyric2(currentSong, currentArtist);
      }
    }
  }
  xhttp.open('GET', 'https://api.vagalume.com.br/search.php?apikey=' + API_KEY + '&art=' + currentArtist + '&mus=' + currentSong.toLowerCase(), true);
  xhttp.send()
}

edited Aug 14 '20 at 05:13

answered Aug 14 '20 at 05:06

Barmar

741,623
53
500
612

There are many IF - ELSEs together, could you implement your solution in the complete code that I shared at the beginning? – Juan Aug 14 '20 at 05:09
Let me upload it to the server and test it and I'll tell you how it worked.. – Juan Aug 14 '20 at 05:14
I don't know why but it doesn't work for me, the `GET ` is never sent. – Juan Aug 14 '20 at 05:26
1

Make sure the indentation is all correct. The last two lines should not be inside the `onreadystatechange` function. – Barmar Aug 14 '20 at 05:28
You're right, the mistake was mine, I ate a key. hahaha – Juan Aug 14 '20 at 05:31
I ate a bracket, not key, bad translate, sorry. – Juan Aug 14 '20 at 05:38
1

I knew what you meant. – Barmar Aug 14 '20 at 05:43

XMLHttpRequest.readyState & XMLHttpRequest.status final stage comparison

1 Answers1