load webpage in several parts using ajax

I want to load a webpage in several parts, maybe using jquery ajax or just simple javascript ajax function开发者_如何学运维s so the user can start interacting with the webpage withouth having to wait for the whole page to load. Just like gmail does.

How can I achieve such a thing?

Generally you need to dedicate some div containers for inserting dynamically loaded contents.

<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>

Then you can load other pages on startup.

$(function(){
    $('#content').load('content.php');
    $('#content').load('sidebar.php');
});

Of course this is only a start. You have to check for errors on loading and retry. Also using hash value you can dynamically load content & sidebar. etc..