A simple node/express get request and response

Question

My node and express code is thus:

var express        =        require("express");
var app            =        express();

app.get('/',function(request,response){
    console.log('Received');
    response.header("Access-Control-Allow-Origin", "*");
    response.header('Content-Type', 'text/plain');
    response.send("Get Handled");
    console.log(response.headersSent);
});
app.listen(3000, () => console.log('Listening?'));

The javascript on my calling page goes thusly (stripping out what I believe to be irrelevant):

function writeResponseText(myRequest){
    console.log("onreadystatechange")
    console.log(myRequest.status)
    console.log(myRequest.readyState)
    console.log(myRequest.responseText)

    if(myRequest.readyState === XMLHttpRequest.DONE && myRequest.status === 200) {
        mainSection.innerHTML = myRequest.responseText;
    }
}

function getRESTResponse() {

    var url = "http://localhost:3000";
    var myRequest = new XMLHttpRequest();

    myRequest.addEventListener("load", transferResult);
    myRequest.addEventListener("error", transferResult2);

    myRequest.onload = writeResponseText2(myRequest);
    myRequest.open("GET", url);
    myRequest.setRequestHeader("Content-Type", "text/plain");
    myRequest.onreadystatechange = writeResponseText(myRequest);

    myRequest.send();
}

The problem I am having is that readyState never gets to 4. onload seems to fire when readyState changes to 1. My HTML is never updated.

The 'load' event does eventually trigger, but I'm not sure how to pass the response object to it, if that's how you're supposed to deal with it. All the examples I've found seem to still be using onreadystatechange, but it only seems to fire once, while readyState is still 0. Am I supposed to set the listener up again somehow?

The node/express examples I've found are likewise very simple, so I'm guessing I'm missing a whole layer of how it works?

I can't find any specific example of the issue I'm having, so I guess I'm derping in some unique manner, or missing a fine detail.

Basically I just want to be able to talk to myself, at this point... send myself the most simple GET possible, and handle it accordingly.

I am prepared to kick myself. Please help :)

Answer 1

myRequest.onreadystatechange = writeResponseText(myRequest); this line of code immediatelly calls writeResponseText function instead of assigning it to onreadystatechange property.

You need to either move writeResponseText function declaration to getRESTResponse or make it return a function to be assigned as a callback.

function getRESTResponse() {

  var url = "http://localhost:3000";
  var myRequest = new XMLHttpRequest();

  myRequest.addEventListener("load", transferResult);
  myRequest.addEventListener("error", transferResult2);

  myRequest.onload = writeResponseText2(myRequest);
  myRequest.open("GET", url);
  myRequest.setRequestHeader("Content-Type", "text/plain");
  myRequest.onreadystatechange = function writeResponseText() {
    console.log("onreadystatechange")
    console.log(myRequest.status) // access request object via scope
    console.log(myRequest.readyState)
    console.log(myRequest.responseText)

    if (myRequest.readyState === XMLHttpRequest.DONE && myRequest.status === 200) {
      mainSection.innerHTML = myRequest.responseText;
    }
  };

  myRequest.send();
}

Or using the second option (higher order function)

function writeResponseText(myRequest) {
  return function() {
    console.log("onreadystatechange")
    console.log(myRequest.status)
    console.log(myRequest.readyState)
    console.log(myRequest.responseText)

    if (myRequest.readyState === XMLHttpRequest.DONE && myRequest.status === 200) {
      mainSection.innerHTML = myRequest.responseText;
    }
  }
}

Answer 2

You are passing writeResponseText's result to onreadystatechange. And because writeResponseText doesn't return the function that will be called when the event triggers, you are not getting what you want. The solution, in this case, is in using closures. Also, if you are using addEventListener method, it's better to use for onreadystatechange too:

function writeResponseText(myRequest){
    console.log("onreadystatechange")
    console.log(myRequest.status)
    console.log(myRequest.readyState)
    console.log(myRequest.responseText)

    return function handleResponse() {
      if(myRequest.readyState === XMLHttpRequest.DONE && myRequest.status === 200) {
        mainSection.innerHTML = myRequest.responseText;
      }
    }
}

function getRESTResponse() {

    var url = "http://localhost:3000";
    var myRequest = new XMLHttpRequest();

    myRequest.addEventListener("load", transferResult);
    myRequest.addEventListener("error", transferResult2);

    myRequest.onload = writeResponseText2(myRequest);
    myRequest.open("GET", url);
    myRequest.setRequestHeader("Content-Type", "text/plain");

    myRequest.addEventListener('readystatechange', writeResponseText(myRequest));

    // or like you've written
    // myRequest.onreadystatechange = writeResponseText(myRequest)

    myRequest.send();
}