javascript - 在 javascript/jquery 中更改基于 xhttp.readyState 的元素文本

Question

我有一个用户点击并从 PHP 页面下载的按钮，因为处理时间有点长，我想显示一个文本，向用户显示他们的请求正在处理，我找到了 onreadystatechange 可以访问属性，所以也许我可以将它用于任务。

ready StateHolds the status of the XMLHttpRequest.
     0: request not initialized
     1: server connection established
     2: request received
     3: processing request
     4: request finished and response is ready

我的代码如下，我可以得到 readyState == 4 但不能得到 readyState == 3，任何建议都很好!

<button type="submit" class="btn btn-primary" id="weekDL">
  <i class="fa fa-download"></i> 
  Download
</button>
<p id="please">Generating report, please wait..</p>

$('#weekDL').on('click',function(){
  $(this).hide();
  $('#please').show();
  var data = $("#week option:selected").text();

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if(this.readyState == 3) {
      $('#please').text('Request recieved..');
    } else if (this.readyState == 4 && this.status == 200) {
      window.location = "PHPexcel/download.php?week=" + data;
      this.responseText;
      $('#please').hide();
      $('#weekDL').show();
    }
  };
  xhttp.open("GET", "PHPexcel/download.php?week=" + data, true);
  xhttp.send(); 
});
});

Answer 1

您的代码运行良好。问题是因为状态 3 仅在状态 4 出现之前存在几毫秒(取决于响应的大小)，因此您的 UI 更新几乎察觉不到。

您可以通过将 console.log('state: ' + this.readyState); 放在 onchangereadystate 处理程序中来验证这一点。然后您将在控制台中看到所有 4 种状态的输出。

Working example

这当然是假设 AJAX 请求返回有效响应。如果请求中有错误，那么您只会看到状态 1 和 4。但是在这种情况下，问题出在请求中的逻辑上，而不是您的 JS。