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: 40.304 ]

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

Desktop 3D Linux

Melhorias generalizadas de segurança (parte 2)

Melhorias generalizadas de segurança (parte 1)

Dificuldades com o Debian Etch/Test

Atualizando o Red Hat com o up2date

Leitura recomendada

Introdução ao Jython

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

Entendendo validações e operações aritméticas com Javascript

JavaScript - Programação orientada a objetos

CSS - Manual de Estilo (parte 2)

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