Pular para o conteúdo

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.
Rodrigo Ferreira Valentim engos

Por Rodrigo Ferreira Valentim em 18/09/2007

Hits: 41.804 Categoria: Javascript Subcategoria: Introdução
  • Indicar
  • Impressora
  • Denunciar

Conceito e história

AJAX é a sigla para Asynchronous JavaScript And XML.

Ele teve seu início em 2005 através do Google Suggest e apesar do que muitos acreditam, ele não é uma linguagem de programação, mas sim um método de utilização para padrões já existentes.

Esse método é composto pelos seguintes padrões:
  • CSS
  • HTML
  • JavaScript
  • XML

Sendo assim os benefícios do AJAX são independentes do Servidor WEB, do navegador, onde a compatibilidade e as diferenças já são conhecidas e fáceis de se tratar (ao menos para os principais), como veremos, ou pelo sistema operacional.

Com isso é possível criar páginas e sistemas web melhores, mais rápidos, dinâmicos, com grande nível de compatibilidade e mais amigáveis aos usuários, pois ele permite se comunicar diretamente com o servidor, fazendo com que essa comunicação transfira pequenas quantidades de dados entre o servidor e o navegador ao invés de toda a página, facilitando a atualização de dados na tela, que pode passar a ser apenas de pequenas áreas ao invés de recarregar toda a página.

A utilização do AJAX facilita trazer boa parte da interatividade que se tem com as aplicações que rodam nos sistemas operacionais, para aplicações ou páginas que rodam no navegador web, permitindo ao usuário arrastar janelas dentro do navegador, criar configurações específicas etc. Para se ter uma idéia rápida, visite o site iGoogle.

E o melhor de tudo é que como esse método é composto por padrões já utilizados amplamente, tudo que é necessário para muitos desenvolvedores é simplesmente ampliar um pouco seus conhecimentos.

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 1)

Dificuldades com o Debian Etch/Test

Melhorias generalizadas de segurança (parte 2)

Desktop 3D Linux

Atualizando o Red Hat com o up2date

Leitura recomendada

Manual de XHTML

Introdução ao Jython

JavaScript - Programação orientada a objetos

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

Servidor LAMP no Linux Mint e Ubuntu

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

Entre na sua conta para comentar.