Conheça também: Onmasters . Ofertas . Divulgue! . Vai.la . Geraboleto . Baixa.la . Assista.la . Joga.la
» Início » Desenvolvimento » Ajax » Como criar um site em ajax -->
 
Avaliação: | Publicado em: 24/03/2007
Como criar um site em ajax
Augusto Marchiori Sou um desenvolvedor PHP, HTML, FLASH, JS procurando me aprimorar na area =) http://phplandia.net


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.

Erick Liesner <eliesner@gmail.com>
Bom dia, gostei muito do artigo mas onde consigo a biblioteca "ajaxlib.js" já que foi colocado que teria que setar este arquivo e logo abaixo foi colocado um script js?
opa esqueci de porla ai voce encontra neste link aqui: http://codigofonte.net/?secao=down&Gid=1392&tipo=nada
Tiago Floriano <contato@ajaxonline.com.br>
Poderia ao menos colocar meus créditos não? (http://www.ajaxonline.com.br/forum/viewtopic.php?t=75)
dimmi sueg <dimmisueg@hotmail.com>
ola men, não funciona certo, acho que você usou alguma coisa a mais e esqueceu de colocar aqui
luiz gustavo <gustavo@eliti.com.br>
Olá... eu fiz o uso do ajax como no artigo, mas da um erro do tipo "Ajax não está definido", alguem pode me ajudar.. obrigado..gustavo
infelizmente não está funcionando... nem mesmo com o ajaxlib.js
com serteza
não funciona mesmo!
Cade a biblioteca ajaxlib.js ?
davi
lixo
desconhecido
vsf : Não avaliado
Tiago Floriano <contato@ajaxonline.com.br>
Olá pessoal. O amigo ai copiou o artigo e nem se deu o trabalho de dar os devidos créditos. Quem tiver dúvidas e precisar de uma mão, acesse O ORIGINAL em http://www.ajaxonline.com.br/forum/viewtopic.php?t=75

Abraço!
Num da
Acelio Filho <acelio@floripasom.com>
Ctrl C / Ctrl V

Tira este artigo daí, ô moderador.

porra <porra@>
Não funciona essa porra