how to update the page without refresh

Question

In Gmail when a new email is received, the page automaticly show the mail without refreshing, how this can be done?

Answer 1

You could send AJAX requests at regular intervals using the window.setInterval function to the server checking if there are updates:

window.setInterval(function() {
    // this code will execute on every 5s
    // so we could send an AJAX request to verify if we
    // have new data. Example with jQuery:
    $.getJSON('/foo', { }, function(result) {
        if (result.newItems) {
            // TODO: update the DOM with the items
        }
    });
}, 5000);

Another possibility is to use the HTLM5 WebSocket API which allows the server to push updates to the client instead of the client polling for updates.

Answer 2

It's done by using ajax. Coincidentally, the question was tagged "ajax".

From wikipedia: http://en.wikipedia.org/wiki/Ajax_(programming)

"Ajax (pronounced /ˈeɪdʒæks/; shorthand for Asynchronous JavaScript and XML)[1] is a group of interrelated web development methods used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not needed, and the requests need not be asynchronous.[2]"

Answer 3

http://blog.twostepmedia.co.uk/send-html-form-results-in-an-email-from-php-using-jquery-ajax/

Made quite easy with jQuery.

Answer 4

You said it AJAX XMLHTTPRequest search for jQuery and ajax on the wiki, it's not sow tough stuff nowadays as it was 4-5 years ago, when we were using hidden iframes to simulate desktop application behaviour online.

This is a point to start: http://api.jquery.com/jQuery.ajax/

And this is the main idea: http://www.w3.org/TR/XMLHttpRequest/