Is there a way to update AJAX requests every (n) seconds using pure JavaScript, without relying on jQuery?

Question

Is there a way to update AJAX requests every (n) seconds using pure JavaScript, without relying on jQuery?

Looking to set up a JavaScript function that will periodically poll the server every (n) seconds. What's the best way to achieve this using JavaScript?

javascript ajax

Answer 1

Answer №1

If you are utilizing jQuery library:

var timeDelay = 5;

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

If not using jQuery:

var timeDelay = 5;

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

Another approach as proposed by @Felix:

var timeDelay = 5;
some_ajax_function(timeDelay);

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

Answer 2

If you are utilizing jQuery library:

var timeDelay = 5;

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

If not using jQuery:

var timeDelay = 5;

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

Another approach as proposed by @Felix:

var timeDelay = 5;
some_ajax_function(timeDelay);

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

Answer 3

Answer №2

Here's an easy way to achieve this:

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

Hope you find this helpful :)

Answer 4

Here's an easy way to achieve this:

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

Hope you find this helpful :)

Answer 5

Answer №3

To start, our first step is to create the ajax request object, taking into consideration different browsers.

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");
}

Next, we will define a function to send the request.

function askData(){
   xmlhttp.open("GET","myinfosource.php",true);  
   xmlhttp.send(); 
}

Subsequently, we will create an event handler that modifies the HTML content upon receiving the information back.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }

}

Finally, we introduce a setInterval function on the initial function to execute it at regular intervals.

setInterval('askData',10000);

This setup ensures your data remains up-to-date.

The above process highlights the importance of using frameworks like jQuery for AJAX operations as they streamline browser compatibility issues, allowing developers to focus on their tasks effortlessly.

Answer 6

To start, our first step is to create the ajax request object, taking into consideration different browsers.

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");
}

Next, we will define a function to send the request.

function askData(){
   xmlhttp.open("GET","myinfosource.php",true);  
   xmlhttp.send(); 
}

Subsequently, we will create an event handler that modifies the HTML content upon receiving the information back.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }

}

Finally, we introduce a setInterval function on the initial function to execute it at regular intervals.

setInterval('askData',10000);

This setup ensures your data remains up-to-date.

The above process highlights the importance of using frameworks like jQuery for AJAX operations as they streamline browser compatibility issues, allowing developers to focus on their tasks effortlessly.

Answer 7

Answer №4

I have implemented a web.xml configuration where a servlet with the URL Pattern /UpdateCount is responsible for delivering dynamic data/content to a specific countStatDiv div element on the JSP page.

To ensure that the content within the countStatDiv is refreshed every 30 seconds, the following JavaScript code utilizes a GET method. The interval of 30 seconds can easily be adjusted as needed:

                <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>

Answer 8

I have implemented a web.xml configuration where a servlet with the URL Pattern /UpdateCount is responsible for delivering dynamic data/content to a specific countStatDiv div element on the JSP page.

To ensure that the content within the countStatDiv is refreshed every 30 seconds, the following JavaScript code utilizes a GET method. The interval of 30 seconds can easily be adjusted as needed:

                <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>

Is there a way to update AJAX requests every (n) seconds using pure JavaScript, without relying on jQuery?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The addition of one hour to the date time format increases the total time

Loop through ng-options using ng-repeat that are linked to the same ng-model

Utilize React-Charts.js-2 with ChartJS to create a customized bar chart

Customize the CSS for MaterialUI's TablePagination's MenuItem

Retrieving Session Data in Javascript

"Efficiently transferring a large file using AJAX and sending it via POST to a

Avoid refreshing the page while submitting the data in the form

Troubles with Uploading Images and Validating Forms in Next.js 14 using Shadcn, Zod, and React Hook Form

Struggling with a straightforward issue in Ajax that is proving to be a challenge to resolve

Retrieving the CSS property values for a specific element using Selenium

Troubleshooting: Issue with UpdatePanel or RadAjaxPanel functionality in RadGrid's EditForm template

Tips for managing erroneous data in csv files using Node.js

The Challenge of Dynamic Angular Components

Choosing a random element in React: A step-by-step guide

Is there a way to input row value directly into my modal?

Can you identify the mistake in the XML response?

Modify the font style of numbers based on the keyboard language selected by the user

What is the best way to handle the return value from using indexOf on a string?

Performing a Javascript query to update the value in a spreadsheet with Selenium integration

Dynamic adjustment of div size to fit the screen when resizing, based on the svg proportions