AJAX - Parte 1

engos

Após pesquisar em toda internet não encontrei nenhum tutorial adequado explicando sobre AJAX de forma simples e completa, por isso após sofrer um pouco com ele, pretendo compartilhar algumas informações a respeito para que todos possam aproveitar dele. Nesse primeiro artigo estou conceituando e dando um exemplo bem simples de como trabalhar com AJAX.

[ Hits: 39.218 ]

Por: Rodrigo Ferreira Valentim em 18/09/2007 | Blog: http://www.unitech.pro.br

1 0

Denuncie Favoritos Indicar Impressora

Colocando em prática de forma muito simples

Chega de teoria e vamos ao que interessa, para quem está com preguiça de digitar, pode encontrar na seção de scripts o download dos arquivos abaixo e jogar direto no diretório de seu servidor web (usei o apache).

Primeiramente vamos criar um script no servidor chamado de hora.php. Apesar de estar usando PHP, como vocês irão ver, é tão simples que é fácil de se entender e portar para qualquer outra linguagem, com pouca ou nenhuma pesquisa, mesmo para quem não sabe nada de PHP.

<?php
//Visite http://www.unitech.pro.br
echo date('h:i:s A');
?>

Agora vamos para o arquivo que chamei de ajaxTeste.html, colocando-o no mesmo diretório (pasta) que o arquivo anterior, lembrando que deve-se ter acesso a ele através de seu servidor web.

<html>
<body>



<script type="text/javascript">
function Exemplo1() {
   var ajaxObj;

   try {
      // Firefox, Opera 8.0+, Safari...
      ajaxObj=new XMLHttpRequest();
   } catch (e) {
      // Internet Explorer 6 e superior
      try {
         ajaxObj=new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
         // Internet Explorer 5.X
         try {
            ajaxObj=new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
            alert("Seu navegador não possui suporte ao AJAX!");
            return false;
         }
      }
   }
   ajaxObj.onreadystatechange=function() {
      if(ajaxObj.readyState==4) {
         document.exemplo.hora.value=ajaxObj.responseText;
      }
   }
   ajaxObj.open("GET","hora.php",true);
   ajaxObj.send(null);
}
</script>

Agora basta chamar pelo seu navegador (e através de seu servidor web) o arquivo ajaxTeste.html e clicar no botão para que ele atualize a hora sem precisar reler toda a página.

Claro que mesmo que fosse reler toda a página nesse caso você nem perceberia, mas para um primeiro passo, esse é bem didático.

Página anterior Próxima página

Páginas do artigo

   1. Conceito e história
   2. O grande diferencial
   3. Recebendo a resposta do servidor
   4. Colocando em prática de forma muito simples
   5. Conclusão

Outros artigos deste autor

Dificuldades com o Debian Etch/Test

Atualizando o Red Hat com o up2date

Melhorias generalizadas de segurança (parte 1)

Desktop 3D Linux

Melhorias generalizadas de segurança (parte 2)

Leitura recomendada

Automação de tarefas com Gulp

CSS - Manual de Estilo (parte 2)

JavaScript - Programação orientada a objetos

Extensões imperdíveis para quem usa o Git (e o GitHub) no Brackets

Manual de XHTML

Comentários

[1] Comentário enviado por msantoro em 18/09/2007 - 14:32h

Parabens Pela Iniciativa amigo ... quando iniciei no Mundo AJAX realmente penei varios dias tentando decifrar codigos prontos e explicacao detalhada mesmo naum encontrei ...

Continue com os Artigos e Agrardo o Segundo Capito..

Abraços

0 0

[2] Comentário enviado por elgio em 18/09/2007 - 14:58h

Muito bom.

Aprecio por demais artigos que não são mera receita de bolo. "Ensinar a pescar"...

Parabéns

0 0

[3] Comentário enviado por r4drig4 em 18/09/2007 - 16:09h

Parabens ...tem coisa ja sabia....open(); send(); byElementId; innerHTML......

0 0

[4] Comentário enviado por ramon.silva em 18/09/2007 - 17:09h

Olá,
Muito bom o seu tutorial, porém tem dois pontos que gostaria fazer observações:

Primeiro -> AJAX não é uma mistura de Javascript, HTML, CSS e XML. E sim apenas Javascript e XML (esse segundo há controvérsias), muita gente confunde isso, pois como o AJAX dá uma certa dinamicidade na página, as pessoas começaram a trabalhar com efeitos e tarefas para que o usuário tenha uma experiência boa na navegação o que antes não se fazia, logo começaram atribuir isso ao AJAX, mas não é bem assim. A técnica AJAX é apenas o fato de fazer requisição ao servidor sem a necessidade dar reload na página, todo resto é DHTML (Dynamic HTML).

Segundo -> Você menciona que AJAX não passa de JavaScript com HTML, na verdade trata-se de JavaScript com XML (mesmo que o xml foi só a requisição, XmlHttpRequest), como mencionei anteriormente todo o resto é DTHML.

Respondendo à dúvida de porque se chamar AJAX, a questão é muito simples, nós damos nomes às coisas e AJAX trata-se de uma técnica (por sinal muito boa), imagina que todas as vezes que formos mencionar esta técnica falarmos:"vamos usar agora aquela técnica-de-pegar-os-dados-assincronamente", sem contar que cada um iria "chamar" de um jeito e em cada lugar uma forma de "chamar" iria ser mais utilizada que a outra, iria ficar complicado mencionar sobre tal técnica. Por isso inventaram a sigla (Asynchronous Javascript And XML) Traduzindo (Javascript e XML assincronos), o nome é bem coerente, não concorda?

Espero ter sido esclarecedor e não ter sido impertinente com as minhas opiniões, sobre o assunto.

_____________________
http://coisasdeweb.blogspot.com

0 0

[5] Comentário enviado por henryjr em 18/09/2007 - 23:02h

O script teste nao funfou rs
Firefox 2.0.0.6 e IE7

0 0

[6] Comentário enviado por cvs em 19/09/2007 - 07:16h

ajax é o futuro... hehehhe
Muito bom o artigo, esperando as outras partes...

0 0

[7] Comentário enviado por hm_maniac em 19/09/2007 - 09:38h

Muito bom!!

Eu fiz um trambalho de final de semestre na faculdade sobre ele, pra quem se interessar, entra aqui: http://www.mhcgolds.110mb.com/

É bem simples, de iniciante pra iniciante mesmo!! Valeu!!

0 0

[8] Comentário enviado por engos em 19/09/2007 - 09:49h

Obrigado pelos comentários, com certeza eles ajudam bastante nas correções do artigo.

Alem disso também contribuem para a segunda parte, pois estarei começando a fazer nesse fim de semana, pois gostaria de ver alguns comentários para focar melhor para o pessoal interessado, ao invés de só jogar as informações.

Sobre o script, você colocou ele no servidor web e tem acesso/permissão a ele? Pois é necessário para poder funcionar.

Se ainda assim não funcionar, quem tiver dificuldades me manda um e-mail pelo site que respondo e ajudo a fazer funcionar se necessário até em outra linguagem diferente do PHP.

Obrigado a todos!

0 0

[9] Comentário enviado por sergrodr em 20/09/2007 - 00:11h

Otimo Tutorial amigo. Parabens.

0 0

[10] Comentário enviado por Czuber em 20/09/2007 - 15:37h

O exemplo não funcionou porque faltou um pedaço do fonte da página HTML.

Cole isto dentro do body logo após o </script>:

<form name="exemplo">
<input type="text" name="hora" value="">
<input type="button" name="botao" value="Executar" onClick="Exemplo1()">
</form>

Gostei do artigo. Sabia o que era AJAX mas ainda não tinha feito um hello world, agora sim ;) Obrigado!

Espero também ter ajudado.
Abraço

0 0

[11] Comentário enviado por cguerra em 24/09/2007 - 15:29h

Muito bom o artigo, melhor ainda o comentário de Ramon, que é bem claro...

sem mencionar que o AJAX nasceu da MS.
já fui p/ algumas palestras sobre AJAX e percebi que era uma metodologia muito boa, e que iria pegar...

Abraços!

0 0