Question

我的节点和快速代码是：

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. on ready似乎在readyState更改为1时触发。我的HTML永远不会更新。

＆＃39;加载＆＃39;事件最终会触发，但我不知道如何将响应对象传递给它，如果这是你应该如何处理它。我发现的所有示例似乎仍在使用onreadystatechange，但它似乎只触发一次，而readyState仍为0.我应该以某种方式重新设置监听器吗？

我发现的节点/表达示例同样非常简单，所以我猜测我错过了它的整个层次？

我找不到我遇到的问题的具体例子，所以我想我会以某种独特的方式表达，或者错过一个很好的细节。

基本上我只是希望能够与自己交谈，在这一点上......给自己发送最简单的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;
    }
  }
}

Answer 2

您正在将writeResponseText的结果传递给onreadystatechange。并且因为writeResponseText没有返回事件触发时将被调用的函数，所以你没有得到你想要的东西。在这种情况下，解决方案是使用闭包。另外，如果您使用addEventListener方法，最好也使用onreadystatechange：

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

一个简单的节点/表达获取请求和响应

2 个答案: