javascript - XMLHttpRequest() 无限循环

Question

下面代码的目的是使用Ajax重复获取PHP查询结果，直到结果为“6”。

当我的CPU风扇开始大声咆哮，并且几秒钟后，“正在加载...”消息开始闪烁时，接收到“6”的结果后，脚本继续运行，这是正常的.

想法？

  function refreshData(){
  var display = document.getElementById("content");
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "get_status.php");
  //xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      display.innerHTML = this.responseText;
        var test_response = this.responseText;
    } else {
      display.innerHTML = "Loading...";
    };
      if (this.responseText != "6") {                            
          refreshData();                        
      }  
  }
}

这是 PHP 代码:

<?php
 $dbconn = pg_connect("host=localhost dbname=postgres user=postgres password=kevin234") or die('Could not connect: ' . pg_last_error());
        set_time_limit(0);    
        $result = pg_query('select max(num_files), max(file_num) from status');
        $num_files = pg_fetch_row($result);

echo "max_file_num = " . $num_files[1];
?>

从这段代码中调用refreshData():

 var upload = function(files) {
                var formData = new FormData(),
                    xhr = new XMLHttpRequest(),
                    x;

                xhr.upload.addEventListener("progress", progressHandler, false);
                //xhr.addEventListener("load", refreshData, false);
                //xhr.addEventListener("error", errorHandler, false);
                //xhr.addEventListener("abort", abortHandler, false);        

                for(x = 0; x < files.length; x = x +1) {
                    formData.append('file[]', files[x]);                            
                }
                xhr.onload = function() {
                    var data = JSON.parse(this.responseText);      
                    displayUploads(data);
                }
                xhr.open('post', 'ids_v0.00_progress_bar.php');
                xhr.send(formData);

                function progressHandler (event) {
                    document.getElementById("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
                    var percent = (event.loaded / event.total) * 100;             
                    if (event.loaded = event.total) {
                        refreshData();     
                    }
                }
            }

Answer 1

It is working accept that the script continues to run after the result of "6"

您需要将函数的重新调用移至 xmlhttp 调用的 onreadystatechange 成功中。这样，一次发送一个请求，而不是数百个。

function refreshData() {
  var display = document.getElementById("content");
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", "get_status.php");
  //xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      display.innerHTML = this.responseText;
      var test_response = this.responseText;
      if (this.responseText != "6") {
        refreshData();
      }
    } else {
      display.innerHTML = "Loading...";
    };

  }
}

为什么改变

您的代码存在的问题是，无论 responseText 值如何，您的网站都会继续侧面发送请求。 responseText != "6" 所做的唯一事情是检查该请求实例是否应该发送另一个请求。当一个请求完成时，必须有条件地重新发送请求，即在 if(this.readyState === 4 && this.status === 200) 中。