javascript - 在直接 JS 中使用 AJAX 进行连续数据库调用

Question

这是我的第一个问题，所以我首先说:大家好!

我正在尝试使用直接 JavaScript 和 Ajax 以精美表格的形式制作实时数据“演示”，后端是 PHP。为了刷新表，我需要每隔 3 秒发出一次请求，4 秒就可以了。数据库是RedisDB。我编写了 php 脚本来获取数据，一切正常。我制作了一个 JS 文件来请求和处理/处理数据，这还可以。 演示文稿看起来很棒，用 JS 编写的算法效果很好，大约 600 行，一些简单的 if-else 和开关，其他有点复杂。

现在情况变得很糟糕。我无法连续执行此操作，我尝试了 setTimeout() 和 setInterval() 的方法，我使用类似 sleep 的函数制作了计时器和无限循环等等，但它无法在下一个请求中生存在页面加载时的初始之后。

对于纯 JS 来说，Ajax 请求的代码非常简单。我使用 jsonParse() 获取 JSON 字符串数据，然后对其进行解析，然后对数据进行处理。

这一切都有效，无论它是如何启动的(用户操作或其他操作)，下一个请求都会失败。

AJAX 代码:

    window.onload = function(){ 
        getEventdataFromDB();
    }

    function getEventdataFromDB(){

        var xmlhttp;

        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        }


        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

                var dbData = xmlhttp.responseText;

                if(dbData != ''){
                    processEvents(dbData); //function for data processing
                }       
            }               
        }

        xmlhttp.open('GET','getEvents.php?dataRequest=true',true);
        xmlhttp.send(); 

    }

我知道现在不遵循流程并使用 jQuery 和其他框架有点罪过，但我只是不太热衷于最新和最伟大的简化工作，首先，工作得很好。

最好的方法是什么，我应该如何进行，使用什么。我做了一些研究，发现链接回调和 Promise 对象。

显然我不可能是第一个这样做的人，所以这里的前进方向是什么。

Answer 1

确保上一个请求在开始下一个请求之前结束的唯一方法是从上一个请求的 onreadystatechanged 事件开始下一个调用。由于 ajax 异步运行，因此无法保证您运行的任何其他代码是否会在 ajax 调用完成之前或之后执行。

所以你需要重新组织一下你的脚本:

var xmlhttp;

window.onload = function(){    
  setupAjaxObject();
  getEventdataFromDB();
}

function setupAjaxObject()
{
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }


    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4){ 
            if(xmlhttp.status == 200){

             var dbData = xmlhttp.responseText;

             if(dbData != ''){
                processEvents(dbData); //function for data processing
             }
           }
           getEventdataFromDB(); //run the next request
        }
    }
}

function getEventdataFromDB(){

    xmlhttp.open('GET','getEvents.php?dataRequest=true',true);
    xmlhttp.send(); 

}

如果您希望请求之间有一点延迟，您可以在超时内包装对下一个请求的调用。