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.197 ]

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

1 0

Denuncie Favoritos Indicar Impressora

Recebendo a resposta do servidor

Como acabamos de ver, através do XMLHttpRequest é possível se comunicar direto com o servidor sem precisar reler toda a página, mas para isso também é preciso saber interpretar essa resposta de forma específica.

Para isso existem três novos amigos a serem conhecidos: onreadystatechange, readyState, responseText.

onreadstatechange

Função responsável pelo processamento das informações vinda do servidor.

readyState

Responsável pelo gerenciamento da resposta do servidor. Toda vez que o servidor responde a requisição do objeto XMLHttpRequest, essa função é acionada mantendo o status de acordo com a seguinte tabela:

Estado	Descrição
0	Requisição não inicializada
1	Requisição inicializada
2	Requisição enviada ao servidor
3	Requisição em processo
4	Requisição completa

responseText

Resposta do servidor a requisição solicitada.

Agora que já temos uma noção melhor, precisamos apenas saber que ao invés de usar o tradicional Submit do formulário, usamos o método open() e send(), sendo que o open() recebe 3 argumentos:

GET/POST - Assim como em formulários, define como os dados serão enviados.
ENDEREÇO - Caminho completo do arquivo no servidor que irá responder a requisição.
TRUE/FALSE - TRUE para comunicação sem sincronismo (mais utilizado para não correr o risco de travar o navegador), ou FALSE para comunicação com sincronismo.

Parece complicado? Bem, vamos seguir em frente e verificarmos isso...

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

Atualizando o Red Hat com o up2date

Melhorias generalizadas de segurança (parte 1)

Desktop 3D Linux

Melhorias generalizadas de segurança (parte 2)

Dificuldades com o Debian Etch/Test

Leitura recomendada

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

Servidor LAMP no Linux Mint e Ubuntu

Introdução ao Jython

Manual de XHTML

Automação de tarefas com Gulp

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