AJAX - Parte 1

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

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


O grande diferencial



Quando falamos dos métodos já descritos, normalmente os usamos em conjunto para fazer páginas com informações de um banco de dados, como no caso por exemplo do próprio VOL, onde os artigos são enviados e após analisados e validados são disponibilizados.

A parte inicial desse processo exige o preenchimento de campos e mais campos até a conclusão do artigo, sempre tendo que reler toda a página. Algo bem tradicional e amplamente utilizado até o momento para quase todos os sites.

Esse tipo de processo é feito através de um formulário em HTML, com envio de dados ao servidor através dos métodos GET ou POST, exigindo do usuário pressionar um botão de envio que chama o método Submit, o qual é responsável pelo envio através do GET ou POST. É comum entretanto antes validar o que está sendo enviado através de JavaScript, fazendo um botão/link de envio chamar uma função JavaScript, a qual após aceitar os dados como válidos aciona o Submit.

Uma vez os dados enviados ao servidor, você precisa esperar ele processar e responder uma nova página a qual deve ser lida, momento o qual a tela pisca, repetindo algumas informações como o menu (dentre outras) e apresentando novas que são os resultados do processamento do servidor.

Para aliviar esse processamento lento e tedioso e reaproveitar o que deve ser mantido, existem alguns métodos utilizados como dividir a página em frames ou iframes (inline frames) que basicamente seria dividir a página em algumas áreas, para se reservar as comuns e modificar apenas as necessárias. Isso parecia ser a solução, mas com o tempo foi demonstrando problemas, pois cada frame (ou iframe) é tratado como um documento a parte, ao invés de apenas um, o que significa dor de cabeça em algumas situações, como na hora imprimir.

Com AJAX é possível contornar esse tipo de problema, se comunicando diretamente com o servidor através do objeto XMLHttpRequest existente no JavaScript. Sendo assim, você envia os dados ao servidor, ele processa e o retorna para a mesma página, sem a necessidade de carregar tudo novamente, ou utilizar frames/iframes, deixando a navegação mais rápida e mais amigável, uma vez que tudo ocorre em background (sem que você perceba) como você pode ter notado no Google Suggest.

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

Melhorias generalizadas de segurança (parte 2)

Melhorias generalizadas de segurança (parte 1)

Atualizando o Red Hat com o up2date

Dificuldades com o Debian Etch/Test

Desktop 3D Linux

Leitura recomendada

Servidor LAMP no Linux Mint e Ubuntu

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

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

CSS - Manual de Estilo (parte 2)

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

[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

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

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

[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

[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

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

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

[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!!

[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!

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

Otimo Tutorial amigo. Parabens.

[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

[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!


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts