Como fazer um site em Ajax
No nosso arquivo html ou php 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=”java script:;” 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.
Posted in Ajax
julho 7th, 2008 at 2:55 pm
BOa tarde amigo artigo excelente so tem um problema esta dando um erro e naum sei como corrigir se puder entrar em contato fico grato
ajax is not a constructor
var ajax = new ajax();