CODEWITHSUNDEEP
javascriptjqueryhtmlajax
bLAZ
bLAZ

Reputation: 1751

Reload html page with AJAX

I have a very simple html page with one table that I would like to reload in the background every 5 seconds. In the background means that solution <meta http-equiv="refresh" content="5"> can not be accepted, because the user can observe reloading process then.

I tried the code below, but I observed that RAM usage was quickly raising and after 2-3 minutes firefox browser consumed 70-80% of available memory:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    function autoRefresh_div()
    {
      $("#employee_table").load("index.html");// a function which will load data from other file after x seconds
    }

    setInterval('autoRefresh_div()', 5000); // refresh div after 5 secs
</script>

Could you please suggest something more efficient?

EDIT: I forgot to add that in the body of html I have:

<div id="employee_table">
<table>
...
</table>
</div>

And what I wasn't sure is that I use load("index.html") so I'm loading whole page instead of just a div...?

Upvotes: 3

Views: 5506

Answers (1)

Mayur Agarwal
Mayur Agarwal

Reputation: 854

you can also use $.ajax instead of $("").load("url"); as it will only replace the content of the given element in success function means when the AJAX request is successful, so flickering can be prevented.

function autoReload() {
  setTimeout(function() {
   $.ajax({
     url: '/index.html',
     success: function(data) {       
         document.getElementById("employee_table").innerHTML = data;
      }
    });

    autoReload();  // calling again after 5 seconds
 }, 5000);
}

autoReload(); // calling the function for the first time

or you can also use $.get 

$.get("index.html", function(data, status){
        if(status == "success"){
          document.getElementById("employee_table").innerHTML = data;
       }
 });

$.ajax() is the most configurable one, where you get fine grained control over HTTP headers and such. You're also able to get direct access to the XHR-object using this method. Slightly more fine-grained error-handling is also provided. Can therefore be more complicated and often unecessary, but sometimes very useful. You have to deal with the returned data yourself with a callback.

$.get() is just a shorthand for $.ajax() but abstracts some of the configurations away, setting reasonable default values for what it hides from you. Returns the data to a callback. It only allows GET-requests so is accompanied by the $.post() function for similar abstraction, only for POST

.load() is similar to $.get() but adds functionality which allows you to define where in the document the returned data is to be inserted. Therefore really only usable when the call only will result in HTML. It is called slightly differently than the other, global, calls, as it is a method tied to a particular jQuery-wrapped DOM element. Therefore, one would do: $('#divWantingContent').load(...)

It should be noted that all $.get(), $.post(), .load() are all just wrappers for $.ajax() as it's called internally.

More details in the Ajax-documentation of jQuery: http://api.jquery.com/category/ajax/ Hope this will help you.

Upvotes: 3

Related Questions