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↳JavaScript116 conteúdosJavaScript em 2020: O que esperarDev (Back & Front) · jan 2020Campos públicos e privados em classes JavaScript – O que vem por aí no ESNextDev (Back & Front) · abr 201929 anos de JavaScript!Dev (Back & Front) · jan 2025Ver tudo em Dev (Back & Front) →”></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↳Banco de dados134 conteúdosSQL ou NoSQL: eis a questão!!Data · mar 2020Banco de dados: como organizar e dar segurança para milhões de dados de loteriasData · mai 20215 serviços gratuitos na cloud para bancos de dados PostgresData · fev 2025Ver tudo em Data →, 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(){<br /> new Ajax.Updater('destino', 'novo_arquivo.php', { method: 'get' });<br />} 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><br /> <head><br /> <script src="prototype.js" type="text/javascript"></script><br /> <script><br /> function chama_arquivo(){<br /> new Ajax.Updater('destino', 'novo_arquivo.php', { method: 'get' });<br /> }<br /> </script><br /> </head><br /> <body><br /> <div id="destino"><br /> </div><br /><br /> <input type="button" onClick="chama_funcao();"/><br /> </body><br /></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.
já atuou em várias empresa de desenvolvimento de softwares para internet e atualmente é proprietário da Info-One, empresa atuante no mercado de site de publicitários, e-commerce, intranets, vitrines virtuais e extranets. Confeciona video aulas de como desenvolver um site desde a instalação dos programas até a implantação do site em um servidor (www.e-container.com.br). Trabalha com diversas linguagens (Php, Java, Ruby on Rails e Flex). Mantém o site www.fernandobecker.com.br
