Olá amigos! A pedidos, vou postar aqui como fazer um site em ajax, igual ao Ajax Online. Não sou expert no assunto, estou aprendendo como muitos que acessam este site em busca de conhecimento, mas acho que vai ser muito útil. O que vou postar aqui foi retirado do nosso fórum, mais especificamente dos tópicos "Dúvida de Iniciante" e "Método POST".
Pois bem, vamos ao que interessa! O Ajax Online usa o framework AjaxLib, não por ser melhor ou algo parecido, não estou fazendo propaganda aqui, porém foi a biblioteca sugerida no fórum na época em que estavamos desenvolvendo o site, e será ela que iremos usar aqui. Para baixa-la, clique <a href='http://www.codigofonte.net/scripts-1392/ajaxlib' target=_blank>aqui</a> ou acesse a área de downloads do site para pega-la. Ah! Claro! O que é framework? Framework é tudo aquilo que é usado para auxiliar em um trabalho, em um projeto, seja programas, bibliotecas, tudo! Podemos chamar esse framework de biblioteca também.
No nosso arquivo html iremos inserir a linha abaixo para chamar a biblioteca:
<script language="JavaScript" type="text/JavaScript" src="includes/ajaxlib.js"></script>
Abaixo veremos como é o código que irá fazer o processo de enviar a solicitação, pegar os dados e exibi-los na tela:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
function mostrarConteudo(toLoad){
var div = document.getElementById("conteudo");
div.innerHTML = "<center>Carregando a página...</center>";
var ajax = new Ajax();
ajax.set_receive_handler(
function(c) {
div.innerHTML = c;
}
);
ajax.send(toLoad);
}
//--><!]]>
</script>
No código acima primeiro criamos uma função chamada mostrarConteudo. O texto onde diz "conteudo" é o nome da tag div em que iremos mostrar o conteúdo do site correspondente a cada link do menu. Como já disse, estou aprendendo tanto quanto vocês, por isso, irei apenas postar os códigos aqui para você copiar e estudar. Lembrando que ajax é muito mais que mostrar um carregando. Não é porque você copiou e colou isso aqui e fez funcionar que você já está programando em ajax. Ai fica a seu critério estudar mais sobre este facinate assunto ou simplesmente ficar copiando e colando.
Por enquanto, os códigos acima ficam entre as tags head. A partir de agora, os códigos que serão apresentados virão entre as tags body. Vamos ver como serão os links que irão chamar o conteúdo:
<a href="#" onClick="mostrarConteudo('paginas/link.htm');">Link</a>
No link acima, temos o onClick. Significa que ao clicar ele irá executar a função mostraConteudo, buscando o arquivo link.htm, que está dentro da pasta paginas. Lógico que este arquivo deve existir, se não o script vai ficar mostrar a mensagem de carregando até você cansar (rsrs)!
Agora temos que criar a div onde irá aparecer o conteúdo:
<div id="conteudo"></div>
Pronto! Está feito! Agora sempre que alguém clicar no seu link, o conteúdo irá aparecer dentro da div conteúdo. Para que, ao carregar o site já apareça algo dentro desta div, sem precisar clicar no link, você deve inserir o seguinte código na tag body:
<body onLoad="mostrarConteudo('paginas/pagina_inicial.htm');">
Você pode inserir outros códigos na tag body, não precisa ser exatamente isto que está acima, porém deve necessariamente conter o conteúdo do onLoad.
Tiago Floriano (www.ajaxonline.com.br)
Meu favorito
Adicionar Artigo
