AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

AJAX (programao)
Origem: Wikipdia, a enciclopdia livre.

AJAX (acrnimo em lngua inglesa de Asynchronous Javascript and XML[1], em portugus "Javascript e XML Assncronos") o uso metodolgico de tecnologias como Javascript e XML, providas por navegadores, para tornar pginas Web mais interativas com o usurio, utilizando-se de solicitaes assncronas de informaes. Foi inicialmente desenvolvida pelo estudioso Jess James Garret e mais tarde por diversas associaes. Apesar do nome, a utilizao de XML no obrigatria (JSON frequentemente utilizado) e as solicitaes tambm no necessitam de ser assncronas[2].

ndice
1 Descrio 2 Os quatro princpios de Ajax 2.1 O navegador hospeda uma aplicao, e no contedo 2.2 O servidor fornece dados, e no contedo 2.3 A interao do utilizador com a aplicao pode ser flexvel e contnua 2.4 A codificao real requer disciplina 2.5 Cdigo de exemplo 3 Algumas tecnologias que fazem uso de AJAX 4 Ver tambm 5 Referncias 6 Ligaes externas

Descrio
AJAX no um novo modelo para desenvolvimento web. Os navegadores implementam essa tecnologia desde o ano 2000(no mnimo). Porm sua popularizao nos ltimos anos tem tambm trazido consigo muitas outras melhorias para a Web. Tem estimulado a construo de aplicaes Web mais dinmicas e criativas. AJAX no uma tecnologia, mas um conjunto de tecnologias conhecidas trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX incorpora em seu modelo: Exposio e interao dinmica usando o DOM; Intercmbio e manipulao de dados usando XML e XSLT; Recuperao assncrona de dados usando o objeto XMLHttpRequest e XMLHttpResponse; JavaScript fazendo a juno entre os elementos. O modelo clssico de aplicao web trabalha assim: a maioria das aes do usurio na interface
1 de 8

23/10/2012 18:16

AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

dispara uma solicitao HTTP para o servidor web. O servidor processa algo, recuperando dados, realizando clculos, conversando com vrios sistemas legados, e ento retorna uma pgina HTML para o cliente. um modelo adaptado do uso original da Web como um agente de hipertexto, porm o que faz a web boa para hipertexto no necessariamente a faz boa para aplicaes de software. Com a popularizao de sistemas que funcionam inteiramente na Web e tambm com o aumento da velocidade das conexes banda larga, o problema da espera pelo envio e retorno da pgina inteira se tornou muito mais evidente para o usurio. Obviamente, se ns estivssemos projetando a Web a partir do zero para aplicaes, no faramos com que os usurios esperassem em vo. Uma vez que a interface est carregada, por que a interao do usurio deveria parar a cada vez que a aplicao precisasse de algo do servidor? Na realidade, por que o usurio deveria ver a aplicao ir ao servidor toda vez? As principais vantagens das aplicaes que utilizam AJAX para determinadas requisies que os dados trafegados pela rede so reduzidos e o usurio no precisa aguardar a pgina ser recarregada a cada interao com o servidor. A popularizao das tecnologias que o AJAX rene foi muito importante para a criao do conceito Web 2.0, que at hoje gera grandes divises entre os maiores pensadores da Web. Apesar de no possuir nada inovador em sua essncia, o uso de AJAX revolucionou a Web inteira, trazendo tona muitos conceitos importantes para o desenvolvimento web.

Os quatro princpios de Ajax

O modelo clssico de aplicao baseado em pginas est relacionado com muitas das estruturas que ns usamos, e tambm em nossas maneiras de pensar. Vamos fazer uma anlise de alguns minutos para descobrir o que so estas suposies essenciais e como necessitamos repensar estas idias para entendermos Ajax suficientemente.

O navegador hospeda uma aplicao, e no contedo

Numa aplicao web clssica baseada em pginas, o navegador efectivamente um terminal burro. Ele no sabe nada sobre o que o utilizador est realmente realizando em suas aes conseqentes. Todas essas informaes so retidas no servidor web, tipicamente na sesso do utilizador. Sesses de utilizador no lado servidor so comuns atualmente. Se a aplicao foi escrita em PHP, Plataforma Java, .NET, Ruby on Rails ou outra linguagem utilizada no desenvolvimento de aplicaes para Web, a sesso no lado servidor faz parte da API padro, assim como o controle de solicitaes, respostas, e tipos de contedo (MIME). Quando o utilizador entra ou de outra maneira inicia uma sesso, vrios objetos so criados no servidor, representando, por exemplo, a cesta de compras e as credenciais de cliente do utilizador. Ao mesmo tempo, a pgina inicial servida ao navegador, em um fluxo de marcaes HTML que mistura um anncio de apresentao padro e dados especficos do utilizador juntos com o contedo, como por exemplo, uma lista de itens exibidos recentemente.

2 de 8

23/10/2012 18:16

AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

Toda vez que o utilizador interage com o stio, um outro documento enviado para o navegador, contendo a mesma mistura de cabealhos e dados. O navegador retira o documento anterior e exibe o novo, porque ele no sabe que o outro documento produz um resultado muito semelhante. Quando o utilizador efetua a sada ou fecha o navegador, a aplicao sai e a sesso destruda. Qualquer informao que o utilizador necessite ver na prxima vez que ele entrar ter que ser passada para a camada de persistncia de dados em cada visita. J em uma aplicao AJAX, parte da lgica da aplicao movida para o navegador. Neste novo cenrio, quando o utilizador entra, um documento mais complexo entregue ao navegador, uma grande proporo do qual cdigo JavaScript. Este documento permanecer com o utilizador por toda a sesso, ainda que ele resolva provavelmente alterar sua aparncia consideravelmente, enquanto o utilizador est interagindo com ele. Ele sabe como responder s informaes inseridas pelo utilizador e capaz de decidir se manipula a entrada do utilizador ele mesmo ou se passa uma solicitao para o servidor web (o qual tem acesso ao banco de dados do sistema e outros recursos), ou ainda, se faz uma combinao de ambos. Ele tambm pode armazenar o estado, porque o documento continua persistindo sobre toda a sesso do usurio. Por exemplo, o contedo de uma cesta de compras pode ser armazenado no navegador, em vez de ser armazenado na sesso do servidor.

O servidor fornece dados, e no contedo

Como observamos, uma aplicao web clssica oferece a mesma mistura de alegorias, contedos e dados em todos os passos. Quando nosso usurio adiciona um item na cesta de compras, tudo que precisamos realmente responder com o valor atualizado da cesta ou informar se alguma coisa deu errado. Um carrinho de compra baseado em Ajax pode comportar-se de forma mais inteligente, por meio de remessas de solicitaes assncronas ao servidor. O cabealho, o histrico de navegao, e outras caractersticas do layout da pgina esto todas carregadas, portanto o servidor necessita enviar de volta somente os dados relevantes. Uma aplicao AJAX poderia fazer isto de vrios modos, como por exemplo, devolver um fragmento de JavaScript, um fluxo de texto simples, ou um pequeno documento XML. Ns mostraremos em detalhes as vantagens e desvantagens de cada um, mais a frente. suficiente dizer por agora que qualquer um destes formatos ser muito menor que a mistura de informaes devolvida pela aplicao web clssica. Em uma aplicao Ajax, o trfego tem sua maior intensidade no incio, com um largo e complexo cliente sendo entregue em uma nica exploso, quando o usurio entra. As comunicaes subseqentes com o servidor so muito mais eficientes, de qualquer forma. Para uma aplicao breve, o trfego cumulativo pode ser menor em uma aplicao de pgina web convencional. Mas conforme o tamanho mdio do tempo de interao aumentar, o custo de largura de barramento da aplicao Ajax torna-se menor do que sua aplicao clssica equivalente.

3 de 8

23/10/2012 18:16

AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

A interao do utilizador com a aplicao pode ser flexvel e contnua

Um navegador web oferece duas maneiras de enviar entradas de dados para um outro computador: com os enlaces e formulrios HTML. Os hyperlinks podem ser carregados com parmetros CGI (Common Gateway Interface Interface de Comunicao Comum) apontando para pginas dinmicas ou servlets. Eles podem estar vinculados com imagens e folhas de estilo (CSS) para oferecer uma pequena melhoria na interface, como por exemplo, definir efeitos quando o mouse estiver sobre eles. Os controles de formulrio oferecem um subconjunto bsico de componentes padres de interface com o usurio: caixas de texto, caixas de checagem e botes de rdio, alm de listas de seleo. Entretanto estes controles no so suficientes. No existem controles de seleo em rvores, grades para edio, ou caixas de combinao. Os formulrios, assim como os hyperlinks, apontam para URLs residentes no servidor. Alternativamente, os hyperlinks e os controles de formulrio podem apontar para funes JavaScript. Isto uma tcnica comum em pginas web para prover uma validao de formulrio rudimentar em JavaScript, verificando por campos vazios, valores fora de intervalo, e assim por diante, antes de submeter os dados para o servidor. Estas funes JavaScript existem somente enquanto a prpria pgina existe e substituda quando a pgina efetuar o seu envio. Enquanto a pgina est sendo enviada, o usurio aguarda a sua resposta. A pgina anterior pode ainda estar visvel por algum tempo, e o navegador pode at permitir que o usurio clique em qualquer um dos links visveis, mas se assim for feito, produzir resultados imprevisveis e at entornar em uma confuso com a sesso no servidor. O usurio est normalmente aguardando a pgina ser atualizada que, frequentemente, possuem quase que as mesmas informaes que lhes foram apanhadas instantes atrs. Adicionando um par de calas cesta de compras no razovel modificar as categorias em um nvel acima por roupas masculinas, roupas femininas, infantis e acessrios. Voltemos ao exemplo do carrinho de compras novamente. Devido ao facto de que nosso carrinho de compras em Ajax pode enviar dados assncronamente, os utilizadores podem soltar os objectos dentro dele to rpido quanto eles podem clicar. Se o cdigo de nosso carrinho no lado cliente for robusto, ele tratar esta tarefa facilmente, e os usurios podem continuar com o que eles esto fazendo. claro que no existe nenhum carrinho para colocarmos as coisas, somente um objeto em sesso no servidor. Mas os usurios no querem saber sobre objetos de sesso enquanto esto fazendo compras, e a metfora do carrinho prov uma descrio do mundo real mais confortvel do que est acontecendo. Troca de contextos entre a metfora e o acesso direto ao computador uma distrao para usurios. Aguardar uma pgina ser atualizada levar o usurio realidade de estar sentado em um computador por um curto tempo, e nossa implementao em Ajax evita que isto ocorra. Fazer compras uma atividade transitria, mas se considerarmos um domnio de negcios diferente, por exemplo, um cenrio de assistncia e atendimento intensivo ou uma tarefa de planejamento complexa, ento o custo de interrupo da seqncia de trabalho em alguns poucos segundos, com uma atualizao de pgina, algo invivel.

4 de 8

23/10/2012 18:16

AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

A segunda vantagem de Ajax que podemos associar eventos a um maior nmero de aes do usurio. Os conceitos mais sofisticados de interface com o usurio, assim como "arrastar e soltar", se tornam praticveis, trazendo as experincias dessas interfaces em p de igualdade com os controles de aplicaes desktop. Da perspectiva de usabilidade, esta liberdade importante no somente porque ela permite exercer nossa imaginao, mas porque nos permite combinar a interao do usurio e as solicitaes ao servidor de maneira mais completa. Para comunicar com o servidor em uma aplicao web clssica, necessitamos clicar em um hyperlink ou submeter um formulrio, e ento aguardar. No entanto, este mtodo interrompe a interao com o usurio. Em contraste, a possibilidade de se comunicar com o servidor em resposta a um movimento ou arraste do mouse, ou at quando digitamos, habilita o servidor a trabalhar juntamente com o usurio. O Google Suggest um exemplo muito simples e efetivo disto: responder s teclas pressionadas enquanto ele digita dentro da caixa de pesquisa, e ento, comunicar com o servidor para recuperar e exibir uma lista de possveis finalizaes para as expresses, baseada nas pesquisas feitas por outros usurios do mecanismo de busca em todo o mundo.

A codificao real requer disciplina

Neste momento, as clssicas aplicaes web fazem uso de JavaScript em certas ocasies, para adicionar caractersticas avanadas de um programa, agregando-as nas pginas. O modelo baseado em pginas impede qualquer uma destas melhorias que provoque em um atraso longo demais, limitando sua utilidade. Isto fez com que JavaScript recebesse injustamente, uma reputao de algo banal por m sorte da linguagem e no sendo bem vista pelos desenvolvedores srios. Codificar uma aplicao Ajax algo completamente diferente. O cdigo que voc fornece quando os usurios iniciam a aplicao deve executar at que eles encerrem-na, sem interrupo, sem diminuio de velocidade, e sem produo de escapes de memria. Se estivermos mirando no mercado de aplicaes poderosas, ento temos em vista muitas horas de intenso uso. Para atingirmos este objetivo, devemos escrever cdigos de alto desempenho, e manutenveis, usando a mesma disciplina e entendimento que aplicado com sucesso s camadas do servidor. A base de cdigo ser tipicamente mais ampla que qualquer cdigo escrito para uma aplicao web clssica. Boas prticas na construo da base de cdigo se tornam muito importantes. O cdigo deve tornar-se, de preferncia, responsabilidade de uma equipe do que apenas um indivduo, criando edies de manutenibilidade, separaes de interesses, e estilos e padres de codificao comum. Uma aplicao Ajax, portanto, uma poro de cdigo funcionalmente complexa que comunica eficientemente com o servidor enquanto o usurio continua com seu trabalho. Ela claramente uma descendncia da aplicao clssica baseada em pginas.

Cdigo de exemplo
O Cdigo a seguir mostra um exemplo do uso do AJAX para enviar e receber informaes do servidor usando o mtodo GET (crie os arquivos com os nomes em negrito para visualizar o

5 de 8

23/10/2012 18:16

AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

comportamento, e em seguida abra o arquivo exemplo_ajax.html em um navegador atualizado): Arquivo: exemplo_ajax.html

<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8" /> <title>Exemplo de Aplicao em ajax</title> <script src="enviar_Dados.js" /> </head> <body> <!--formulrio para entrada dos dados. Quando ele for enviado, o mtodo "enviarDados()" ser executado, e em seguida retornar "false" para evitar que a pgina seja recarregada.Parmetros: remetente.value - valor digitado no elemento com id = remetente exibicao_dos_dados - objeto com o id = exibicao_dos_dados--> <form method="get" onsubmit="enviarDados(remetente.value, exibicao_dos_dados); return false;"> <label for="remetente">Digite o seu nome e clique no boto "Enviar": <input type="text" id="remetente" name="remetente" /> <input type="submit" value="Enviar" /> </form> <!--Espao em que ser mostrado a resposta do servidor--> <div id="exibicao_dos_dados"> </div> </body> </html>

O cdigo a seguir executar a solicitao atravs do prprio navegador. Arquivo: enviar_Dados.js

//Funo que ser executada quando o usurio enviar o formulrio. function enviarDados(remetente, saida) { //Cria um novo objeto XMLHTTPRequest e o armazena na varivel objeto_xhr var objeto_xhr = new XMLHttpRequest(); //Armazena uma funo que ser chamada sempre que a propriedade "readyState" do objeto "objeto_xhr" tiver o objeto_xhr.onreadystatechange = function() { //Se no ocorrer nenhum erro na solicitao, mostra a resposta do servidor dentro do elemento HTML "DIV if(objeto_xhr.readyState == 4 && objeto_xhr.status == 200) { saida.innerHTML = objeto_xhr.responseText; } //Mensagem que ser mostrada se a pgina solicitada no for encontrada else if(objeto_xhr.status == 404) { saida.innerHTML = "A pgina solicitada no existe."; } //Mensagem que ser mostrada enquanto a solicitao est sendo processada else if(objeto_xhr.readyState == 1 || objeto_xhr.readyState == 2 || objeto_xhr.readyState == 3 saida.innerHTML = "Por favor, aguarde enquanto a sua solicitao processada..."; } //O texto adicionado aps o nome da pgina(?remetente = remetente) o valor que ser enviado para o se objeto_xhr.open("GET", "processamento_ajax.php?remetente=" + remetente, true); objeto_xhr.send(); //Envia os dados para o servidor } }

O arquivo a seguir processar atravs de um servidor a solicitao do cliente e responder com um texto simples. Para o processamento dos dados, ser necessrio ter o programa PHP e um servidor(como o Servidor Apache) instalados e configurados em seu computador. Arquivo: processamento_ajax.php

6 de 8

23/10/2012 18:16

AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

<?php //armazena o nome recebida do formulrio pelo mtodo GET $nome_remetente = $_GET["remetente"]; //armazena o horrio do servidor $horario_recebimento = date("H:i:s"); //exibe a resposta na tela echo "Obrigado, " . $nome_remetente . ". A sua solicitao foi recebida s " . $horario_recebimento; //A sada ser semelhante ao texto: "Obrigado, Fulano. A sua solicitao foi recebida s 13:30:40 >

Algumas tecnologias que fazem uso de AJAX

Google earth Google maps Facebook AWB

Ver tambm
ExtJS, framework de cdigo aberto em Javascript com objetos para implementao de aplicaes em Ajax Mootools, framework de cdigo aberto em Javascript para implementao de aplicaes em Ajax Rico, framework de cdigo aberto para implementao de aplicaes em Ajax Prototype, framework de cdigo aberto em Javascript com objetos para implementao de aplicaes em Ajax Jquery, framework de cdigo aberto em Javascript ScriptCase, framework para desenvolvimento de aplicaes em PHP com Ajax EasyAjaxTool, (http://code.google.com/p/easyajaxtool/) Framework de Cdigo Aberto Ferramenta leve para usar ajax com qualquer linguagem de servidor.

Referncias
1. Jesse James Garrett (18 de fevereiro de 2005). Ajax: A New Approach to Web Applications (http://www.adaptivepath.com/ideas/essays/archives/000385.php) . AdaptivePath.com. Pgina visitada em 21 de maro de 2012. 2. Chris Ullman. In: wrox. Beginning Ajax (http://www.wrox.com/WileyCDA/Section/id-303217.html) . [S.l.: s.n.]. ISBN 978-0-470-10675-4. Pgina visitada em 21 de maro de 2012.

Ligaes externas
AJAX - Viso Conceitual (http://www.w3schools.com/ajax/default.asp) Cloning Google Suggest with AjaxAC (http://www.phpriot.com/d/articles

7 de 8

23/10/2012 18:16

AJAX (programao) Wikipdia, a enciclopdia livre

http://pt.wikipedia.org/wiki/AJAX_(programao)

/php/application-design/google-suggest-ajaxac/index.html) Ajax Tutorial (http://www.xul.fr/en-xml-ajax.html) Get, post, text, XML. AJAX DWR tutorial (http://soaagenda.com/journal/articulos/el-mejor-ejemplo-dwr-oel-mejor-tutorial-dwr/) Wiki de padres ajax (ingls) (http://ajaxpatterns.org/) AJAX Tool (http://code.google.com/p/easyajaxtool/) Framework de Cdigo Aberto leve para usar ajax com qualquer linguagem de servidor. Obtida de "http://pt.wikipedia.org/w/index.php?title=AJAX_(programao)&oldid=32381952" Categorias: Web XML Web 2.0 JavaScript Esta pgina foi modificada pela ltima vez (s) 04h21min de 29 de setembro de 2012. Este texto disponibilizado nos termos da licena Atribuio-Partilha nos Mesmos Termos 3.0 no Adaptada (CC BY-SA 3.0); pode estar sujeito a condies adicionais. Consulte as condies de uso para mais detalhes.

8 de 8

23/10/2012 18:16