Vamos agora construir a página PHP que será solicitada pelo objeto XMLHttpRequest, em seguida faremos as função Javascript em que o navegador usará está página. Vamos usar a própria funcoes.php, inserindo ao final:
/*
Essa aqui é a parte necessária para o Ajax. Se este
arquivo for chamado sozinho, recebendo um parâmetro
n, ele retorna o texto de índice n. Passa pela
função urlencode por causa dos bugs do MSXML com
acentos (valeu mais uma vez, Bill!)
*/
if(isset($_GET["n"])){
$t=leconteudo(intval($_GET["n"]));
echo(urlencode($t));
}
Note que estamos usando a leconteudo, função que já tínhamos. DRY. Esse é um bom conselho. Se for preciso, quebre as funções que você já tem em pedaços menores, para que você possa usar para gerar o código para Ajax as mesmas funções que usa para o código normal. Isso vai salvar sua vida, principalmente na manutenção.
Usamos urlencode porque o componente da Microsoft tem um grave problema com acentos. Não consegui até hoje fazer o Internet Explorer 5 requisitar corretamente páginas com acentos de jeito nenhum. Então usamos urlencode no servidor e depois, no navegador, usaremos seu inverso em javascript: unescape. Agora a mágica:
atual=0
function carrega(n){
//Exibe o texto carregando no div conteúdo
var conteudo=document.getElementById("conteudo")
conteudo.innerHTML='<div class="carregando">carregando...</div>'
//Guarda a página escolhida na variável atual
atual=n
//Abre a url
xmlhttp.open("GET", "funcoes.php?n="+n,true);
//Executada quando o navegador obtiver o código
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
//Lê o texto
var texto=xmlhttp.responseText
//Desfaz o urlencode
texto=texto.replace(/\+/g," ")
texto=unescape(texto)
//Exibe o texto no div conteúdo
var conteudo=document.getElementById("conteudo")
conteudo.innerHTML=texto
//Obtém os links do menu
var menu=document.getElementById("menu")
var links=menu.getElementsByTagName("a")
//Limpa as classes do menu
for(var i=0;i<links.length;i++)
links[i].className=""
//Marca o selecionado
links[atual-1].className="selected"
}
}
xmlhttp.send(null)
}
Essa função carrega o texto selecionado por n e o coloca no div conteudo, além de marcar o link selecionado no menu com a classe selected. Se você tiver dificuldades com ele, sugiro uma lida no meu tutorial de DHTML Crossbrowser, principalmente nas seções "Maquiagem" e "Conteúdo".