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.