Tag Archives: j

Automatic ajax call using jQuery

Total used files :

  • index.php
  • jquery.js
  • random.php

I am using jQuery’s setInterval() method to automatically make the ajax call in every 2 seconds.

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Refresh Page itself</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
      $(document).ready(function(){
        var callAjax = function(){
          $.ajax({
            method:'get',
            url:'random.php',
            success:function(data){
              $("#sample").html(data);
            }
          });
        }
        setInterval(callAjax,2000);
      });
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <?php
    print "Below number changes in 2 seconds interval, View-Source of this page to see the usuage of jquery for content refresh.<div id='sample'>100 </div>";
    ?>
  </body>
</html>

In above code, the interesting code is in line 17,

setInterval(callAjax,2000);

which calls the callAjax function in every 2 seconds. Here 2000 is supplied in milliseconds.

line 11 – sets the url to “random.php”

line 13 – replaces the #sample div with the response from the “random.php” file that is the output of

print 5*rand(1,100);

And this is the code for “random.php” that is called by ajax call in every 2 seconds.
random.php

<?php
print 5*rand(1,100);

You can test the demo online at http://www.samundra.com.np/refresh/