javascript - 一个简单的 Node/快速获取请求和响应

Question

我的 Node 和快速代码是:

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?'));

我的调用页面上的 JavaScript 是这样的(去掉我认为不相关的内容):

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();
}

我遇到的问题是readyState永远不会达到4。当readyState更改为1时，onload似乎会触发。我的HTML从未更新。

“加载”事件最终会触发，但我不确定如何将响应对象传递给它(如果这就是您应该处理它的方式)。我发现的所有示例似乎仍在使用 onreadystatechange，但它似乎只触发一次，而 readState 仍为 0。我是否应该以某种方式再次设置监听器？

我发现的 Node/表达示例同样非常简单，所以我猜我错过了它如何工作的整个层？

我找不到我遇到的问题的任何具体示例，所以我想我以某种独特的方式进行了处理，或者遗漏了一些细节。

基本上，我只想能够与自己对话，此时...向自己发送尽可能简单的 GET，并进行相应的处理。

我已经准备好踢自己了。请帮忙:)

Answer 1

myRequest.onreadystatechange = writeResponseText(myRequest); 这行代码立即调用 writeResponseText 函数，而不是将其分配给 onreadystatechange 属性。

您需要将 writeResponseText 函数声明移动到 getRESTResponse 或使其返回一个要分配为回调的函数。

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();
}

或者使用第二个选项(高阶函数)

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;
    }
  }
}