Unsure about proper use of XMLHttpRequest

JavaScript
1

Hello,

So every example I’ve seen about using XMLHttpRequest looks like this:

{
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() 
  {
    if (this.readyState == 4 && this.status == 200) 
    {
      document.getElementById("myBanner").value = this.responseText;
    }
  };
  xhttp.open("GET", "http://example.com/cgi-bin/hello.pl", true);
  xhttp.send();
}

But I was wondering about internet delays or long downloads and was wondering if it shouldn’t look more like this:

  var xhttp = new XMLHttpRequest();
  var y = "";
  xhttp.onreadystatechange = function() 
  {
    if (this.readyState ==3 && this.status == 200) 
    {
      y = y + this.responseText;
    }
    if (this.readyState == 4 && this.status == 200) 
    {
      y = y + this.responseText;
      document.getElementById("myBanner").value = y;
    }
  };
  y = "";
  xhttp.open("GET", "http://example.com/cgi-bin/hello.pl, true);
  xhttp.send();
}

So am curious if I missed anything or am I over thinking it.

Please let me know.

Thank you ahead.

2

But I was wondering about internet delays or long downloads and was wondering if it shouldn’t look more like this: […]

Uhm, i don’t think so ^^
First of all, that callback you wrote down is executed on when readystate changes; it means that it will assign to y an empty string, or just the first bits received when loading status is set.
Than the callback is called again when readystate changes passing from 3 to 4, assigning to y the whole received text.
So basically it would be useless :stuck_out_tongue:
Furthermore i think that the behaviour you are trying to replicate is exactly how responseText works ( a stream of data):

While handling an asynchronous request, the value of responseText always has the current content received from the server, even if it’s incomplete because the data has not been completely received yet.

from: MDN: XmlHttpRequest - responseText

3

I realize I have to change where “y” is cleared. But, even after reading your link I am still lost. If I were to download an entire dictionary I would not expect it to download all at once. I would think I would have to keep adding to my string variable for every readyState that equals 3 and then finally 4.

Yet every example I find online ignores readyState 3.

Thus my confusion.

4

Unless you have to use XMLHttpRequest, I would suggest axios or the fetch API instead. XHR is highly fiddly and hard to get right because of the state machine you’re forced to deal with directly.

5

I would think I would have to keep adding to my string variable for every readyState that equals 3 and then finally 4

readystate is related to your xhr request, it will acquire the value “3” only once

From XMLHttpRequest.readyState

Response’s body is being received. If responseType is “text” or empty string, responseText will have the partial text response as it loads.

Your doubts are totally justified: what i’ve said earlier is that the behaviour you are trying to implement ( add chunks to a variable until the transfer is completed) is already implemented under the hood, and the variable is called responseText (it has the same role of your y);

6

is already implemented under the hood

Thank you, this is exactly what I was worried about yet couldn’t find the words for.

1 Like