Antes de mais nada, vamos ajustar certos conceitos.
AJAX = Asynchronous Javascript XML. Portanto, AJAX é basicamente uma técnica que consiste em fazer requisições HTTP de forma assíncrona para o servidor (Nota: AJAX não é uma tecnologia. É uma técnica. Quem disser que é uma tecnologia merece arder no fogo do inferno pela eternidade). Se você não sabe o que é uma requisição HTTP, sugiro dar uma olhada aqui. Não tem como escapar, é a base de tudo.
Fazer uma requisição assíncrona significa que o processo irá rodar por trás das cortinas, não interferindo no funcionamento da tela no navegador, ao contrário do que acontece em uma requisição normal. Quando executamos uma requisição síncrona no navegador (através de um link ou submetendo os dados de um formulário), toda a interface para de responder a eventos. Isto fica particularmente claro (e chato) quando a página é pesada e/ou a rede esta lenta.
As vantagens da técnica são óbvias: interfaces mais leves, suaves, muito próximas daquelas de aplicativos desktop.
Pré requisitos para conseguir mexer com AJAX? conhecer um pouco de Javascript, DOM HTML e conhecer pelo menos uma linguagem de programação server side.Passo 1: Preparando o terreno
Para começar, uma má notícia: muito do trabalho normalmente feito pelo navegador quando submetemos um formulário com dados tem que ser feito pelo script javascript. Ou seja, tem que ser feito pelo desenvolvedor. Um deles é construir a string de requição. O formato da string é algo do tipo
chave1=valor1&chave2=valor2&…
Não existe muito segredo. O único cuidado a ser tomado é em relação aos caracteres especiais. Espaços, símbolos como &, =, caracteres acentuados e caracteres não ASCII devem ser convertidos para o formato Unicode. Em Javascript existem várias funções que fazem este tipo de conversão, mas o mais adequado é o par encodeURIComponent/decodeURIComponent.
O seu uso é muito simples: var stringcodificada = encodeURIComponent(stringoriginal).
Em caso de requisições muito longas, aconselho o uso de um StringBuffer, que torna o processo de contatenação de strings muito mais eficiente. Veja aqui como fazer isso.
Passo 2: enviando os dados para o servidor
Muito bem. Já temos uma string de requisição, agora precisamos enviar isto para o servidor. Para isso, existem 2 métodos: GET e POST .- O método GET envia os parâmetros na requisição (www.meusite.com?chave1=valor1&chave2&valor2…) e tem uma limitação de tamanho de 1024 bytes. É mais indicado para enviar parâmetros relacionados á busca de informações no servidor.
- O método POST envia os parâmetros de forma separada, e não tem limitação de tamanho. É mais indicado para envio de dados de formulários, textos longos e dados que serão armazenados no servidor. Se os dados forem maiores que 4KB, alguns cuidados especiais devem ser tomados, como mostrado aqui.
var req;O código acima cria um objeto de requisição para Windows ou Firefox (eles são ligeiramente diferentes, apesar de terem interfaces de uso iguais). Com o objeto de requisição na mão, o próximo passo é definir a função que será chamada quando o resultado da requisição enviado pelo servidor estiver disponível:if (window.XMLHttpRequest)
req = new XMLHttpRequest();
else if (window.ActiveXObject)
req = new ActiveXObject('Microsoft.XMLHTTP');
else
req = new ActiveXObject('Microsoft.XMLHTTP2');
req.onreadystatechange = minhafunc;
O uso desta função será explicado no próximo passo. Finalmente, o envio dos dados. Se o método usado for GET, a receita de bolo é
requestObject.open('GET', url, true);
requestObject.send(null);
Onde url = endereçodapagina?stringderequisicao. Se o método for POST, a receita de bolo é
requestObject.open('POST', url, true);
requestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
requestObject.setRequestHeader("Connection", "close");
if (parameters != null)
requestObject.setRequestHeader("Content-length", parameters.length);
requestObject.send(parameters);
onde URL é apenas o endereço do servidor, e parameters contém a string de requisição. Muito bem, os dados foram enviados. Agora é esperar os dados voltarem, e irmos para o próximo passo.
Passo 3: obtendo a resposta
No passo 2, definimos o valor do atributo req.onreadystatechange. Esse atributo é uma função que será chamada pelo navegador para tratar a resposta. Uma forma de definir a função é
req.onreadystatechange= function(){
//corpo da função vai aqui
}
Um ponto a ser ressaltado é que esta função pode ser chamada várias vezes, sem a resposta estar disponível ainda: a o processo passa por vários estados antes de estar pronto para processamento. Portanto é necessário testar o status do processamento. Isto pode ser feito com o seguinte código
req.onreadystatechange= function(){
if (req.readyState == 4){
if (req.status == 200){
//Resposta disponivel
}
}
}
O atributo readyState pode assumir 4 valores:
- 0: requisição não inicializada
- 1: conexão estabelecida
- 2: requisição recebida
- 3: processando
- 4: requisição terminad, resposta pronta.
Muito bem, temos a resposta. O último passo é processar o resultado. Para obter o DOM XML, basta executar req.responseXML. Para trabalhar com o conteúdo como se fosse uma sequência de texto, basta executar req.responseText. E para processar o resultado como JSON, basta executar eval(“(“+req+”)”).
Segue um exemplo completo de código que recebe um snippet HTML (um trecho de código em HTML) e atualiza o conteúdo de uma DIV com este código:
function atualizaDiv(){
var req;
if (window.XMLHttpRequest){
req = new XMLHttpRequest();
} else if (window.ActiveXObject){
req = new ActiveXObject('Microsoft.XMLHTTP');
}else{
req = new ActiveXObject('Microsoft.XMLHTTP2');
} req.open('POST', url, true);
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); req.onreadystatechange = function(){
if (req.readyState == 4){
if (req.status == 200){
document.getElementById("minhaDiv").innerHTML=req.responseText;
document.body.style.cursor = "default";
}
}
}
req.send(params);
}
Em breve escreverei um post comentando sobre vantagens e desvantagens de se usar texto, XML ou JSON como resposta de uma requisição.
Caso esteja interessado em usar uma biblioteca simples para desenvolver sites com Ajax, ou queria ver exemplos de código escrito em Javascript, dê uma olhada na Juice Lib, uma biblioteca em Javascript que estou desenvolvendo. O código está em http://code.google.com/p/juicelib.
Quer aprender mais dicas avançadas de Javascript? Funções com argumentos variáveis em Javascript, Captura de teclas em Javascript – Parte 1, Captura de teclas em Javascript – Parte 2 e Concatenação eficiente de Strings em Javascript
Muito interessante!!
Vou colocar um post na minha página com os devidos créditos!!!
Link | August 22nd, 2007 at 15:12
AJAX em 20 minutos | hebertphp wrote:
[...] Fonte: Log4Dev [...]
Link | August 22nd, 2007 at 15:15
Agradecido
Link | August 22nd, 2007 at 16:01
Aprenda AJAX em 20 mínutos wrote:
[...] artigo publicado no site log4dev.com escrito em português que faz uma introdução sobre o uso de Ajax. Se você não entende nada [...]
Link | August 23rd, 2007 at 15:26
20 minutos para aprender AJAX « Thunder-Boy wrote:
[...] artigo do site log4dev.com que faz uma introdução sobre o uso de [...]
Link | August 27th, 2007 at 00:41
Adorei o artigo. Lendo este blog fico impressionado com o quanto ainda tenho de aprender.
Abraços
Link | October 22nd, 2007 at 16:21
Eu também Igor, eu também.
Obrigado pelo comentário!
[]s
Link | October 22nd, 2007 at 16:43
Miguel, ótimo post, muito bem escrito. Dei uma olhada rápida na documentação do juice lib e também só tenho à te parabenizar.
Se me permitir, gostaria de fazer uma observação sobre o que escreveu: o conceito de AJAX (o original) está relacionado à utilização de XML (e não HTML, ou qualquer outra coisa) na resposta à requisição do XMLHttpRequest. O motivo disso é o seguinte, o conceito de AJAX surgiu da necessidade de se buscar no servidor somente os dados, nada de formação, layout, JS, etc. Somente os dados, com isso você:
O “AJAX” da forma como você utilizou é eficiente, cumpre com sua necessidade de atualizar a tela sem o efeito do refreshing, mas não aproveita essas características que também são bastante interessantes. E por não utilizar XML, “perde” a característica do AJAX (Asynchronous Javascript And XML)
PS: Cheguei ao seu post a partir de uma resposta sua (em 03/12) no grupo python-brasil (do qual também participo) preferi não responder na thread do grupo pois já seria OT e a pergunta original já estava muito bem respondida, por você e pelo Mário Augusto.
[] Anderson P Costa
Link | December 9th, 2007 at 14:10
Anderson,
concordo em parte com o que você disse. De fato, o AJAX engloba os conceitos de Javascript e XML (de onde o nome), e de fato o uso de XML traz a vantagem de podermos manipular apenas dados do lado do servidor, permitidno que eventualmente varios frontends apresentem os dados de forma diferente.
Mas eu considero que o que é mais importante no lance todo do AJAX é o uso de requisições assíncronas, e com isso a enorme gama de possibilidades que ele abre. As interfaces web nunca mais serão as mesmas.
Em relação às tecnologias utilizadas, eu não acho que devemos ser tão estritos. O retorno pode ser XML, mas pode ser também JSON ou texto simples, que podem ser tão ou mais eficiente quanto XML (no caso de JSON, a integração com Javascript é muito mais interessante), e ainda sim não temos mistura de dados com layout. No caso de manipulação client side, Javascript é hoje a linguagem de script para browser por definição…mas nada impede que isto mude.
O uso de HTML nas repostas talvez quebre um pouco a questão de apenas trafegarmos dados. Mas em momento algum fere a questão do assíncronismo e tampouco requer reprocessamento de páginas completas. Muito pelo contrário: uma estrutura bem montada no lado de cliente, um pouco de código javascript, e renderização de pequenos snippets HTML pelo servidor trazem resultados extremamente satisfatórios: páginas muito mais rápidas e leves no lado do cliente, com processamento mínimo (os browsers ainda deixam muito a desejar em sua capacidade de processamento eficiente) e do lado do cliente, apenas a renderização do estrito necessário (quem gera uma pequena árvore XML gera um trecho de HTML com a mesma eficiência).
É isso. De resto, obrigado pelo comentário e pelos elogios.
[]s
Link | December 9th, 2007 at 19:33
AJAX foi criado para retornar apenas dados, caso contrário, ele seria capaz de interpretar scripts em javascript.
AJAX para retornar marcações e javascripts não existe, é uma utopia achar isso funciona.
Link | March 14th, 2008 at 09:43
Usuário Rosduz no diHITT wrote:
AJAX em 20 minutos…
AJAX = Asynchronous Javascript XML. Portanto, AJAX é basicamente uma técnica que consiste em fazer requisições HTTP de forma assíncrona para o servidor.Fazer uma requisição assíncrona significa que o processo irá rodar por trás das cortinas, …
Link | May 29th, 2008 at 11:07
Action Developers (RIA)» Arquivo do Blog » AJAX em 20 minutos wrote:
[...] publicado no site log4dev.com escrito em português que faz uma introdução sobre o uso de Ajax. Se você não entende nada [...]
Link | August 21st, 2008 at 23:34
Artigo muito bom, gostei da forma descomplicada de explicar o codigo show de bola.
Link | June 11th, 2009 at 16:47
não intendi o proposito desse tutorial pois vcs fizeram um tutorial pra quem ja sabe programar em ajax. ops mais oq que um programador de ajax vai fazer aqui lendo tutorial de ajax se ele ja sabe… pois aqui naum encina a quem quer aprender que exemplo pratico e visivél que vc deuuu aiii?? eu nun viii só gasteiii meu tempo
Link | July 12th, 2010 at 21:25
Bruno, não entendi sua dúvida/bronca. Vc pode fazer o favor de traduzir de Miguxês para Português?
Link | July 12th, 2010 at 22:28