Continuous DB calls with AJAX in straight JS

Question

This is my first question here so I will start by saying: Hello to everyone!

I am trying to make a live data "presentation" in the form of a fancy table using straight JavaScript and Ajax, backend is PHP. In order to refresh the table I need to make requests at every, lets say 3 seconds, 4 is ok to. The database is RedisDB. I made the php script to fetch the data and its ok. I made a single JS file to request and handle/process the data and it's sort of ok. The presentation looks great and the algorithm that is written in JS works excellent, it's about 600 lines, some simple if-else's and switches other a little more complex.

It now gets nasty. I can't get the freaking thing to do this continuously, I tried ways with setTimeout() and setInterval(), I made timers and infinite loops with sleep-like functions and so on, but it just can't survive that next request after the initial when the page loads.

The code for Ajax request is pretty straightforward for pure JS. I get my JSON string data parse it with jsonParse() and then do my processing of the data.

This all works, it's the next request that fails, no matter how it's initiated (user action or something else).

AJAX code:

    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(); 

    }

I know that it's a bit of a sin these days not to follow the flow and use jQuery and other frameworks but I'm just not big on the latest and greatest simplification of stuff that works just fine, to begin with.

What is the best way to do this, how should I proceed, what to use. I did some researched and things point to chaining callbacks and Promise objects.

There is obviously no way that I am the first one to do this so what is the way forward here.

As most of you will see I need some way of making sure that one request is over successfully before I start the next one so I don't get in to a mess of many simultaneous requests. — Miroslav
– Miroslav, Commented Jul 29, 2016 at 14:17
After request of data you want to stop JavaScript from making more data request until your first result is success full or failure. Is that what your requirement is ? — Vignesh Pandi
– Vignesh Pandi, Commented Jul 29, 2016 at 14:24
If yes than use loop to block javascript from moving forward by this : while(flag){ // Do nothing } And flag will be set to false when your request is complete making the javascript to move forward — Vignesh Pandi
– Vignesh Pandi, Commented Jul 29, 2016 at 14:28
Never use loops to block javascript. JS is a single-thread engine and all other processes will wait for the end. — Alex Kudryashev
– Alex Kudryashev, Commented Jul 29, 2016 at 14:44

ADyson · Accepted Answer · 2016-07-29 15:49:01Z

The only way to ensure the previous request is over before starting the next one is so start the next call from the onreadystatechanged event of the previous one. Because ajax runs asynchronously, there's no guarantee whether any other code you run will execute before or after the ajax call finishes.

So you need to re-organise your script a bit:

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(); 

}

If you wanted a little delay between the requests, you could wrap the call to the next request inside a timeout.

Collectives™ on Stack Overflow

Continuous DB calls with AJAX in straight JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related