Você está na página 1de 10

AJAX: Introdução

por Luis Trindade e Ricardo Reis (13/Dezembro/2005)

Introdução
Comparando as aplicações desktop com as aplicações Web, constata-se que as desktop dão ao utilizador uma maior riqueza de utilização e melhores tempos de resposta que as aplicações Web tradicionais. A mesma simplicidade que fez proliferar as páginas Web criou um foço entre a experiência de utilização que se consegue oferecer numa aplicação desktop e uma página Web standard. No entanto essa distância está cada vez mais curta com a chegada de novas tecnologias e novas técnicas, entre elas o AJAX. O que é o AJAX? Jesse James Garret do site “ Adaptive Path”definiu AJAX como o seguinte: “ AJAX não é uma tecnologia. São na realidade várias tecnologias, cada O uma progredindo de forma independente, e que se juntaram de forma a poder explorar formas de melhorar a interacção com os utilizadores em aplicações Web.” É apenas um estilo de desenho, que junta todas as caracteristicas dos browsers actuais de forma a produzir aplicações que se assemelham menos a Web e mais a desktop. O AJAX utiliza as seguintes tecnologias: 1. Apresentação baseada em standards utilizando XHTML e CSS 2. Interação e apresentação dinâmica utilizando o Documento Object Model (DOM) 3. Formato standard para troca e manipulação de dados - XML 4. Comunicação assincrona com o servidor utilizando XMLHttpRequest 5. Utiliza Javascript como agregador de todas estas tecnologias E porquê o nome de AJAX? Foi o termo dado por Jesse Garrett para abreviar “ Asynchronous JavaScript + XML”

Comparação modelo clássico vs modelo AJAX em aplicações Web Modelo clássico No modelo clássico das aplicações Web a maior parte das interacções na UI (user interface) passa por um ciclo no qual são efectuados pedidos HTTP ao servidor Web. 1: O modelo tradicional para aplicações Web em comparação com o modelo AJAX ( g m r t a ad s e“ i e ei d o i Adaptative Pah ) ma r t t” . e depois de recebida o cliente redesenha por completo essa página HTML. esperar pela resposta. Este modelo baseado no modelo original da Web. está a a td p r “ y etxo ( á ia c m l a õ sp r o ta p gn s ma n o d pa o aa h p re t” p gn s o i ç e aa u rs á ia ) s ã g para a criação de aplicações.

2: Sincrono (Aplicação Web Tradicional) vs Assincrono (Aplicação Ajax) ( g m r t a ad s e“ d p aieP t ” i e ei d o i A a tt ma r t v ah ) . fazendo com que o utilizador não fique à espera da resposta do servidor. Em vez do habitual carregamento de uma página no início da sessão. As interacções do utilizador com a aplicação começam a ser assincronas.Modelo AJAX O AJAX adiciona uma camada intermédia entre o cliente e o servidor (motor AJAX). Esta camada permite eliminar a natureza (start-stop) das interacções Web. o browser carrega o motor AJAX (escrito em JavaScript e normalmente colocado numa Frame escondida). O motor fica com a responsabilidade de desenhar a interface do utilizador e comunicar com o servidor.

embora não seja obrigatório a sua utilização). Para efectuar estes pedidos assincronos as aplicação no passado utilizavam u “r q e q ee v li auiz ç od Fa so I a s( fcu n oo p dd s m tu u ” u n ova tia ã e rme u f me ee ta d s e io l r para essas frames escondidas. o motor AJAX trata-o. . Mas se pelo contrário o pedido necessitar do servidor. o motor AJAX faz um pedido assincrono ao servidor (usando normalmente XML como forma de representação dos dados. que foi desenhado especificamente com este propósito.Com o modelo AJAX os pedidos HTTP tradicionais são transformados em chamadas JavaScript ao motor AJAX. e que seriam elas as responsáveis por ficar á espera da resposta). mas na actualidade as aplicações Ajax utilizam o objecto XMLHttpRequest. Se o pedido não necessitar de ser processado pelo servidor. então.

Numa aplicação Ajax. ou um pequeno documento XML. tudo o que realmente necessitamos responder é o preço actualizado do carrinho de compras ou se ocorreu algum problema. enviando pedidos assincronos ao servidor. o trafego é principalmente alto no início. portanto o servidor apenas necessita de enviar os dados relevantes. mas á medida que o tempo de interacção com a aplicação aumenta. As comunicações posteriores com o servidor são muito mais eficientes. o tráfego acumulado pode ser menor do que uma aplicação tradicional. o consumo de largura de banda é relativamente menor quando comparado com a aplicação tradicional. quando um utilizador adiciona um item a um carrinho de compras. Pode fazê-lo de várias formas. Um carrinho de compras baseado em Ajax pode no entanto comportar-se de forma mais inteligente que isso. Por exemplo. quando é entregue ao cliente uma infrastructura grande e complexa de rajada quando o utilizador entra no site da aplicação. A estrutura. . texto simples. Numa aplicação Ajax. tais como retornar um fragmento de JavaScript. a lista de navegação e outras caracteristicas do layout da página já estão no lado do cliente.Dados vs Conteúdos Numa aplicação Web tradicional é servido uma mistura de conteúdos e dados em cada passo.

(retirado do livro “ Ajax in Action” ) .3: Comparação dos conteúdos entregues a uma aplicação tradicional Web (A) e a uma aplicação Ajax (B). Á medida que a aplicação continua a ser utilizada o trafego acumulado aumenta de forma diferente (C).

permitindo desta forma reduzir o processamento necessário por parte do servidor. Como maior parte da aplicação corre no lado do cliente isto permite que uma aplicação AJAX se comporte como uma aplicação Desktop e não seja tão limitada pela rede em termos de respostas do servidor. utilizando um conjunto de tecnologias existentes standard. . Além disso não requer a instalação de qualquer plugin no browser ou software no cliente.  Portabilidade: Como o AJAX é constituido por tecnologias que são utilizadas pela maioria dos browsers existentes no mercado.  Não é proprietário: AJAX não é um nome de nenhuma marca ou produto. As aplicações AJAX são mais reactivas e permitem uma maior riqueza em termos graficos (efeitos visuais que nos indicam o estado de um envio ou poder arrastar e colar elementos tal como se estamos habituados numa aplicação desktop).  Maior Interactividade nas aplicações: É uma das principais vantagens e uma das principais razões pela realização das aplicações AJAX.  Redução de largura de banda: Na maioria das aplicações Web que utilizam o modelo AJAX devido á sua natureza de actualizações granulares. dando a sensação de continuidade nas acções efectuadas.  Redução da carga de processamento do servidor: Em casos de aplicações que envolvam efectuar muitos calculos no lado do servidor.Características/Vantagens do AJAX As aplicações que sigam o modelo AJAX dão um grande passo quando se tenta comparar com a complexidade e riqueza das aplicações desktop tradicionais. consegue-se reduzir a quantidade de informação trocada com o servidor (não é necessário reenviar vezes sem conta toda a estrutura HTML ou partes de uma página que não foram alteradas). torna-se uma tecnica que não se restringe a um browser. através de aplicações Ajax é possivel em alguns casos trazer parte desses calculos para o cliente (por exemplo a ordenação de tabelas de produtos). apenas uma designação de um método de desenho para aplicações Web. nem a uma plataforma.

armazenamento local no cliente. Este problema tem tendência a diminuir . Algumas destas limitações têm vindo a ser solucionadas nos browsers mais recentes ou através de plugins especificos (como por exemplo o Flash).  Latência da rede: Outra preocupação das aplicações AJAX é a latência de rede.Desvantagens O Ajax traz algumas preocupações. mas existem algumas que serão muito dificeis de ultrapassar devido á natureza nãoaplicacional da Web.  Comportamento dos botões Back e Forward: Como as actualizações das páginas p sa as rdn mia . caso o pedido demore entre a indicação para enviar e ser mostrada a resposta. Por consequente o Ajax ao se basear nas tecnologias existentes.  Capacidades limitadas: Algumas aplicações Ajax conseguem fazer coisas inimagináveis á algum tempo na Web. Para este problema também existem algumas soluções. interacção com hardware (impressoras.q e p r t a s uiz d rs v l rm a u d tr n d R “ n h r) u emi o tia oe ot e e l a m eemia o estado da aplicação. Para resolver este problema começam a aparecer algumas soluções. Boa parte dessas preocupações tem a ver com o comportamento dos browsers. Exemplos de limitações são: capacidade multimédia (streaming de video).  Performance do cliente: Numa aplicação Ajax transfere-se muito do processamento do servidor para o cliente. o e e l o b te “ a k e“owad asm e iâ c s p r x mpo s oõ s b c ” fr r ” dos browsers podem ter comportamentos que não são os pretendidos. Deverá existir a preocupação de quando for efectuado um pedido ao s rio. webcams). Podermos sobrecarregar o cliente caso não se tomem as devidas precauções durante a fase de desenvolvimento deste tipo de aplicações Web. onde a maioria passa pela criação ou utilização de Frames invisiveis que guardam os diversos estados da aplicaçãos e preenchem o histórico utilizado pelos b te “ a k e“owad . mas existem muitas restrições nesta plataforma. oõ s b c ” fr r”  Bookmarking (Unique URL): Outro problema associado ao anterior é o facto de se tornar dificil a tarefa do utilizador de guardar um link para um determinado estado da aplicação. herda as suas limitações.s rd d ag m “ e b c ”p r q eo uiz d rn pense que a evd r e a o lu f d a k aa u e tia o ão l aplicação teve uma falha. gráficos em tempo real. entre elas a utilização do identificador de fragmento do U L (a c o”. Essa mudança tem custos porque estaremos a delegar no cliente a responsabilidade por realizar determinadas operações para as quais não estaria inicialmente destinado.

 Requer conectividade permanente .com o aumento da banda larga. mas nunca deixará de existir devido á natureza da internet.

este plugin já existe à alguns anos e está presente em quase todas as máquinas e plataformas. manipulação de gráficos vectoriais. Permite diversas funcionalidades multimédia tais como. fazer streaming de videos e permite ser programado através de uma linguagem de script semelhante ao JavaScript (chamado ActionScript).bea.wikipedia. Mas funciona como um plugin para os browsers. e embora basear um aplicação num plugin não seja aconselhável. uma baseada em Java da Sun e outra baseada na plataforma .org 4. http://dev2dev. http://en. Como é óbvio todas estas tecnologias necessitam de um framework para funcionarem (no caso do Ajax é o próprio browser). Java Web Start ou ClickOnce deploy Estas duas tecnologias. Tem a particularidade de permitir ser executada em modo offline e caso sejam efectuadas algumas alterações à aplicação essas actualizações são feitas automaticamente.Alternativas ao AJAX O Ajax cumpre as necessidades do mercado por clientes baseados na Web mais ricos e com tempos de resposta mais rápidos que não necessitem de uma instalação local.html 5.com/pub/a/2005/08/ajax_introduction. Referências 1. O grande contra destas tecnologias é que se baseiam num framework que necessita estar instalado nas máquinas locais.NET permitem descarregar do site uma aplicação cliente que irá ser executada num ambiente controlado no cliente. Livro: AJAX in Action 2.org/wiki/AJAX . http://www. Não é a única solução e nem sempre é a mais apropriada. http://www.php 3.com/publications/essays/archives/000385.adaptivepath.ajaxpatterns. Flash É uma aplicação bastante conhecida no mundo da internet actual.