Web page becomes unresponsive after ajax call

Question

I have a webpage in which I am getting some data from the server.I have used servlet to get the data from server.I need to fetch the data in every 5 seconds time inerval.I have used ajax call in my script, but after several calls the webpage becomes unresponsive.I have found one thing that here I have replaced the entire html page again , how can I seperate a particular div from the output html content (here page_html). I want to replace the div only

setInterval("update_content();", 5000);

function update_content(){
    $.ajax({
        url: "url", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
        type: "POST",
        async: true,
        cache: false, // be sure not to cache results
    })
    .done(function( page_html ) {
        var newDoc = document.open("text/html", "replace");
        newDoc.write(page_html);
        newDoc.close();         
    });       
}    

Answer 1

how can I seperate a particular div from the output html content (here page_html). I want to replace the div only

You can simply change the contents of a div using jQuery html() method.

<div id="yourDivId">
</div>

JS:

function update_content(){
    $.ajax({
        url: "url", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
        type: "POST",
        async: true,
        cache: false, // be sure not to cache results
    })
    .done(function(page_html) {
        $("#yourDivId").html(page_html);
    });       
}    

This method will load the HTML using AJAX, and then replace HTML contents of #yourDivId with loaded data. This is what AJAX usually used for.