CONSTRUINDO APLICAES WEB DINMICAS E OTIMIZADAS UTILIZANDO AJAX - A CAMINHO DA WEB 2.

0
1

CARLOS ROBERTO ALVES ROLIM

Rua Horacio Trajano de Oliveiros, n. 1730 Cristo Joo Pessoa - PB carlosrar@gmail.com

2

NNYO JOS BARROS DE ARAJO

Rua Fernando Lus Henrique, n. 331 Bessa Joo Pessoa - PB ennyo.jose@gmail.com

3

JULIANO CSAR TOZZI

Rua Augusto Belmont, n. 184 Manara Joo Pessoa - PB jctozzi@gmail.com

1, 2, 3

Unio dos Institutos Brasileiros de Tecnologia UNIBRATEC

Av. Governador Flvio Ribeiro Coutinho, n. 115, Manara, 3 piso, Mag Shopping Joo Pessoa - PB

RESUMO
O objetivo deste artigo explicar tecnicamente o funcionamento do AJAX, com a construo de um exemplo prtico, demonstrando os resultados obtidos nas pesquisas cientificas realizadas com tal implementao. Alm disso, este trabalho visa fornecer embasamento terico sobre esse novo mtodo de desenvolvimento Web. So apresentados grficos e dados estatsticos, os quais possibilitam a avaliao dos benefcios e limitaes desse novo paradigma da programao Web, que vem apontando para o futuro do desenvolvimento das aplicaes on-line. Ainda, mostra-se como essa inovadora soluo contribui com o estado atual da Internet, popularizada e conhecida sob o termo Web 2.0, que sumariza toda a nova estrutura da Web, bem como suas modificaes conceituais e remodelagens tecnolgicas.

PALAVRAS-CHAVE
AJAX; Web; Desenvolvimento; Sistema; Web 2.0; Internet.

ABSTRACT
The main objective of this paper is to explain technically the working of AJAX, with the construction of a practical example, showing the results obtained by the scientific researches held with such implementation. Besides, this work aims to give theoretical basis about this new method of Web development. Graphics and statistics data will be presented, which make possible the evaluation from the benefits and limitations of this new paradigm of Web programming, that indicates the future of the development of on-line applications. Yet, it has been showed how this innovative solution contributes to the actual state of internet , popular and well-known under the term Web 2.0, which sums up all the new Web structure, as well as its conceptual changes and technological remodels.

KEY-WORDS:
AJAX; Web; Development; System; Web 2.0; Internet.

1. INTRODUO
O modelo atual de negcios e de comercializao no Brasil, como em qualquer outro pas, exige cada vez mais agilidade e, consequentemente, resultados instantneos. Informao consistente e atualizada a chave para queles que desejam estar sempre um degrau acima dos seus concorrentes. notvel a crescente procura das empresas por novos mtodos de comunicao e de interao com os seus clientes e, com certeza, a Internet apresenta-se como a melhor opo para esse tipo de integrao. No ambiente empresarial, adotar um software baseado na Internet significa otimizar o tempo e os custos com a instalao do sistema em cada estao de trabalho, o que implica em um benefcio especial: a reduo de custos com manuteno. Com o advento de tecnologias capazes de tornar a utilizao de sistemas on-line to simples e dinmicos quanto s aplicaes desktop, observa-se, dia aps dia, o aumento de novos softwares completos atuando na Web. H dois anos atrs, as aplicaes Web eram sinnimo de lentido, desorganizao e insegurana, alm de serem solues pobres em dinamismo e interatividade. Tal afirmao perfeitamente compreensvel, tendo em vista que a grande maioria dos sistemas on-line construdos at hoje, foram desenvolvidos de forma, digamos, irregular. Inmeras so as tecnologias disponveis para o desenvolvimento Web, porm, poucos so as que as utilizam corretamente. inegvel que a demora na navegao de algumas aplicaes Web, na grande maioria dos casos, fruto do modo como essas pginas foram projetadas e construdas. Segundo Isabel (2006) a lentido de pginas em websites muitas vezes 100% culpa de um cdigo HTML desorganizado e a comunicao falha com os servidores. No se deseja que o usurio tenha um conhecimento profundo sobre acessibilidade e usabilidade; espera-se, sim, que a interface apresentada seja a mais intuitiva possvel para o usurio e que apenas se preocupe em atingir seu objetivo frente quele site, com menos cliques e obtendo informaes necessrias seguindo uma seqncia lgica. A Web deve fortalecer e no frustrar. O uso de padres no desenvolvimento e a adoo de novas tcnicas de programao Web, como o AJAX, vem quebrando esses paradigmas que assolam as aplicaes para Internet. Em paralelo, a forma como os sistemas so projetados tambm passa por mudanas tcnicas e conceituais. A chamada Web 2.0 altera no somente a camada de apresentao ao cliente final, mas tambm a forma como os servios dessas aplicaes so disponibilizados, oferecendo inovadoras possibilidades ao mercado tecnolgico. Segundo Joo Romo (2006): Trata-se, essencialmente, de usar a Web como plataforma para aplicaes e no apenas como meio de entrega expressa de contedo. A atitude Web 2.0 no tenta resolver as coisas do modo tradicional e, sim, utilizar as possibilidades da Internet para facilitar a vida do usurio. Tal tipo de atitude cria mais oportunidades de xito porque remete ao modelo de pequenas e eficientes equipes de desenvolvimento, acabando com os projetos que perduram por anos e consomem milhes.

As primeiras experimentaes para ultrapassar a metfora dos documentos Web esto sendo realizadas com a utilizao das tcnicas AJAX no desenvolvimento das aplicaes. Graas ao AJAX, o foco dessas novas aplicaes est saindo da simples informao e passando a total interao. Agora, alm

do acesso, os websites desenvolvidos sob essa perspesctiva podem oferecer ao usurio final a manipulao e transformao do contedo. E este um excelente caminho para remodelar todo o contedo disponvel na Internet e transform-lo em conhecimento.

2. O QUE AJAX
O termo AJAX - acrnimo para Asynchronous JavaScript and XML (Javascript Assncrono e XML) - foi criado por Jesse James Garret para definir de forma mais concreta (ou comercial) o uso do aglomerado de tecnologias presentes em sua utilizao. Segundo Garret (2005): O AJAX no uma tecnologia. So na realidade vrias tecnologias, cada uma progredindo de modo independente e, que se juntaram de maneira a poder explorar novas formas de melhorar a interao com os usurios de aplicaes Web..

O AJAX no uma novidade tecnolgica, mas sim um novo modo de utilizar tecnologias j disponveis. Abaixo algumas das tecnologias que compem o AJAX:

I. XHTML como linguagem de marcao e CSS para definio dos estilos; II. Exibio e interao utilizando DOM (Document Object Model); III. Troca de dados usando XML (Extensible Markup Language); IV. XMLHttpRequest funcionando de forma assncrona na comunicao com o servidor; V. Javascript para fundir e manipular todas as partes do processo. O uso das tecnologias descritas acima gera o conceito de criar um sistema interativo, em que usurio final tenha uma navegao assncrona, ou seja, que o mesmo possa realizar diversas aes simultneas sem ter de esperar que o servidor processe as informaes para que ele possa continuar navegando. Apenas o trecho da pgina requisitada modificado, diminuindo dessa forma, o trfego de informaes desnecessrias pela rede e reduzindo tambm o processamento por parte do servidor. A cada novo contedo solicitado pelo usurio, no necessrio renderizar novamente a mesma pgina (efeito refresh). Segundo Paulo Lomanto (2006), Tanto para Websites quanto para intranets e sistemas corporativos, o AJAX representa uma reduo de at 80% no trfego de informaes entre o servidor Web e o cliente que est utilizando o recurso.

3. POR QUE USAR AJAX?

A maneira como o contedo das pginas Web apresentado vem evoluindo constantemente, de um modo prprio e inovador. No incio, essa apresentao era feita apenas de forma textual, o que no despertava muito interesse no usurio. Com o passar do tempo surgiram tecnologias capazes de exibir pginas estticas com algumas figuras, como o HTML.

Existe uma lacuna tcnica entre aplicaes desenvolvidas para Web e em aplicaes feitas para desktops. Esta distncia fica mais evidente quando se analisa o tempo de resposta. Nos desktops a resposta imediata. Numa aplicao Web, essa arquitetura diferente, portanto, vejamos:

O acesso a memria diferente; A aplicao no esta instalada no cliente e sim no servidor; Para a comunicao, existe a necessidade de estabelecer conexes e requisies de dados; Toda requisio gera um refresh de tela, o que impossibilita muitas aplicaes de se utilizar os recursos da Internet em determinadas aplicaes, onde o tempo de resposta algo essencial.

O AJAX minimiza essa distncia, possibilitando a construo de aplicaes Web com grande similaridade s aplicaes desktops e sem a predileo por uma plataforma de sistema operacional especifica. Entretanto, como toda tecnologia que surge no mercado, o AJAX possui vantagens e desvantagens.

3.1. VANTAGENS
Existem inmeras vantagens de se usar essa tcnica. Certamente, seu uso deve ser dosado e sempre utilizado de forma coerente para no comprometer a legibilidade e manuteno de sua aplicao. Especialistas em usabilidade e desenvolvimento elegeram alguns pontos chaves a serem considerados. Segundo Michael Mahemoff (2006), podemos considerar:

Trfego mnimo As aplicaes deveriam mandar e receber do servidor o mnimo de informao possvel. O AJAX pode diminuir consideravelmente o trfego entre cliente e servidor. Usando AJAX certamente sua aplicao no estar enviando informao desnecessria. A largura de banda melhor utilizada, diminuindo a latncia de rede, conseqentemente obtm-se um melhor desempenho nas aplicaes;

Interface amigvel Aplicaes AJAX introduzem um conceito diferente do modelo clicaespera suportado atualmente na internet. Outros paradigmas do tipo arrasta e solta e duplo clique. No importa qual paradigma usar, necessrio que o usurio saiba o que vai fazer aps. Podemos ento, construir aplicaes mais intuitivas, com um conforto visual muito melhor, alem de fornecer um ambiente mais familiar ao usurio, deixando-o mais prximo das aplicaes desktop que o usurio esta acostumado;

Convenes - no desperdice tempo reinventando novos modelos de interao com o usurio, utilize os padres j conhecidos do desktop e diminua a curva de aprendizado;

Acessibilidade considere a maior faixa de clientes possveis, considere todas as possibilidades do uso de navegadores antigos ou os do tipo texto, anteveja algumas destas variantes e programe para um pblico inesperado.;

Desenvolvimento - algumas aplicaes antes s disponveis para mquinas locais podem ter o seu desenvolvimento feito para navegadores Web;

Aplicaes Web mais rpidas, inteligentes e seguras. podemos agora ter carrinhos de compras inteligentes e outras aplicaes que colaborem para deixar as operaes de entrada e sada de dados mais simples para o usurio final;

Com AJAX, o usurio consegue interatividade e usabilidade sem demandar um elevado consumo de recursos para que esses sejam disponibilizados. O AJAX capaz de associar eventos a um maior nmero de aes do usurio. Dessa forma, os conceitos fundamentais de interatividade com o usurio, como o famoso drag-and-drop (arrastar e soltar), tornam-se perfeitamente possveis. Do ponto de vista da usabilidade, esta liberdade no importante apenas porque ela permite exercer nossa imaginao, mas sim porque ela nos possibilita combinar as aes disparadas pelo usurio e as solicitaes ao servidor de uma forma bem mais completa. As vantagens da utilizao do AJAX tornam-se visveis principalmente para os usurios. possvel imaginar muitas funcionalidades em que a interao seja conveniente: validao de dados, correo ortogrfica automtica, clculos dinmicos, emisso e gerenciamento de relatrios gerados a partir de uma base de dados, etc.

3.2. DESVANTAGENS
Como em toda tecnologia, algumas vantagens podem trazer desvantagens. No desenvolvimento de aplicaes Web existem alguns pontos a serem considerados:

Programao mais complexa Por ter uma estrutura mais complexa, torna-se mais difcil desenvolver utilizando AJAX, a curvatura de aprendizado muito maior e os programas se tornam de difcil manuteno;

Botes avanar e voltar fica muito difcil controlar os botes avanar e voltar do navegador quando se est navegando por uma pgina que usa AJAX, o que pode complicar a restaurao de um estado anterior ao se utilizar esses botes. Esse ainda um desafio a ser vencido na programao usando essa tecnologia;

Salvar fica difcil e, muitas vezes, impossvel salvar o contedo de uma site se o mesmo tiver sido desenvolvido 100% em AJAX;

Depurao dificultada - Alm de ferramentas de debugao de JavaScript serem raras, um aumento na complexidade do programa pode trazer diminuio da produtividade de um sistema;

Portabilidade caso o JavaScript no esteja habilitado ou no exista suporte a ele no navegador do usurio, fica impossvel utilizar o sistema em questo;

Motores de busca se o site for feito completamente em AJAX, os robs de busca de websites de pesquisa no conseguem identificar e indexar o site. Ento, antes de construir pginas ou sistemas Web, os pontos acima devem ser fortemente levados em considerao. Segundo Nicholas C. Zakas (2006) A tecnologia AJAX serve para melhorar a experincia de usurio com a web, a tecnologia por detrs do desenvolvimento simplesmente um ferramenta para atingir um determinado fim. Certifique-se que sua aplicao ser til e usvel..

4. QUEM USA?
Indiscutivelmente, a empresa que mais se destaca na utilizao do AJAX, atualmente, a Google. As maiores e mais bem sucedidas aplicaes desenvolvidas pela Google (Google Maps, Gmail e orkut), possuem implementaes AJAX. O Google Suggest tambm um excelente exemplo que demonstra o quanto o AJAX pode tornar uma aplicao Web poderosa. Ainda existem diversas outras implementaes na Web que utilizam o AJAX no seu desenvolvimento, como a ferramenta de busca A9 da Amazon, o Flickr, gerenciador de fotos on-line, o Writely, editor de textos on-line (adquirido recentemente pela Google), o NumSum, editor de planilhas on-line, o netVibes, gerenciador de contedo personalizado, e diversos outros sistemas que de certa forma embutem essa nova tcnica de desenvolver para Web.

Projetos como esses que foram anteriormente citados, demonstram que o AJAX no apenas mais uma mania passageira, e sim uma poderosa nova forma de encarar a realidade Web. A Adaptive Path, empresa que formulou e originou o termo, diz que os desenvolvedores que vem utilizando o AJAX apenas esto arranhando a superfcie das interaes ricas e a comunicabilidade que as aplicaes AJAX podem prover..

5. PADRES
No cenrio atual da tecnologia da informao, marcado por uma acelerada evoluo, a Web necessita de orientao a fim de que seja capaz de desenvolver todo o seu potencial. Esse direcionamento pode ser obtido atravs dos padres Web. Nos idos da programao Web, os cdigos de formatao (HTML e CSS) eram muito complexos e sem organizao, o que tornou a navegao em muitos sites da Internet um verdadeiro caos. Porm, isso vem mudando rapidamente. O cdigo interpretado no cliente (browser) nos dias atuais bastante

simplificado. Com o lanamento do XHTML (sucessor do antigo HTML), as linhas de formatao das pginas reduziram drasticamente. Hoje em dia temos cdigos padronizados, de fcil manuteno e melhor legibilidade. Mas, essas mudanas no so mritos apenas da evoluo das linguagens citadas. A maneira de pensar do desenvolvedor Web tambm mudou. cada vez mais freqente observar a preocupao dos programadores com relao usabilidade e acessibilidade dos seus sites e sistemas. Antigamente, pouco se ouvia falar sobre essas caractersticas, mas hoje em dia comum a preocupao para que os cdigos sejam interpretados corretamente por diversos tipos de navegadores, que sejam acessveis pelo teclado e que possam ser visualizados em qualquer tipo de dispositivo de acesso. E mais ainda, a questo da acessibilidade vem interferindo no desenvolvimento das aplicaes Web a ponto dos desenvolvedores preocuparem-se inclusive com o tipo de usurio que utiliza sua aplicao. A analista de sistemas, Karina Guimares (2006), define o usurio como o centro de tudo: As aplicaes Web devem evitar que o usurio deixe de encontrar a informao desejada e abandone a visita em menos de 5 segundos.. Para isso, necessrio um contedo atrativo e disposto em uma interface agradvel e bem elaborada. Diversas so as organizaes de padronizao que influenciam a Internet. Inegavelmente o mais expressivo trabalho nesta rea de definio de padres para Web feito pelo W3C (World Wide Web Consortium). O W3C um consrcio da indstria internacional destinado a conduzir a Internet rumo ao seu completo potencial. Fundado em 1994 e liderado pelo pai da Web, Tim Berners-Lee, o W3C possui mais de 450 organizaes membro, dentre elas destacam-se a Microsoft, a AOL, a Apple, a Sun, a Adobe e a Macromedia, alm de uma grande variedade de fabricantes de hardware e software. Os princpios fundamentais do projeto W3C so:

Interoperabilidade: especificaes para as linguagens e para os

protocolos da Web devem ser compatveis entre si, alm de prover o acesso Web a partir de qualquer tipo de hardware ou software;

Evoluo: a Web deve ser capaz de acomodar tecnologias futuras.

Princpios de projeto, como, simplicidade, modularidade e extensibilidade aumentaro as chances da Web trabalhar com tecnologias emergentes, tais como dispositivos mveis e televiso digital, bem como outras que ainda esto por vir;

Descentralizao: este o principio mais novo e mais difcil de

aplicar. Para fazer com que a Web alcance propores mundiais, enquanto resiste a erros e quedas do sistema, sua arquitetura deve limitar ou mesmo eliminar as dependncias em registros centrais com sede em grandes potncias mundiais. Estes princpios guiam as atividades do W3C, que desenvolve especificaes abertas a fim de garantir a interoperabilidade, a evoluo e a descentralizao dos produtos relacionados com a Web.

5.1. WEB 2.0

A Web 2.0, termo criado por Dale Dougherty em uma conferncia realizada em outubro de 2005, em So Francisco EUA, retrata o estado atual da Internet. Um local acessvel a todos, onde possvel desenvolver, pesquisar, informar e interagir, sem a interferncia de corporaes ou restries de uso. Adotando uma tica mais profunda, pode-se perceber a Web 2.0 ultrapassando as barreiras fsicas, ao ponto de que, cada vez mais, se observa o nascimento de aplicaes robustas e seguras que nada deixam a desejar s to conhecidas aplicaes desktop. Chegar o dia em que o usurio final no necessitar de softwares, com suas licenas exorbitantes, instalados no seu PC, pois ele ter solues alternativas disponveis na Web, a qualquer hora do dia, independente de plataforma operacional ou configurao de hardware. Keith Robinson (2006) do site Asterisk, afirma O contedo da Web 2.0 a possibilidade democrtica e sem barreiras de exercer sua possibilidade de opinar.. A Web 2.0 vem ao mundo sobre a perspectiva da acessibilidade total, ou seja, as aplicaes Web que esto surgindo dentro desse novo paradigma estaro prontas para serem executadas nos celulares, videogames e na to esperada TV digital. Fundamentalmente, a atitude empreendedora da Web 2.0 tem maior possibilidade de dar certo porque foi concebida sob o prisma da colaborao e do contedo multiplataformas. Os usurios lem mais, criam mais e, consequentemente, colaboram mais. O efeito da Web 2.0 para os desenvolvedores tambm notrio. Todo programador sabe o quo tortuoso ter de modificar o escopo de um sistema que no segue nenhum padro de desenvolvimento. E justamente a que se percebem as metodologias da Web 2.0, que propiciam ao programador maneiras prticas de alterar mdulos do sistema sem alterar o projeto como um todo.

6. FUNCIONAMENTO DAS PGINAS WEB

Em uma aplicao Web tradicional, a maior parte das aes do usurio na interface ativa uma requisio HTTP ao servidor. Este por sua vez, processa a solicitao (retornando dados, interpretando nmeros, etc.) e, ento, retorna uma pgina no formato (x)HTML para o browser do usurio. Toda vez que o usurio interage com o site, um outro documento enviado para o navegador, contendo o mesmo contedo de cabealhos e dados. Quando o usurio efetua a sada ou fecha o navegador, a aplicao sai e a sesso destruda. Qualquer informao que o usurio necessite ver na prxima vez que ele entrar, ter que passar pelo mesmo mecanismo.

Figura 1: Requisio normal entre cliente/servidor AJAX.

Figura 2: Comunicao cliente/servidor com

Em uma aplicao que utiliza tcnicas AJAX, parte da lgica movida para o navegador. Dessa forma, quando o usurio acessa a aplicao, um documento de contedo mais complexo entregue ao browser. Esse documento permanecer com o usurio durante toda a sesso. Mesmo que o usurio altere sua aparncia original, o script que compe essa pgina ficar encarregado de responder essas informaes e decidir o que dever ser feito sem que haja uma nica atualizao de tela. Ao invs de carregar uma pgina inteira no inicio da sesso, o navegador na verdade carrega uma ferramenta AJAX, que fica responsvel por renderizar toda a interface visualizada pelo usurio e ainda realizar a comunicao com o usurio. Tudo isso deve ocorrer assincronamente, ou seja, um processo deve estar acontecendo independente do outro, tornando assim a navegao mais eficaz. Isso garante com que o usurio nunca se depare com uma pgina em branco no seu navegador, esperando por uma resposta do servidor. As aes de um usurio durante sua navegao dentro da aplicao gerariam, todas elas (por mais simples que fossem), uma solicitao HTTP. Com AJAX essa requisio feita pelo JavaScript associado a objetos XML. Assim sendo, qualquer resposta para essas aes do usurio so tratadas pelo prprio AJAX. Se essa ferramenta necessitar de algo que est no servidor para responder a essas aes, requisies assncronas sero utilizadas, sem prejudicar a navegao do usurio.

7. O AJAX E AS LINGUAGENS DE SERVIDOR

Para que o AJAX torne-se funcional, faz-se necessrio o uso de uma linguagem de servidor que permita a integrao da aplicao que est atuando no lado cliente (browser), com os dados que se encontram armazenados no servidor. Existem diversas linguagens servidoras disponveis, dentre elas o

PHP, o ASP.net, a Perl, o Cold Fusion, JSP e Servlets, dentre outras. Porm, o que mais plausvel quando se fala em interao entre uma aplicao que utiliza AJAX e uma linguagem de servidor, seja ela qual for, a capacidade que essa linguagem possui, para que o desenvolvedor possa implementar scripts organizados, preferencialmente, orientados a objetos, capazes de fornecer uma base sustentvel para atuar em perfeita sincronia com as requisies solicitadas pelo usurio durante sua navegao.

Solues bem desenvolvidas no lado servidor, estruturadas em classes e providas de mtodos que possibilitem a reusabilidade, bem como a prtica manuteno dos mesmos, agilizam a movimentao e distribuio dos dados. E se tratando de AJAX, esse um fator indispensvel para o bom funcionamento das aplicaes desenvolvidas sob essa nova tendncia.

8. SOAP E WEBSERVICE + AJAX

A Internet vem se popularizando num ritmo quase que frentico e junto com essa popularizao surge a necessidade da integrao dos sistemas que a utilizam. A definio de um protocolo simples e baseado em XML era fundamental para realizar a integrao entre sistemas distintos. Apesar do SOAP (Simple Object Access Protocol Objeto Simples de Protocolo de Acesso) no ter sido desenvolvido para esse objetivo, ele adequou-se perfeitamente ao mundo da integrao on-line.

O SOAP um protocolo elaborado para facilitar a chamada remota de funes via Internet, permitindo assim que dois programas diferentes comuniquem-se de uma maneira tecnicamente muito semelhante invocao de documentos Web.

O SOAP oferece diversas vantagens no encontradas em outros protocolos como o DCOM, CORBA ou mesmo o TCP/IP: simples e fcil de implementar; um padro adotado pela W3C, alm de diversas outras empresas; Utiliza os mesmos padres da Web para quase tudo: a comunicao feita via HTTP com pacotes virtualmente idnticos; os protocolos de autenticao e encriptao so os mesmos; a manuteno de estado feita da mesma forma; normalmente implementado pelo prprio servidor Web; Passa por Firewalls e roteadores que o vem como uma comunicao HTTP; Os dados e as funes so descritos em XML, tornando-o fcil de usar e bastante robusto; Independe de sistema operacional e CPU; Pode ser usado tanto de forma annima como com autenticao (login/senha);

As solicitaes SOAP podem ser realizadas em trs padres: GET, POST e SOAP. Os padres GET e POST so idnticos aos pedidos feitos pelos browsers. O SOAP um padro que se assemelha ao POST, porm seus pedidos so feitos em XML e possibilitam a utilizao de recursos mais aprimorados

como passar estruturas e arrays. O XML descreve os dados em tempo de execuo e evita problemas causados por inadvertidas mudanas nas funes, j que os objetos chamados tm a possibilidade de sempre validar os argumentos passados por essas funes, tornando o protocolo muito mais confivel.

O SOAP define ainda um padro chamado WSDL, que descreve objetos e mtodos disponveis atravs de pginas XML acessveis em toda a Web. O WSDL funciona da seguinte maneira: quem publicar um servio tambm cria as pginas. Quem desejar invocar o servio, pode utilizar essas pginas como uma espcie de documentao de chamada e, tambm, us-las antes de chamar as funes que verificam se alguma coisa foi alterada.

O SOAP e o AJAX so integrados de forma bastante simples, partindo do princpio de que os dois utilizam documentos XML como ferramenta bsica de execuo. Utilizando AJAX com SOAP, possvel chamar mtodos implementados em aplicaes desenvolvidas pelo prprio programador e ainda acessar aplicaes de outros desenvolvedores, fazendo com que as aplicaes se tornem totalmente interligadas a qualquer servidor que oferea servios Web pelo protocolo SOAP.

8.1 WEBSERVICES
Um WebService um componente acessvel atravs de protocolos padres da Internet (como o SOAP). Sendo componentes, esses servios possuem uma funcionalidade que pode ser reusada sem a preocupao de como a mesma implementada. Os WebServices combinam os melhores aspectos do desenvolvimento baseado em componentes e a Internet. A enciclopdia virtual Wikipdia define-os da seguinte maneira: Webservices um conjunto de operaes/mtodos que podem ser acessados remotamente.

Os WebServices podem ser utilizados em quase tudo que envolva troca de dados e informaes. Qualquer plataforma que interprete rotinas HTTP e trabalhe com XML pode usar os dados/informaes dos webservices, sem restrio alguma.

Associar os WebServices ao uso do AJAX algo imprescindvel para torn-los ainda mais robustos em uma aplicao. Com eles podem-se acessar rotinas de validao de carto de crdito, endereamento postal (CEP), calcular valores de fretes dos sites de comrcio eletrnico, aperfeioar um sistema de notcias, enfim, um leque gigantesco de possibilidades se abre diante do desenvolvedor que consome os recursos dos WebServices.

9. APLICAO
Com o intuito de obter subsdios que pudessem ratificar tudo o que foi exposto sobre o AJAX, foi necessrio o desenvolvimento de um sistema piloto, com duas verses diferentes. Um que utiliza tcnicas AJAX em seu contedo, processamento e fluxo de dados. E um outro com implementaes de uma aplicao Web normal, ou seja, um sistema construdo apenas com o uso dos recursos oferecidos pela linguagem de servidor PHP, sem atualizaes dinmicas ou links rpidos na estrutura da aplicao.

A escolha da aplicao foi um ponto importante. As pesquisas visam atingir solues praticas que levem algum beneficio a sociedade, seja com o melhoramento de um processo, ou com a inveno de um produto. Dentro deste contexto, a escolha de um loja virtual bastante pertinente.

Dessa forma, iremos expor nos prximos pargrafos, grficos gerados a partir de testes comparativos realizados com esses dois modelos de sistemas, atestando ento todos os benefcios que o AJAX pode proporcionar a uma aplicao Web.

9.1 ESPECIFICAO DO EXEMPLO

Os modelos construdos so todos multiplataforma, pode-se facilmente construir os modelos em uma plataforma e test-los em uma outra. Este modelo de analise foi construdo completamente em plataforma WINDOWS, no implicando que o mesmo no possa ser desenvolvido em outra plataforma, como o LINUX, por exemplo. Todas as especificaes esto descritas abaixo. 9.1.1 FERRAMENTAS UTILIZADAS Os dois modelos de aplicao foram construdos utilizando as seguintes ferramentas: Para a Base de dados, MySQL 5.0; Como linguagem servidora foi utilizado o PHP 5.1.1; Na camada do cliente utilizamos: XHTML, XML, CSS e Javascript.

9.1.2 REAS INTERNAS DA APLICAO As aplicaes so baseadas na estrutura de uma loja virtual, pois neste tipo de sistema podemos encontrar ferramentas e funcionalidades onde o uso de tcnicas AJAX facilmente visualizado. A aplicao esta dividida em duas reas.

9.1.2.1 REA PUBLICA

Na rea pblica teremos a vitrine on-line, que conta com a exibio dos produtos a venda dispostos por categorias. Nesta mesma rea esta o carrinho de compras, onde os produtos adicionados ao carrinho aparecem listados, ao encerrar sua navegao pelo site, o usurio pode finalizar seu pedido confirmando assim a sua compra.

9.1.2.2 REA ADMINISTRATIVA

Na rea administrativa, construmos dois formulrios de cadastrado bsicos a um comrcio eletrnico, o cadastro de produtos e o de fornecedores.

9.2 LOJA VIRTUAL

Ao acessar a loja virtual, o usurio poder visualizar um menu horizontal no topo do site, onde so apresentadas as categorias dos produtos a venda na loja virtual. Clicando em cada categoria sero expostos os seus respectivos produtos em uma rea especifica do site. Esses produtos esto representados por fotos, contendo ainda uma breve descrio e o seu preo atual.

9.2.1 REA PUBLICA (AJAX) Utilizamos um sistema de paginao bastante eficiente que proporciona ao usurio uma navegao rpida e agradvel pelos produtos ofertados no site. Ao ir de uma pgina para outra, apenas o contedo central, ou seja, os produtos e suas descries, so alterados, conservando assim toda a estrutura ao redor desta rea, evitando um desperdcio de trfego de rede e economizando tempo de navegao

Imagem 1: Em azul, a rea padro do sistema. Em vermelho, a rea que sofre modificaes.

9.2.2 REA PUBLICA (S/ AJAX) Na rea publica temos a paginao de produtos sem a utilizao de AJAX, ento, a cada mudana na paginao temos algumas requisies ao servidor e uma nova pagina montada com todos os prximos 16 produtos e seus respectivos menus e o carrinho de compras.

9.2.3 REALIZAR COMPRA (AJAX) Para realizar um compra nessa loja virtual, basta que o usurio clique sobre o cone (foto) do produto desejado e o arraste para o carrinhos de compras, disposto lateralmente a rea de exibio de produtos, e que estar disponvel e acessvel durante toda a sesso de navegao do usurio. Cada produto adicionado ao carrinho de compras simbolizado, dentro do mesmo, por uma verso miniatura da sua foto. Existe ainda um link dedicado apenas ao aumento e diminuio da quantidade de cada item inserido no carrinho de compras. Tudo isso realizado sem uma nica atualizao de pgina, de forma que o usurio apenas ter de esperar por uma resposta do servidor no momento em que finalizar o seu pedido (clicando sobre o link fechar pedido), onde todos os dados acumulados durante a navegao so processados e armazenados definitivamente. O screenshoot abaixo, mostra o exato momento que o usurio arrasta um produto para o seu carrinho de compras.

Imagem 2: Tela principal da loja virtual

9.2.4 REALIZAR COMPRA (S/ AJAX) Nesta verso da aplicao, a rea pblica do sistema tambm apresenta um local destinado a exibio dos produtos anunciados na loja virtual, oferecendo tambm a mesma opo de montar um pedido, inserindo itens no carrinho de compras. Entretanto, diferente da aplicao desenvolvida com tcnicas AJAX, nesta, o cliente deve clicar no link comprar existente ao lado de cada produto, esperar pelo envio da requisio ao servidor, visualizar seu pedido na pgina que possui o carrinho de compras e confirmar o pedido ou, se desejar, ir para o link continuar comprando, o qual o leva de volta para a relao de produtos, recarregando toda a pgina novamente. O sistema de paginao, que organiza os produtos listados na pgina principal, no possui mecanismo de montagem otimizada de templates ou atualizao de contedo atravs de iframes. Os produtos so mostrados, de 16 em 16, com um link de navegao entre as pginas, onde a cada clique, toda a estrutura do documento remontada e os prximos 16 produtos so exibidos ao usurio.

9.2.5 REA DE CADASTROS (AJAX) Na parte dedicada a administrao da loja virtual, existem dois tipos de cadastros disponveis ao administrador do sistema: o cadastro de fornecedores e o de produtos. O primeiro, contm campos destinados a entrada de dados referentes aos fornecedores de produtos a loja virtual. Todos os campos contam com validao de dados (data, valor monetrio, quantidade, e-mail, CNPJ, etc.), desta maneira, todos os possveis erros de digitao ou omisso de caracteres so apresentados durante o processo de cadastramento, possibilitando a correo imediata. Nesse formulrio, embutimos o consumo de um WebService bastante til para preenchimento de endereos. Dado um determinado CEP, o servio retorna o nome da rua, bairro, cidade e estado pertencentes ao CEP informado, sem haver a necessidade de remontar toda a pgina apenas para exibir esses novos dados recolhidos do servidor. Neste ponto podemos observar perfeitamente o quanto o AJAX poderoso, pois seria no mnimo tedioso pensar em consumir um WebService deste tipo, se tivssemos de aguardar por uma resposta do servidor, guardar as informaes j digitadas nos campos anteriores, atualizar o documento, remontar o formulrio com os

dados armazenados em seus respectivos campos e exibir os novos dados retornados. Com o AJAX, a atualizao imediata e o resultado torna-se instantneo.

Imagem 3: Formulrio para cadastro de fornecedores.

Do formulrio de cadastro de fornecedores, pode-se acessar diretamente o formulrio para cadastro de produtos, no caso do administrador do sistema, ao mesmo tempo em que cadastra um novo fornecedor, j cadastrar tambm os produtos fornecidos por este fornecedor. O formulrio para cadastro de produtos exibido na mesma tela como uma janela sobrepondo o cadastro de fornecedores. Assim que for efetuado o cadastramento do novo produto, o mesmo j ser mostrado em uma listagem contendo todos os produtos j cadastrados no sistema, mais uma vez, sem nenhum refresh de pgina. Outro recurso muito interessante utilizado nos formulrios de cadastro, foi a atualizao de um select a partir de outro select, selects aninhados. Por exemplo, no cadastro de produtos, o administrador deve selecionar a subcategoria a qual pertence o produto que est sendo cadastrado, porm, esta sub-categoria, por sua vez, pertence a uma categoria. Nesse caso, o administrador selecione uma categoria X e suas sub-categorias so imediatamente exibidas no campo seguinte.

Imagem 4: Formulrio para cadastro de produtos, acessado atravs do cadastro de fornecedores.

9.2.6 REA DE CADASTROS (S/ AJAX) No sistema sem AJAX o preenchimento dos cadastros realizado de forma individual. Existem telas separadas para fornecedores e produtos. Toda a digitao realizada e submetida ao servidor que realiza as incluses e remonta uma nova pagina no cliente para a digitao de um novo fornecedor ou produto.

10. RESULTADOS
10.1 ESPECIFICAES DOS EQUIPAMENTOS UTILIZADOS Computador cliente: AMD Athlon 64 2800+ com 1Gbyte de RAM. Interfaces de rede: Para acessar internet: Marvell Yokon 88E8001 PCI GIGABIT ETERNET; Para acesso a rede local: SIS 900 PCI ETHERNET; Computador servidor: AMD Sempron 2300+ com 512 de RAM Interface de rede: Para acesso a rede local: SIS 900 PCI ETHERNET; Equipamentos acessrios: HUB LG 10/100 Modem Externo Motorola; Cabo de par-tranado para interligao dos pontos da rede.

10.2 RESULTADO DOS TESTES. Os dois sistemas implementados passaram por diversos tipos de testes e analises, gerando resultados que tanto ajudam a entender o funcionamento do AJAX, como tambm comprovam toda a teoria que o envolve.

A pesquisa foi feita com os sistemas hospedados localmente (com exceo para as analises de tempo de resposta, onde os sistemas foram hospedados na Web) em uma mquina servidora, tendo o servidor Web Apache 2.0, o PHP verso 5.1.1 e o MySQL 5.0 devidamente instalados. Esse servidor foi acessado pela mquina cliente por intermdio de uma rede local de 10/100 MBytes. Os testes foram executados no dia 22/07/06 (sbado), das 16:08 s 17:45. O Mozilla Firefox verso 1.0.6 foi o browser escolhido para acessar as aplicaes, e o software responsvel pela a analise de trfego de rede foi o Etheral Network Protocol Analyzer verso 0.99, disponvel em http://www.ethereal.com;

TEMPO DE EXECUO: aqui podemos observar a quantidade de tempo despendido para a execuo de uma determinada ao ou processamento no sistema desenvolvido com AJAX e o tempo necessrio para efetuar a mesma ao no sistema sem AJAX. Cinco pessoas diferentes participaram deste teste, seguindo os seguintes critrios: todos preencheram o formulrio de fornecedores e de produtos com os mesmos dados; realizaram um pedido com os mesmos produtos e os mesmos valores. O tempo de cada pessoa foi cronmetrado, e ao final todas as cinco marcas obtidas foram divididas pelo numero de participantes do teste (cinco), obtendo-se assim as mdias para cada ao. SISTEMA COM AJAX Cadastro de fornecedor e produtos: Composio de pedido: 1,01 minuto (mdia) 13,14 segundos (mdia) SISTEMA SEM AJAX 2,06 minutos (mdia) 22,05 segundos (mdia)

TEMPO DE RESPOSTA: essa analise apresenta o tempo de resposta do servidor para cada uma das aes apresentadas abaixo. Para esse teste, hospedamos os sistemas na Web, em um servidor de plataforma Windows 2003 Server com suporte a PHP 5.1.1 e MySQL 5.0. A aplicao foi acessada em uma conexo banda larga de 100 Kbps. SISTEMA COM AJAX Login: Cadastro de fornecedor: Cadastro de produto: Fechamento de pedido: 2,9 segundos (mdia) 1,8 segundos (mdia) 1,3 segundos (mdia) 0,8 segundos (mdia) SISTEMA SEM AJAX 4,9 segundos (mdia) 3,9 segundos (mdia) 3,0 segundos (mdia) 5,2 segundos (mdia)

TRFEGO DE REDE: o ltimo resultado a ser apresentado, e com certeza o mais interessante de todos eles. Nesse teste, analisamos a quantidade de bytes que trafegaram na rede durante a realizao de um mesmo processo. Cada ao foi executada por trs vezes, e assim podemos observar claramente a economia de bytes enviados e recebidos na aplicao com implementaes AJAX, em relao ao sistema normal.

PROCESSO DE LOGIN SISTEMA COM AJAX Teste 1 Trfego Total: 1.218 bytes Bytes enviados (cliente-servidor): 386 bytes Bytes recebidos (servidor-cliente): 832 bytes Trfego Total: 1.183 bytes Bytes enviados (cliente-servidor): 345 bytes Bytes recebidos (servidor-cliente): 828 bytes Trfego Total: 1.218 bytes Bytes enviados (cliente-servidor): 386 bytes Bytes recebidos (servidor-cliente): 832 bytes CADASTRO DE FORNECEDORES SISTEMA COM AJAX Teste 1 Trfego Total: 1.483 bytes Bytes enviados (cliente-servidor): 359 bytes Bytes recebidos (servidor-cliente): 1.124 bytes Trfego Total: 1.483 bytes Bytes enviados (cliente-servidor): 359 bytes Bytes recebidos (servidor-cliente): 1.124 bytes Trfego Total: 1.483 bytes Bytes enviados (cliente-servidor): 359 bytes Bytes recebidos (servidor-cliente): 1.124 bytes CADASTRO DE PRODUTOS SISTEMA COM AJAX Teste1 Trfego Total: 1.322 bytes Bytes enviados (cliente-servidor): 358 bytes Bytes recebidos (servidor-cliente): 964 bytes Trfego Total: 1.322 bytes Bytes enviados (cliente-servidor): 358 bytes Bytes recebidos (servidor-cliente): 964 bytes Trfego Total: 1.610 bytes Bytes enviados (cliente-servidor): 466 bytes Bytes recebidos (servidor-cliente): 1.144 bytes SISTEMA SEM AJAX Trfego Total: 15.973 bytes Bytes enviados (cliente-servidor): 12.382 bytes Bytes recebidos (servidor-cliente): 3.591 bytes Trfego Total: 16.226 bytes Bytes enviados (cliente-servidor): 12.449 bytes Bytes recebidos (servidor-cliente): 3.591 bytes Trfego Total: 16226 bytes Bytes enviados (cliente-servidor): 12.449 bytes Bytes recebidos (servidor-cliente): 3.591 bytes SISTEMA SEM AJAX Trfego Total: 10.733 bytes Bytes enviados (cliente-servidor): 8.852 bytes Bytes recebidos (servidor-cliente): 8.186 bytes Trfego Total: 10.733 bytes Bytes enviados (cliente-servidor): 8.852 bytes Bytes recebidos (servidor-cliente): 8.186bytes Trfego Total: 10.721 bytes Bytes enviados (cliente-servidor): 8.852 bytes Bytes recebidos (servidor-cliente): 1.869 bytes SISTEMA SEM AJAX Trfego Total: 9.284 bytes Bytes enviados (cliente-servidor): 906 bytes Bytes recebidos (servidor-cliente): 8.378 bytes Trfego Total: 9.284 bytes Bytes enviados (cliente-servidor): 906 bytes Bytes recebidos (servidor-cliente): 8.378 bytes Trfego Total: 9.561 bytes Bytes enviados (cliente-servidor): 906 bytes Bytes recebidos (servidor-cliente): 8.657 bytes

Teste 2

Teste 3

Teste 2

Teste 3

Teste2

Teste3

PROCESSO DE COMPRA (incluso de 4 itens no carrinho de compras e finalizao do pedido, com exibio dos dados da compra) SISTEMA COM AJAX Teste1 Trfego Total: 12.556 bytes Bytes enviados (cliente-servidor): 7.845 bytes Bytes recebidos (servidor-cliente): 4.711 bytes Trfego Total: 12.441 bytes Bytes enviados (cliente-servidor): 7.190 bytes Bytes recebidos (servidor-cliente): 4.681 bytes Trfego Total: 12.441 bytes Bytes enviados (cliente-servidor): 7.190 bytes Bytes recebidos (servidor-cliente): 4.681 bytes SISTEMA SEM AJAX
Trfego Total: 91.947 bytes Bytes enviados (cliente-servidor): 69.450 bytes Bytes recebidos (servidor-cliente): 3.591 bytes Trfego Total: 91.949 bytes Bytes enviados (cliente-servidor): 69.450 bytes Bytes recebidos (servidor-cliente): 22.499 bytes Trfego Total: 97.204 bytes Bytes enviados (cliente-servidor): 72.473 bytes Bytes recebidos (servidor-cliente): 24.725 bytes

Teste2

Teste3

11. CONCLUSO
A aplicao do AJAX na Web 2.0 ainda no est sendo amplamente explorada. A prpria Web 2.0 encontra-se em fase embrionria, onde mtodos de utilizao e, at mesmo, conceitos e fundamentos ainda esto sendo calcados. Trata-se no apenas de remodelar a Web atual, mas sim de encorajar, desenvolvedores e utilizadores, a entender que a Internet deixou de ser apenas um veiculo dinmico de intercomunicao e informao e passou categoria de plataforma, na qual tudo, absolutamente tudo, acontece. A idia de plataforma ainda mais vasta. Emprega o uso da rede como plataforma de servios, e tais aplicaes podem localizar uma determinada funcionalidade e esta ser disponibilizada, sem a necessidade de uma nova requisio. A tcnica AJAX trouxe uma viso inovadora para o desenvolvimento Web e vem ajudando a embasar tudo aquilo a que se prope a Web 2.0. Os paradigmas de interao entre aplicao/usurio esto sendo profundamente modificados por esse novo prisma das aplicaes on-line. Nota-se intensamente a migrao de softwares desktop para a plataforma Web e mesmo os sistemas que j atuam sob essa modalidade se encontram em processo de reformulao para atender s novas caractersticas da Internet, ditadas pela Web 2.0. Aliar o dinamismo e a agilidade dos resultados encontrados nas aplicaes desktop independncia e portabilidade oferecidos pelos sistemas Web tornou-se a meta de todo desenvolvedor de softwares. Experincias realizadas com AJAX tm mostrado uma melhora indiscutvel na acessibilidade e na economia de tempo de navegao, que antes eram tidos como os grandes viles dos sistemas Web. Sites e portais que fazem uso do AJAX obtiveram redues drsticas na quantidade de bytes despendidas nas suas larguras de banda. Tambm, conseguiram aumentar a quantidade de acessos a suas pginas depois que comearam a criar interfaces mais agradveis ao usurio. Diego Eis, em um artigo para o site Tableless, citou o exemplo do portal da ESPN que consumia cerca de 2 Terabytes por dia e conseguiu a faanha de reduzir esse nmero quase que 90% com a simples adoo dos padres Web de desenvolvimento. A principal inteno com a publicao deste trabalho foi difundir ainda mais essa tcnica to interessante, demonstrando suas principais aplicaes, seus benefcios e suas inovaes, alm de expor a comunidade de desenvolvedores e usurios da Internet, que estamos embarcando em uma nova era, na qual os paradigmas vem sendo derrubados e novas ticas sobre programao e engenharia de softwares esto eclodindo. Finalizamos com uma afirmao daquele que, digamos, inventou o AJAX, Jesse James Garret (2005): Os enormes desafios em criar aplicaes AJAX no so tcnicas. O corao das tecnologias AJAX maduro, estvel, e bem conhecido. Ao contrrio disso, os desafios so para os desenvolvedores dessas aplicaes: esquecer o que ns achamos saber sobre as limitaes Web, e comear a imaginar uma longa e rica gama de possibilidades..

12. REFERNCIAS

MARQUEZI, Dagomir. A revoluo do AJAX. Info Exame Ano 21 n. 240 pgina 42. Maro, 2006. MOREIRA, Daniela. AJAX leva aplicaes para muito alm do desktop. IDG Now! Disponvel em: <http://old.idgnow.com> - Acesso em: 22/05/06. EIS, Diego. Uma das vantagens dos padres. <http://www.tableless.com.br> - Acesso em: 15/05/06. FERREIRA, Elcio. AJAX para quem s ouviu http://www.tableless.com.br > - Acesso em: 15/05/06; FERREIRA, Elcio. AJAX: encarando o mundo http://www.tableless.com.br > - Acesso em: 15/05/06; falar. Tableless. Disponvel em:

Tableless. Disponvel

em: <

real.

Tableless.

Disponvel

em

<

ASLENSON, Ryan and SCHUTTA, Nathaniel T. Foundations of AJAX forums.apress.com GARRET, Jesse James. AJAX: A New Aproach to Web Applications. Adaptive Path. Disponvel em: <http://www.adaptivepath.com> - Acesso em: 09/ 05/06. LOMANTO, Paulo. AJAX Olhar crtico sob sua utilizao. iMasters. Disponvel em: <http://www.imasters.com.br> - Acesso em: 22/05/09. SOARES, Walace. AJAX Guia Prtico. Editora rica 1 Edio, 2006. WIKIPDIA. AJAX. Disponvel em: <http://www.wikipedia.org> - Acesso em: 22/05/06. HOLZNER, Steve. AJAX for dummies Editora Wiley Publishing Inc. Copyright 2006. ULLMAN, Larry. Visual QuickPro Guide PHP and MySQL for dynamic Web sites Editora Peachpit Press 2 Edio, 2005.