Eu já postei aqui no meu blog, como carregar conteudo com ajax em div, daí, aprimorei aquele código, e mostrei como carregar conteudo com ajax, colocando também um gif de loading.. e também como fazer tudo isso de cima, ainda trocando a URL, e usando um plugin na página interna.

Hoje é dia de carregar várias divs ‘separadas’, várias áreas diferentes com ajax.

Já vi no fórum um cara(com dúvida) resolvendo isso, de uma forma ‘natural’ do ponto de vista de pensamento humano, mas terrível para performance e manutenção do site.

O código que ele usou era mais ou menos assim:

jQuery(document).ready(function(){
  var sidebar = jQuery('#sidebar');
  var content = jQuery('#content');
  var other = jQuery('#other');

  jQuery('#menu a').click(function( e ){
    e.preventDefault();
    if( jQuery( this ).attr('href')=='home.html' )
    {
      sidebar.load('home_sidebar.html');
      content.load('home_content.html');
      other.load('home_other.html');
    }
    else if( jQuery( this ).attr('href')=='cadastro.html' )
    {
      sidebar.load('cadastro_sidebar.html');
      content.load('cadastro_content.html');
      other.load('cadastro_other.html');
    }
  });
});

Ou seja, a cada clique em um link do menu, ele fazia 3 requests. Um para cada ‘área’ do site.

Tinha que manter 3 arquivos distintos para cada link, e esse jogo de if/else para saber quais arquivos ele deve invocar.

Isso deve ter um ‘mau cheiro’.

A cada clique fazer 3 requisições, e ter que manter 3 arquivos separados para cada área.. além de que o site ‘não vai funcionar corretamente’, se o suporte a js estiver desabilitado… muitos motivos para evidenciar que algo está errado.

Mas então, o que podemos fazer?

A minha sugestão, é aproveitar o ótimo parser de HTML da lib jQuery, fazer um único request, e então direcionar cada conteúdo para o local específico.

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  var sidebar = jQuery('#sidebar');
  var content = jQuery('#content');
  var other = jQuery('#other');

  request( 'home.html' );

  function m_load( data )
  {
    var text = jQuery( '<div>'+data+'</div>' );//forçando o parser

    sidebar.html( text.find('#sidebar').html() );
    content.html( text.find('#content').html() );
    other.html( text.find('#other').html() );

    jQuery(document).attr( 'title', text.find('title').html() );
  }
  function request( file )
  {
    jQuery.ajax({
      url: file,
      success: function( data )
      {
        m_load( data );
      }
    });
  }
  jQuery('#menu a').click(function( e ){
    e.preventDefault();
    request( jQuery( this ).attr('href') );
  });
});

</script>
</head>
<body>
  <ul id="menu">
    <li><a href="home.html">Home</a></li>
    <li><a href="cadastro.html">Cadastro</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul><!-- /menu -->
  <div id="sidebar">

  </div><!-- /sidebar -->
  <div id="content">

  </div><!-- /content -->
  <div id="other">

  </div><!-- /other -->
</body>
</html>

Note que além de fazer o parser do retorno:

var text = jQuery( '<div>'+data+'</div>' );//forçando o parser

    sidebar.html( text.find('#sidebar').html() );
    content.html( text.find('#content').html() );
    other.html( text.find('#other').html() );

eu também faço a troca do title do documento:

jQuery(document).attr( 'title', text.find('title').html() );

Demonstração

Se vc tiver o firebug instalado, confira na aba Net Rede -> xhr que faço apenas uma requisição.