How to call jQuery AJAX in every n seconds?

By Faruque Ahamed Mollick

AJAX is awesome as it does not need to refresh the whole page to load something on a web page. previously I have also discussed on AJAX on this post – Process form value in PHP using jQuery AJAX method. Here is another post related to jQuery AJAX – AJAX search from MySQL database in PHP example.

In this post, I am going to tell you how to call an AJAX request in every n second. In many modern websites, you can see this functionality.

We may need to call the AJAX in every 10 seconds or maybe in 5 seconds time interval.

How can we do that? Here I am going to help you by providing you the code snippets.

AJAX search from MySQL database in PHP example

Process form value in PHP using jQuery AJAX method

For example, on Facebook, you see the online friend list is automatically updating, automatically you got the message after you receive a new message and the same thing also happen when you get new mail on Gmail default view.

You may think about how all these things happening without doing anything on the browser. Surely, they are using AJAX.



But how these AJAX request call without any user interaction with mouse or keyboard?

You didn’t click on any button or anywhere and still, the new message is coming, online friend list updating.

How to send email using PHP mail() function?

Well, these things are happening by sending an AJAX request again and again after a time interval. After that certain time interval, the AJAX call occurs. It can be easily done by using jQuery AJAX.

Here in this example, I am going to give you a simple example code snippets of jQuery AJAX that can execute AJAX in every 5 seconds. We are going to use the setInterval JavaScript method. Using setInterval() method we can do the task easily.

The jQuery code to call AJAX in every 5 seconds

Here is the jQuery code:

$(document).ready(function(){

  sendRequest();

  function sendRequest(){
      $.ajax({
        url: "example.php",
        success: 
          function(data){
           $('#listposts').html(data); //insert text of test.php into your div
           
        },

        complete: function() {
       // Schedule the next request when the current one's complete
       setInterval(sendRequest, 5000); // The interval set to 5 seconds
     }

    });

  };

});

You can see in the above code that we have created a method sendRequest() and then apply the setInterval() method on that sendRequest method.

Now the code will be used to send an AJAX request in every 5 seconds. The time interval 5000 refers to microseconds. You can use the same code anywhere where you want to request the AJAX call in every n seconds.

 

You can use the same code anywhere where you want to request AJAX call in every n second. Just replace the time interval with the time that you need in microseconds.

One response to “How to call jQuery AJAX in every n seconds?”

  1. Cem Sengul says:

    This code is wrong it is sending ajax calls repeteadly + one in n seconds You shold correct it by
    setInterval (function sendRequest(){
    $.ajax({
    url: “example.php”,
    success:
    function(data){
    $(‘#listposts’).html(data); //insert text of test.php into your div

    },
    }),1000};

Leave a Reply

Your email address will not be published. Required fields are marked *