如何在使用xmlhttprequest对象时加载旋转图标

Question

如果在处理Ajax时在JavaScript中使用xmlhttprequest时如何加载旋转图标，我想将其指向标记的innerHTML

Answer 1

而不是'Loading...'只使用您的微调器图像并更正your_file.txt的路径以从服务器获取响应：

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var res = this.responseText;

      setTimeout(function(){
        document.getElementById("demo").innerHTML = res;
      }, 2000);
    } else {
      document.getElementById("demo").innerHTML = 'Loading...';
    }
  };
  xhttp.open("GET", "your_file.txt", true);
  xhttp.send();
}

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

您也不需要setTimeout - 它仅用于演示目的，因此您可以在响应快速返回时（即在localhost上）实际查看和验证微调器。