O truque agora é o seguinte: precisamos fazer com que chamadas à função carrega sejam atribuídas aos cliques nos links do menu. O jeito pré-histórico de se fazer isso é inserir onclick="carrega(1);return false" em cada um dos links. Mas isso vai gerar uma série de dores de cabeça. O primeiro problema é que assim acoplamos o HTML ao Javascript, de modo que se um dia removermos ou mudarmos o javascript vamos ter que mexer de novo no HTML. Para você acostumado com tableless, isso é o equivalente a usar align="center" bgcolor="red", por exemplo. O segundo problema é que em navegadores sem suporte a XMLHttpRequest a função vai ser chamada assim mesmo, gerando erros de javascript. Então o ideal é que usemos event listeners, de modo a não ter que inserir mais nada em nosso HTML. Isso ficaria assim:
function menuclick(e){
//Correção para eventos quebrados da Microsoft
if(typeof(e)=='undefined')var e=window.event
source=e.target?e.target:e.srcElement
//Correção para o bug do Konqueror/Safari
if(source.nodeType==3)source=source.parentNode
//Obtém o número quebrando a url
n=source.getAttribute("href").replace(/.*=/g,"")
//Chama o carrega
carrega(parseInt(n))
//Cancela o click (evita a navegação)
return false
}
function init(){
//Obtém os links do menu
var menu=document.getElementById("menu")
var links=menu.getElementsByTagName("a")
//Atribui o evento
for(var i=0;i<links.length;i++)
links[i].onclick=menuclick
}
if(xmlhttp)window.onload=init
Aqui também o código é bastante simples, e você deve entender apenas lendo os comentários. Os pontos que podem gerar discussão são as correções para IE e Konqueror no começo da menuclick e a expressão regular que quebra a url.
As correções para navegadores foram ensinadas no tutorial de DHTML Crossbrowser, na seção "Comportamento", e a expressão regular é bastante simples, ela apenas elimina do endereço do link tudo o que vem antes do sinal de igual (Para saber mais sobre a fantástica ferramenta que é o uso de expressões regulares recomendo o guia do Aurélio.)
O passo seguinte é colocar todo o conteúdo em um arquivo javascript, que eu chamei de ajax.js, e inserir uma chamada para esse arquivo no cabeçalho do index.php. E está pronta nossa aplicação.