Question

我正在发送一个AJAX请求，接收响应并根据该响应替换一些文本。我想我在这里缺少一些基本概念。

request.onreadystatechange = () => {
  if (request.readyState === 4 && request.status === 200) {
    let newCard = JSON.parse(request.responseText);
    // replace content.
    request = new XMLHttpRequest(); // I'm trying to reset the request here.
    request.open('POST', '/viewed', true);
  } else {
    console.log('Error ' + request.status + ' text: ' + request.responseText);
  }
}

request.open('POST', '/viewed', true);

// $close is an element on the page.
$close.addEventListener('click', function() {
  request.send(params);
});

这里的结果是第一次点击我得到新内容，但是第二次点击我没有得到新内容，然后在第三次点击我得到一个AJAX错误。

未捕获DOMException：无法在'XMLHttpRequest'上执行'send'：对象的状态必须是OPENED。

我猜我试图重置 if 块内的request是我跌倒的地方，我只是不确定在哪里/如何正确地做到这一点。

Answer 1

使用xmlhttp请求调用尝试实现的目标尚不清楚。如果要onclick发送请求，则在请求调用的元素上设置事件侦听器。

Answer 2

向Sam Onela道具并眯着眼睛，两个答案都指向了正确的方向。大多数情况下，我需要为新的XMLHttpRequestObject设置一个处理程序。提供的链接给了我基本框架：

function updateCard() {
  let request = new XMLHttpRequest();
  request.onreadystatechange = () => {
  if (request.readyState === 4 && request.status === 200) {
      let newCard = JSON.parse(request.responseText);
      // updating element
     } else {
       console.log('Error ' + request.status + ' text: ' + request.responseText);
     }
  }
  request.open('POST', '/viewed', true);
  request.send(params);
}

$close.addEventListener('click', function() {
  updateCard();
});

如何正确重置XMLHttpRequest

2 个答案: