Question

基本上当我按下按钮第一次ajax完全加载但是当我再次按下相同的ajax按钮时它会给我这个错误

（index）：17未捕获DOMException：无法在'XMLHttpRequest'上执行'send'：对象的状态必须为OPENED。在sendAJAX（http://etc.../:17:5）在HTMLButtonElement.onclick（http://etc.../:29:40）

我找到了关于此的文章，但是他们很困惑，我不知道如何将这些解决方案集成到我的脚本中，让它与我的脚本一起工作，所以我需要一个基于我的精确的代码示例解决方案脚本不是基于别人的脚本所以我可以

根据我的脚本更好地理解这一点。我主要想知道我怎么能继续调用相同的ajax请求，无论我多少次按下相同的按钮而没有错误。

代码示例

的index.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<title>AJAX with JavaScript</title>
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
document.getElementById('ajax').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'sidebar.html');
function sendAJAX() {
xhr.send();
}
</script>
</head>
<body>
<div class="grid-container centered">
<div class="grid-100">
<div class="contained">
<div class="grid-100">
<div class="heading">
<h1>Bring on the AJAX</h1>
<button id="load" onclick="sendAJAX()">Bring it!</button>
</div>
<ul id="ajax">

</ul>
</div>
</div>
</div>
</div>
</body>
</html>

sidebar.html

<section>
<h2>Welcome to the wonderful world of AJAX</h2>
<p>This content provided to you dynamically by the XMLHTTP Request Object</p>
</section>

Answer 1

您只需创建一次xhr元素，因此如果第二次调用sendAJAX，则会在已发送的send上调用XMLHttpRequest。

调用send后，xhr obeject的状态不再打开，因此会收到错误消息。

您可以为每个XMLHttpRequest电话创建新的sendAJAX来解决问题。

function sendAJAX() {

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      document.getElementById('ajax').innerHTML = xhr.responseText;
    }
  };
  xhr.open('GET', 'sidebar.html');
  xhr.send();
}

或仅将open移至sendAJAX：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    document.getElementById('ajax').innerHTML = xhr.responseText;
  }
};

function sendAJAX() {

  xhr.open('GET', 'sidebar.html');
  xhr.send();
}

XMLHttpRequest.open()

注意：对已经激活的请求（已经调用open（）的请求调用open）相当于调用abort（）。

第一次再次按下ajax按钮会发出奇怪的错误

1 个答案: