Conheça o Plugfeed | » Início » Desenvolvimento » Ajax » Como criar um site em ajax
Conheça o Plugfeed | » 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
Como criar um site em ajax

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
Olá amigo. Tenho um grande problema. Já testei vários artigos sobre requisição ajax de páginas, mas nenhuma funciona com acentuação de palavras. Os acentos são substituidos por simbolos e caracteres estranhos. Como resolver isso? Favor enviar resposta para o meu email. Obrigado.
leonardolscl
ctrl c ctrl v
hahaha.. copi cola..
bom dia, eu nao entendi nada por tanto queia que vcs podessem me mandar pelo e-mail um artigo mais explicado .obrigada
ah!quer falar comigo vai la no meu blog aninhazinha.0fra.com
atenciosamente,ana








Um produto Detetive.net