如何在不使用 jquery 但使用 javascript 的情况下使 ajax 每 (n) 秒更新一次？

Question

I'm trying to hava a javascript poll the server every (n) number of seconds how would I do this with javascript?

Answer 1

Assuming you are using jQuery:

var seconds = 5;

setInterval(function(){
    $.ajax({
        url: 'something.something',
        data: 'something'
    });
}, seconds * 1000)

Without jQuery:

var seconds = 5;

setInterval(function(){
    some_ajax_function();
}, seconds * 1000)

Or as @Felix suggests below:

var seconds = 5;
some_ajax_function(seconds);

function some_ajax_function(seconds){
     ..ajax
     onsuccess: setTimeout(function(){some_ajax_function(seconds);}, 
                      seconds * 1000)
}

Answer 2

It is simple with the following function

window.setInterval("yourfunctionWithAjaxRequestETC", time_in_ms);});

Enjoy:)

Answer 3

first, we need to make our ajax request object. We need to take different browsers into account.

var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
  {
   // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Now, we'll write our function to send a request

function askData(){
   xmlhttp.open("GET","myinfosource.php",true);  // opens a Get request to the url myinfosource.php, and sets the request to asynchronuous.
   xmlhttp.send(); //sends the request
}

Now, let's write an event handler that changes the HTML when the info comes back.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) //if we reveived data (readystate 4 means that information was received. status 200 is the status of the HTTP request, where 200 means 'ok'.
    {
    //insert data into the div you want.
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }

}

And finally, we set an interval on the first function we wrote to make it run every x seconds.

setInterval('askData',10000);

this will refresh your data.

I hope you see now why most people use a framework such as jquery to use AJAX. One of the major advantages of js frameworks is that they work around browser incompatibilities so that you, as the developer can concentrate on the task at hand.

Answer 4

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>