Para usar AJAX em nossos
sites vamos utilizar uma biblioteca chamada “prototype”, das que eu
testei até hoje acho que essa (em sua versão básica) tem a melhor
performance. Para isto basta baixá-la e adicionar no seu código fonte da
seguinte maneira.
<script src=”prototype.js” language=”javascript”></script>
Obs.: Vamos supor que a biblioteca está na raiz do site.
download
Agora teremos de criar outro arquivo com um conteúdo qualquer
dentro. Importante: se tiver alguma requisição ao banco de dados, terá
de ser feita uma nova conexão dentro desse arquivo, no caso de estar usando funções ou classes, basta instanciar.
Depois do arquivo criado, temos de adicionar uma função java script para que posso “chamar” o novo arquivo.
function chama_arquivo(){
new Ajax.Updater('destino', 'novo_arquivo.php', { method: 'get' });
} Ok, vamos esclarecer algumas coisas: “destino” é id aonde o novo_arquivo será carregado.
Agora
só está faltando chamar a função javascript que irá chamar o ajax.
Faremos isso no evento “onClick” da seguinte maneira.
<input type=”button” onClick=”chama_funcao();”/>
Pronto vamos juntar todas as informações:
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script>
function chama_arquivo(){
new Ajax.Updater('destino', 'novo_arquivo.php', { method: 'get' });
}
</script>
</head>
<body>
<div id="destino">
</div>
<input type="button" onClick="chama_funcao();"/>
</body>
</html>Ao clicar no botão será carregado o novo_arquivo.php dentroda
div “destino” sem recarregar toda a página.
Agora é só usar a
imaginação!
Abraços e até a próxima.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?