Question

var mapFile = new XMLHttpRequest();
mapFile.open("GET", "http://localhost:8000/res/map01.txt", true);

mapFile.onreadystatechange = function() {
  if (mapFile.readyState === 4) {
    if (mapFile.status === 200) {
      this.lines = mapFile.responseText.split("\n");
    }
  }
}

this.lines = mapFile.onreadystatechange.lines;

mapFile.send(null);

I have that code and I’m trying to save this.lines inside mapFile.onreadstatechange to later save as this.lines on the outer scope. However, mapFile.onreadystatachange.lines is undefined and I can’t save the variable for later use. I even tried using element.innerHTML which is a dirty hack for this but it also didn’t work.

Answer 1

There are three primary issues here:

1. The this within onreadystatechange is not the same as the this outside of the function, because this within a function is determined by how the function is called. More on my blog: Mythical methods | You must remember this

2. XHR calls are asynchronous (by default), so your callback won’t have been called yet when you’re trying to use this.lines just above the send call. (Even with a synchronous request, since that line is before send, it still wouldn’t be set.)

3. mapFile.onreadystatechange.lines looks for a property called lines on the function object referenced by mapFile.onreadystatechange. It has absolutely nothing to do with any variables defined within that function.

Here’s an update addressing the main items:

var mapFile = new XMLHttpRequest();
var self = this; // <===== Remember `this` for use in the callback
mapFile.open("GET", "http://localhost:8000/res/map01.txt", true);

mapFile.onreadystatechange = function() {
  if (mapFile.readyState === 4) {
    if (mapFile.status === 200) {
      // v---- Use self instead of this
      self.lines = mapFile.responseText.split("\n");
    }
  }
}; // <=== Add missing semicolon

// Removed a line here using `this.lines` prematurely

mapFile.send(null);