6

If I want a whole page to reload every N seconds, I would put something like this in the HTML: meta http-equiv="refresh" content="5"

Is there a standard practice for doing the same kind of thing for AJAX calls? I want schedule an AJAX call to go off every 10 seconds say, in order to update parts of the page, without refreshing the whole page. It would be even better if I could schedule multiple AJAX calls at different times, as some parts of the page may need to be updated more often than others.

TIA

2

4 Answers 4

13

You could use setTimeout or setInterval (the latter is probably best suited to what you want to do).

setInterval(makeRequest, (10 * 1000));

...where makeRequest is a function that reloads some content via AJAX.

4
  • 1
    If you do this, I'd make sure to verify that the previous request has finished before starting another. You don't want to pile up requests if there's network lag.
    – jtbandes
    Aug 29, 2009 at 4:30
  • @jtbandes: Good point. However, this logic would probably go into the "makeRequest" function. Aug 29, 2009 at 4:36
  • @jtbandes, what will happen if the previous request has NOT finished when another is started?
    – Peter Lee
    Mar 3, 2012 at 1:47
  • @PeterLee It's just undesirable — for example, if one lags they could finish around the same time and so your UI might update irregularly. Or if there's a network error and none of the requests can get through, there's no point in sending more requests every few seconds.
    – jtbandes
    Mar 3, 2012 at 9:58
5
function proxy()
{
  /* implement call to your Ajax method */
}

setInterval( proxy, 1000 ); // last arg is in milliseconds
1
You can use serInterval method of javascript:
Just write down the lines at the bottom of your page:

<script>
window.setInterval(function(){
  ajaxCallFunction();  //calling every 5 seconds
}, 5000);

function ajaxCallFunction(){
    //this function uses ajax to interact with the server
}
<script>
0

I assume that there is a servlet with URL Pattern /UpdateCount is configured in web.xml to provide dynamic data/content and there is a div element countStatDiv in the jsp page.

The following code refreshes/updates the content of countStatDiv at every 30 seconds using GET method and variable seconds value can be changed according to the need:

                <script>
                    var request;
                    var seconds=30;
                    function getRequestObject(){
                    setInterval(function() {sendRequest();},seconds*1000);
                    if (window.ActiveXObject){
                    return (new ActiveXObject("Microsoft.XMLHTTP"));
                    } else if (window.XMLHttpRequest){
                    return(new XMLHttpRequest());
                    } else {
                    return (null);
                    }
                    }
                    function sendRequest(){
                    request = getRequestObject();
                    request.onreadystatechange = handleResponse;
                    request.open("GET", "../UpdateCount", true);
                    request.send(null);
                    }
                    function handleResponse(){
                    if((request.readyState == 4)&amp;&amp;(request.status == 200)){
                    var serverResponse = request.responseText;
                    var statCtrl=document.getElementById("countStatDiv");
                    statCtrl.innerHTML=serverResponse;
                    }
                    }
                </script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.