Web interativa com Ajax e PHP - Juliano Niederauer - Capítulo 1

7/31/2019 Web interativa com Ajax e PHP - Juliano Niederauer - Captulo 1

1/25

Novatec

Juliano Niederauer

Web Interativa com

Ajax e PHP


2/25

17

C A P T U L O1 O que Ajax?

A palavra Ajax vem da expresso Asynchronous JavaScript and XML . o uso sistemticode JavaScript e XML (entre outras tecnologias) para tornar o navegador mais interativocom o usurio, utilizando-se solicitaes assncronas de in ormaes. Isso quer dizerque podemos utilizar o Ajax para azer uma solicitao ao servidor web sem que sejanecessrio recarregar a pgina que estamos acessando. Veremos a seguir as principaisdi erenas entre as pginas que utilizam esse recurso e as pginas que azem uso domodelo tradicional de comunicao com o servidor.

1.1 Modelo clica e esperaversus modelo interativoDesde o surgimento da internet, o modelo de interao entre usurio e servidor viaHTTP baseado em um sistema simples de hipertexto. Ou seja, voc clica em um linkpara requisitar um documento e ento espera... o servidor responde, processando suarequisio e devolvendo-lhe o documento. Depois de usu ruir desse documento, vocclica em mais um link e espera... e assim por diante (veja a Figura 1.1).

NAVEGADOR CLIENTE

Interface do usurio

Dados HTML

SERVIDOR

Servidor web

Banco de dados eprocessos do servidor

SolicitaoHTTP

Figura 1.1 Modelo clssico de aplicao web.


3/25

Web Interativa com Ajax e PHP18

Esse sistema ainda est em uso, porm os designers e desenvolvedores sempre questio-naram se esse inconveniente chama-responde teria m. Por diversos atores, geralmenteeles recebiam um no como resposta.

Mesmo com a evoluo dos navegadores (browsers), ainda havia muitas restries,como, por exemplo, as incompatibilidades com o sistema operacional e com o nave-gador do usurio, alta de plug-ins instalados na mquina-cliente e baixa qualidadedas conexes utilizadas pelos usurios. Diante dessas restries, os desenvolvedorestrabalharam no sentido de melhorar o modelo de interao da web, mesmo dentro dosistema chama-responde. Assim, oram criando novas tcnicas para tornar as aplicaesmais interessantes e azer com que elas se tornassem to teis quanto suas aplicaesequivalentes para desktop.

Podemos dizer que uma dessas tcnicas, denominada Ajax, apesar de existir h bas-tante tempo, s ganhou notoriedade quando aquelas antigas restries comearam a sersuperadas. Assim como ocorreu na poca em que os navegadores passaram a suportartecnologias como CSS e XHTML, a possibilidade de utilizar o Ajax nos principais na-vegadores oi comemorada pelos desenvolvedores, de modo que o principal bene ciadocom a adoo dessa erramenta ser o usurio nal, pois a fexibilidade do Ajax ircon erir uma grande agilidade atualizao das in ormaes na web.

O modelo de uma aplicao que utiliza Ajax est representado na Figura 1.2.

SERVIDOR

NAVEGADOR CLIENTE

Ferra menta AjaxDados XML

Servidor Web / XML

Banco de dados eprocessos do servidor

SolicitaoHTTP

ChamadaJavascript

DadosHTML

Interface do usurio

Figura 1.2 Modelo de aplicao com Ajax.

Veja que, nesse modelo, a interao entre o navegador e o servidor web no ocorrede orma totalmente direta, mas por meio da erramenta Ajax. E como o Ajax ativadopor uma chamada JavaScript, o usurio pode permanecer visualizando a pgina nor-malmente enquanto ocorre a comunicao com o servidor web.

O servidor processa a solicitao do Ajax (por exemplo, realizando alguma pesquisaou simplesmente atualizando alguma in ormao no banco de dados) e envia umaresposta. Caso o servidor retorne dados, o Ajax poder utilizar esses dados para azera atualizao de apenas uma parte da pgina que o usurio est visualizando, sem


4/25

19Captulo 1 O que Ajax?

que seja necessrio recarreg-la totalmente. Caso contrrio, o usurio tambm podercontinuar usu ruindo normalmente da pgina, mas ela no so rer qualquer alteraovisual. Ou seja, como se a pgina pudesse ouvir e alar simultaneamente.

Portanto, notvel que essa orma de interao entre cliente e servidor possibilitarno apenas a agilidade na atualizao de in ormaes na web, mas evitar tambm aretransmisso desnecessria de in ormaes estticas (cdigos, textos, imagens etc.),melhorando o tr ego da rede e a usabilidade das pginas, que caro muito maisparecidas com aplicaes do que com simples pginas da internet.

Con orme oi comentado no incio do livro, o Ajax j existe h bastante tempo, massua di uso dependia do momento da web e das nossas habilidades em lidar com astecnologias envolvidas nesse processo. Finalmente percebemos que a web est passan-do por esse processo de mudana e j estamos muito mais aptos a trabalhar com astecnologias disponveis nessa rea. Veremos a seguir, como exemplo, algumas situaesonde seria interessante o uso do Ajax.

1.2 Exemplos de uso prticoExistem diversos tipos de situaes nas quais o uso do Ajax seria extremamente til,dentre as quais podemos citar a validao de ormulrios, atualizao de enquetes ede carrinhos de compras (e-commerce), conversao on-line (chats), entre outras quepriorizam a atualizao de in ormaes em tempo real.

Outro exemplo bastante comum so os sites de relacionamento, os quais vm uti-lizando essa tcnica para acilitar a classi cao de seus usurios. Um dos sites maisconhecidos, a rede social Orkut, pertencente ao Google, utiliza bastante esse recurso. Osdesenvolvedores do Orkut criaram uma legenda que permite a cada usurio classi carseus amigos, con orme mostrado na Figura 1.3:

Figura 1.3 Legenda utilizada.


5/25


Assim, cada amigo relacionado a esse usurio poder ser classi cado por ele deacordo com essa legenda, como mostra a Figura 1.4.

Figura 1.4 Marcando itens sem mudar de pgina.

Por exemplo, se voc considera um amigo supercon vel, pode preencher as trscarinhas, clicando sobre a terceira delas. Se voc de um amigo, pode clicar sobre aestrela e marc-la. A pergunta nesse caso a seguinte: Como azer para atualizar o bancode dados no servidor a cada vez que o usurio clicar sobre um desses smbolos?.

A que entra o Ajax. Se estivssemos utilizando o modelo clssico de aplicaoweb, ao clicar sobre um desses smbolos seria enviada uma solicitao ao servidor webe toda a pgina deveria ser recarregada. Com o Ajax, ao clicar sobre um dos smbolos,o navegador se comunica com o servidor por meio de uma chamada JavaScript, permi-tindo que o usurio continue navegando e visualizando a pgina como se nada tivesseacontecido. Mais adiante veremos como implementar um sistema semelhante a esse.

Outra aplicao do Ajax no comrcio eletrnico, mais especi camente na parteque envolve o carrinho de compras, ou seja, os produtos que o cliente j selecionoupara comprar. Normalmente o rete a ser pago calculado de acordo com o CEP docliente (Figura 1.5).

Figura 1.5 Calculando o frete do produto.


6/25


Portanto, o cliente dever digitar seu CEP, clicar no botoOk e aguardar at que apgina seja recarregada com o valor do rete calculado pelo sistema. Se osse utilizadoo Ajax, no momento em que o cliente clicasse no botoOk , haveria uma comunicaovia JavaScript com o servidor para obter o valor do rete, que seria mostrado na tela por

meio do Ajax, enquanto o resto da pgina permaneceria inalterado.O mesmo procedimento poderia ser utilizado no caso de uma enquete, Figura 1.6.

No momento em que o usurio respondesse a pergunta, marcando uma das opes,seria atualizada apenas a parte da pgina que contm essa enquete. Assim, estaramosevitando o recarregamento desnecessrio de muito contedo, principalmente se or umgrande portal.

Figura 1.6 Respondendo uma enquete.

Outro exemplo seria a validao de ormulrios de cadastro em tempo real. claroque se pode azer uma validao do lado cliente por meio de uma uno JavaScript,porm existem in ormaes que precisam ser validadas no lado servidor, como, porexemplo, o nome de usurio (username).

A Figura 1.7 mostra um ormulrio de cadastro cuja validao eita do modotradicional, ou seja, o servidor web retorna uma pgina de resposta in ormando que ousername escolhido j existe somente aps o usurio submeter o ormulrio inteiro validao. Se utilizssemos Ajax, poderamos incluir um botoTestar ao lado do campodo username. Assim, ao digitar um nome de usurio, um clique no botoTestar ativariaa erramenta Ajax, que veri caria em tempo real no servidor se o username digitado vlido.

Um script de bate-papo (chat) poderia ser mais acilmente criado com o uso do Ajax(Figura 1.8). Assim, o desenvolvedor evitaria o uso de tecnologias mais complexas, como,

por exemplo, a comunicao por sockets.


7/25


Figura 1.7 Validao de formulrio em tempo real.

Figura 1.8 Chat.

Alm das aplicaes citadas, so inmeras as situaes onde poderamos utilizar

o recurso do Ajax. Por exemplo, mais adiante veremos como criar uma tabela on-lineeditvel e um sistema de sugestes para erramentas de busca.


8/25


Portanto, Ajax no somente um novo modelo, mas tambm uma iniciativa naconstruo de aplicaes web mais dinmicas e criativas. O Ajax permite que vriastecnologias trabalhem juntas, cada uma azendo sua parte, con erindo ao desenvolvedormeios poderosos para a criao de websites.

1.3 Caractersticas do AjaxPelos exemplos apresentados at o momento, voc j pde perceber que o principalobjetivo do Ajax melhorar a interatividade entre o usurio e o servidor. Isso signi caque as pginas devem ser programadas de orma a evitar que os usurios esperem emvo. No h porque interromper a interao com o usurio a cada vez que a aplicaonecessitar de algo do servidor.

Para atingir esse objetivo, o Ajax utiliza algumas tecnologias bastante conhecidas,entre outras que so novidades para muitos desenvolvedores. A Figura 1.9 mostra astecnologias envolvidas nesse processo, assim como a utilidade de cada uma delas:

Javascript

ApresentaoXHTML e CSS

Interao dinmicaDOM

Troca de dadosXML

Chamadas assncronasXMLHttpRequest

Figura 1.9 Tecnologias utilizadas pelo Ajax.

Perceba que todo o processo gira em torno da linguagem JavaScript, pois toda acomunicao entre o usurio e o servidor ocorrer por meio dessa linguagem, a par-

tir da qual o Ajax ser ativado. Talvez a maior novidade apresentada na gura seja oXMLHttpRequest, que justamente a tecnologia que viabiliza o processo inteiro. Trata-sede um objeto JavaScript que torna possvel a comunicao assncrona com o servidor,sem a necessidade de recarregar a pgina por completo.

Algumas pessoas acham queXMLHttpRequest, objeto integrante da especi cao domodelo DOM (Document Object Model), apenas um outro nome para o Ajax, porm,como voc pode ver na Figura 1.9, apenas uma parte desse processo, que consiste emagregar diversas tecnologias para con erir interatividade aplicao web.


9/25


O modelo DOM consiste em um conjunto de rotinas que permite o acesso e modi-cao de documentos XML. Portanto, entra no processo do Ajax na parte de interao

dinmica, sendo utilizado no tratamento dos dados retornados pelo servidor, ou seja, a tecnologia que ir con erir dinamismo, aper eioando a manipulao das in ormaes

em questo. Essas in ormaes, por sua vez, podero ser retornadas pelo servidor noconhecido ormato XML (eXtensible Markup Language), um dos mais utilizados paratroca de dados.

Por m, a apresentao desse contedo ser eita pelas populares linguagens demarcao HTML ou XHTML (eXtensible Hypertext Markup Language) e pelas olhasde estilo CSS (Cascading Style Sheets). No Captulo 2, ser eita uma reviso dos prin-cipais conceitos relativos a cada uma dessas tecnologias, para posteriormente criarmosnossa primeira aplicao com o uso do Ajax.

Agora, para complementar a explicao sobre o modelo proposto pelo Ajax, acom-panhe a seguir os princpios dessa erramenta que resumem tudo o que oi explicadoat o momento.

1.3.1 O navegador hospeda uma aplicao, no contedo

Analisando o uncionamento do modelo clica e espera, comentado neste captulo,percebemos que, em uma aplicao web clssica, o navegador executa o papel de um

terminal bobo. Ele no sabe nada sobre as aes que o usurio executou at o mo-mento. Todas essas in ormaes so armazenadas em uma sesso do usurio, localizadano servidor web.

Quando o usurio entra no site ou inicia uma sesso, vrios objetos so criados nolado servidor. Por exemplo, um site de comrcio eletrnico, o carrinho de compras armazenado nessa sesso. Posteriormente, o servidor web envia ao navegador do usu-rio a pgina inicial, que inclui no s cdigos HTML, mas tambm dados do usurio,contedos do site e instrues de ormatao.

Toda vez que o usurio interage com o site, o navegador envia uma requisio aoservidor, que retorna um outro documento, contendo a mesma mistura de cabealhose dados. Assim, por ser um terminal bobo, o que o navegador az simplesmenteretirar o documento anterior e exibir o novo, mesmo que os dois documentos sejammuito semelhantes. Quando o usurio e etua a sada ou echa o navegador, a aplicao nalizada e a sesso destruda. Esse processo ilustrado pela Figura 1.10.

A gura mostra o navegador azendo quatro requisies em seqncia para o ser-

vidor web, de modo que, em cada uma delas, o servidor retorna uma pgina inteirapara ser exibida ao usurio. Isso ocorre porque toda a lgica da aplicao est no ladodo servidor.


10/25


NAVEGADOR

ENTRADA

Sesso dousurio

Pginainicial

Pgina desada

Pginaweb

Pginaweb

SADA

Dados dousurio

SERVIDOR

Banco dedados

Figura 1.10 Fluxo clssico da web.

No caso de uma aplicao Ajax, parte da lgica da aplicao movida para o nave-gador (por meio da linguagem JavaScript). Nesse novo cenrio, quando o usurio entrano site ou inicia uma sesso, o servidor envia ao navegador um documento mais com-plexo, ormado em grande parte por cdigo JavaScript. A idia que esse documento setorne a aplicao do cliente, permanecendo com ele por toda a sesso, mesmo que sejanecessrio alterar consideravelmente sua aparncia em determinados momentos.

Essa aplicao ter a capacidade de tratar as in ormaes ornecidas pelo usurio,decidindo se elas devem ser manipuladas no lado cliente ou no lado servidor, ou aindase ar uma combinao dessas duas alternativas. Por exemplo, se houver necessidade deacessar um banco de dados, a aplicao envia uma requisio ao servidor, caso contrrioela mesma realiza o tratamento das in ormaes.

Isso signi ca que nesse novo modelo o navegador pode armazenar dados sobre oestado da aplicao, visto que o mesmo documento persiste sobre toda a sesso dousurio. No caso de um web site de comrcio eletrnico, por exemplo, o contedo deum carrinho de compras poderia ser armazenado no prprio navegador em vez de serarmazenado na sesso do servidor. A Figura 1.11 ilustra como ocorre o fuxo de in or-maes na web por meio do uso do Ajax.

Perceba que, quando o cliente entra no site, o servidor retorna um documento maiscomplexo, que ser a aplicao do cliente. Ao contrrio do modelo clssico, a aplicaodo cliente ormada por apenas uma pgina, que envia reqentes requisies ao ser-vidor. Essas requisies, que so eitas de orma assncrona pelo objetoXMLHttpRequest,podem ser utilizadas para executar diversas operaes, como, por exemplo, consultas eatualizaes nos bancos de dados localizados no servidor.


11/25


NAVEGADOR

ENTRADA

Sesso dousurio

Pgina(aplicao)do cliente

Pgina desada

SADA

Dados dousurio

SERVIDOR

Banco dedados

Algunsdados dousurio

Requisiesfreqentes

Retorna aaplicao

Figura 1.11 Fluxo da aplicao utilizando Ajax.

Veja tambm que nesse modelo existe um repositrio de dados no prprio navegador,no qual sero armazenadas in ormaes relativas s aes que o usurio executou. Assim,o desenvolvedor pode decidir se acha mais conveniente armazenar uma in ormao nolado cliente ou na sesso do usurio localizada no servidor.

1.3.2 O servidor ornece dados, no contedo

Como pudemos observar no modelo clssico, a cada requisio que o navegador az, oservidor retorna uma pgina inteira, ou seja, uma mistura de dados do usurio, conte-dos do site e instrues de ormatao. Entretanto, no novo modelo, precisamos de umaresposta imediata que contenha apenas as in ormaes que so de nosso interesse.

Devemos evitar que sejam reenviados todos os contedos e cdigos que no so reramqualquer alterao. Por exemplo, quando um cliente digita seu CEP em um carrinho decompras, tudo que precisamos responder com o valor do rete para o CEP digitado

ou in ormar se ocorreu algum erro, ou seja, muitas vezes precisaremos atualizar apenasuma pequena parte de todo o documento que est sendo visualizado pelo usurio.

Por isso dizemos que, no modelo de aplicao que utiliza Ajax, o servidor deve re-tornar dados em vez de contedos. O gr co apresentado na Figura 1.12 ilustra o tr egode in ormaes em uma aplicao web clssica. Cada coluna representa uma pginaacessada pelo usurio.

Veja que, a cada pgina acessada, trans erida uma determinada quantidade dein ormaes, envolvendo dados, contedos e tags de ormatao. No modelo propostopelo Ajax, a idia priorizar a trans erncia dos dados e reduzir ao mximo a trans e-rncia das in ormaes relacionadas apresentao da pgina.


12/25


Figura 1.12 Trfego de informaes em uma aplicao web clssica.

Para isso, quando o usurio entrar no site, seu navegador receber uma pgina comuma grande camada de lgica (JavaScript), como mostra a Figura 1.13:

Figura 1.13 Trfego de informaes em uma aplicao web com Ajax.

Assim, ao longo da navegao do usurio pela aplicao, o que ir tra egar entre onavegador e o servidor so basicamente dados, alm de uma quantidade mnima deinstrues de apresentao. Ao comparar os dois gr cos apresentados, podemos per-ceber que o primeiro modelo trans ere muito mais in ormaes que o segundo. Essadi erena ilustrada pela Figura 1.14.

Perceba que em uma aplicao web clssica aumenta consideravelmente a quantidadede in ormaes trans eridas ao longo da navegao do usurio. J a aplicao Ajax notrans ere in ormaes desnecessrias, resultando em muito menos tr ego acumuladoao longo da navegao.


13/25


Figura 1.14 Dados transferidos ao longo do tempo.

Isso ocorre porque, em uma aplicao Ajax, o tr ego tem sua maior intensidade no

incio, com um documento complexo sendo entregue quando o usurio entra no site.As comunicaes subseqentes com o servidor so muito mais e cientes. Ou seja, medida que o tempo de interao aumentar, o custo da largura de banda ser menorna aplicao Ajax do que na sua aplicao clssica equivalente.

Portanto, para melhorar a interatividade com o usurio, undamental que o servidorretorne apenas as in ormaes relevantes aplicao no momento. Esse retorno podeser eito de diversas ormas, como, por exemplo, pela utilizao de um arquivo XML.Mais adiante veremos detalhes sobre as ormas de retorno e em quais situaes inte-

ressante o uso de cada um delas. De qualquer orma, podemos dizer que qualquer umdos ormatos escolhidos ser mais e ciente do que a mistura de in ormaes retornadaspor uma aplicao web clssica.

1.3.3 Interao exvel entre usurio e aplicao

A estrutura de uma aplicao web clssica no nos permite chegar sequer prximo do nvelde interao de uma aplicao para desktop, por exemplo. Ao utilizar JavaScript e olhas

de estilo CSS, at conseguimos reproduzir alguns e eitos de interao em um ambienteweb, mas mesmo assim a soluo ainda pode ser considerada muito rudimentar.

Devemos ter em mente que um navegador web s conhece duas maneiras de enviarentradas de dados para outro computador: hiperlinks e ormulrios HTML. Quemconhece o ambiente de programao web sabe que esses dois mtodos so chamadosde GETe POST, respectivamente.

No caso dos hiperlinks, para o erecer uma melhoria na inter ace, eles podem estarvinculados a imagens e olhas de estilo (CSS), como, por exemplo, para de nir e eitosa serem aplicados quando o mouse estiver sobre eles. Em relao aos ormulriosHTML, eles nos o erecem um subconjunto bsico de componentes de inter ace com o


14/25


usurio, como caixas de texto, listas de seleo, botes de rdio e caixas de checagem(checkboxes). Entretanto, esses componentes no so su cientes para garantir uma boainteratividade com o usurio. No existem, por exemplo, tabelas para edio (grids),caixas de combinao ou controles de seleo em rvores como existem nas aplicaes

para desktop.Outra possibilidade que os hiperlinks e ormulrios nos o erecem de apont-los

para uma uno JavaScript. Essa uma tcnica bastante comum em pginas web pararealizar validaes de ormulrios no prprio navegador do usurio, as quais, apesar deinclurem a veri cao de campos vazios, valores ora de intervalo e assim por diante,para posteriormente os dados serem submetidos ao servidor, so insu cientes, pois ocdigo JavaScript s roda no navegador, ou seja, antes da pgina ser enviada. Portanto,depois que a pgina or enviada, o usurio ter de aguardar uma validao extra no

lado servidor, a m de veri car se no houve uma tentativa de burlar a segurana daaplicao.

No caso do Ajax, a interao com o usurio tende a ser fexvel, contnua e a fuir deorma mais amigvel. No ser mais necessrio aguardar ao clicar em um hiperlink ou

submeter um ormulrio. Conceitos mais so sticados, como, por exemplo, o arrastare soltar, tornam-se praticveis, azendo com que a inter ace se assemelhe inter acede uma aplicao para desktop. Dessa orma, torna-se possvel combinar a interaodo usurio e as solicitaes ao servidor de maneira mais completa. Portanto, o modelo

proposto pelo Ajax habilita o servidor a trabalhar de orma conjunta com o usurio,proporcionando a este uma experincia muito mais agradvel.

1.3.4 Disciplina na codifcao

J vimos que uma aplicao Ajax um cdigo JavaScript complexo que se comunicacom o servidor enquanto o usurio continua trabalhando. Embora seja um modeloque descende das aplicaes web clssicas, pequena a similaridade entre essas duas

ormas de programar. Devemos ter sempre em mente essas di erenas para criar apli-caes e cientes.

Codi car utilizando Ajax bastante di erente de codi car uma aplicao clssica paraa web. Com Ajax, o cdigo ornecido no incio da aplicao deve ser executado at queela seja encerrada, sem interrupes. Para atingirmos esse objetivo, devemos escrevercdigos de alto desempenho e de cil manuteno. Normalmente esses cdigos seromuito maiores do que outros escritos em aplicaes web clssicas. Portanto, necessriamuita disciplina para desenvolver uma aplicao Ajax.

A maioria dos desenvolvedores web costuma utilizar JavaScript apenas em certasocasies, devido limitao que o modelo clssico apresenta. Esse modelo baseado


15/25


em pginas e no possibilita que os scripts permaneam ao longo do tempo. Assim, alinguagem JavaScript perdeu importncia, e muitos desenvolvedores a menosprezam.

Nas aplicaes Ajax, o JavaScript ganha muita importncia, pois o centro do pro-cesso. E como a base de cdigo dessa linguagem passa a ser maior, tornam-se necessriasboas prticas na construo desse cdigo. recomendvel que o desenvolvedor crieum cdigo organizado e que possa ser entendido acilmente por outros pro ssionais,principalmente quando houver uma equipe envolvida no projeto. Nesse caso, impor-tante que a equipe siga padres de codi cao, a m de tornar a aplicao bastantemanutenvel.

1.4 O contexto do Ajax na web

Muito se ala sobre o Ajax, mas grande parte dos usurios e desenvolvedores web aindatem diversas dvidas sobre o real bene cio que esse novo modelo de programao lhestrar.

Os questionamentos envolvem os mais variados aspectos, como, por exemplo, asmudanas na orma de programar, as limitaes de acessibilidade por parte do usurio,a comparao com outras tecnologias, a necessidade ou no de utilizar determinadosmecanismos, a integrao com algumas linguagens de programao e as situaes nasquais o uso do Ajax no recomendado. Comearemos a esclarecer essas questes.

1.4.1 O Ajax no tem dono

Primeiramente, importante destacar que o Ajax no propriedade de empresa alguma.No algo que voc possa baixar da internet. Trata-se apenas de uma abordagem, isto, uma nova maneira de se pensar a arquitetura de aplicaes web que utilizam certastecnologias.

Algumas pessoas acreditavam que o Ajax oi inventado pela Google, proprietria dosite de buscas mais utilizado no mundo. Na verdade, esse comentrio surgiu porque aGoogle oi uma das primeiras empresas a utilizar essa tcnica em suas aplicaes, como,por exemplo, no Google Maps (Figura 1.15), Gmail, Google News, Orkut, entre outras.

O surgimento do Ajax no est relacionado ao site Google. Vrias outras empresastambm j utilizam com sucesso esse novo modelo, como, por exemplo, a Amazon.com, amaior livraria virtual do mundo. Mais adiante, veremos o que necessrio tecnicamentepara que os usurios e os desenvolvedores possam usu ruir do Ajax.


16/25


Figura 1.15 Google Maps utiliza Ajax: alto nvel de interao.

1.4.2 Programao, acessibilidade e compatibilidade

Por ser uma nova abordagem de programao, alguns desenvolvedores podem pensar queas aplicaes Ajax so mais ceis de desenvolver do que as aplicaes web tradicionais.Na realidade, isso nem sempre ocorre. As aplicaes Ajax podem conter cdigos JavaScriptcomplexos no lado cliente, o que aumenta a possibilidade de erros (bugs).

Devemos ainda levar em considerao as peculiaridades dos di erentes tipos de

navegadores existentes no mercado, como Internet Explorer, Mozilla Fire ox, Opera,Sa ari, entre outros. Nossa aplicao precisa estar preparada para lidar com todos eles.Por exemplo, para comear a usar o objetoXMLHttpRequest, devemos veri car o tipo denavegador que o cliente est utilizando:

function IniciaAjax() {var req;try {

req = new ActiveXObject(Microsoft.XMLHTTP"); // Internet Explorer} catch(e) {

try {req = new ActiveXObject(Msxml2.XMLHTTP");

} catch(ex) {


17/25


try {req = new XMLHttpRequest(); // Mozilla, Safari,...

} catch(exc) {alert(Este browser no tem recursos para uso do Ajax!");req = null;

}}

}return req;

}

No se preocupe em entender esse programa agora. Esse um pequeno script uti-lizado para e etuar uma requisio com o Ajax. Apenas note que so eitas tentativasde criao do objeto para di erentes navegadores (uma para o Internet Explorer, outra

para o Mozilla e assim por diante).Detalhes como esse aumentam a complexidade de programao, e por isso torna-se

necessrio o uso de plata ormas mais adequadas e de boas erramentas de desenvolvi-mento, visando a diminuio no ndice de erros.

Outro aspecto a ser analisado a questo da acessibilidade de uma aplicao queutiliza Ajax. Os desenvolvedores se mostram preocupados ao lidar com questes quepossam limitar o uncionamento da aplicao. Por exemplo, ser que o botoVoltar do navegador deixar de uncionar? E ser que a aplicao ir uncionar para usuriosque desabilitaram o JavaScript de seus navegadores? Alm disso, que tipo de cuidadosdevemos tomar para garantir a segurana de uma aplicao Ajax?.

claro que ainda h muito trabalho a ser eito para determinar as limitaes doAjax, porm, medida que esse novo modelo or ganhando popularidade, os desenvol-vedores iro cada vez mais trabalhar em meios de lidar com eventuais di culdades deuso dessa erramenta, ou seja, assim como ocorre com qualquer novidade no mundoda programao, o crescimento da comunidade de desenvolvedores desvendar muitasdessas questes, tornando a erramenta mais e ciente ao longo do tempo.

1.4.3 Comparando Ajax com o Flash

Quando o Ajax comeou a ganhar espao na mdia, muitas pessoas questionaram:Ser que o Ajax ir acabar com o Flash?. Logicamente a resposta no. Inclusive essasduas erramentas podem ser mescladas, como ocorre no site de compartilhamento deimagens fickr (Figura 1.16).

Nesse site, os desenvolvedores utilizaram em conjunto essas duas tecnologias paraazer um photostream , isto , uma inter ace que possibilita ao usurio navegar em um

determinado conjunto de otos sem que ele precise trocar de pgina.


18/25


Figura 1.16 Site flickr mistura as tecnologias Ajax e Flash.

Na verdade, os propsitos do Ajax e do Flash so distintos, embora algumas vezeseles possam ser utilizados para executar tare as semelhantes. Nesses casos, podemosdecidir se a melhor soluo para um determinado problema o Ajax ou se o mais in-dicado o Flash, o qual, costuma ser utilizado para criao de animaes e exibio dein ormaes ao usurio de uma orma mais atraente em termos visuais. O Ajax, por suavez, tem como principal objetivo a interao assncrona com o servidor, possibilitandoa alterao de apenas um trecho da pgina web, sem recarreg-la.

1.4.4 Onde entra o PHP nessa histria?

Por ter adquirido este livro, voc j deve ter ao menos um conhecimento bsico da lin-guagem PHP, cuja primeira verso surgiu em 1995, quando Rasmus Lerdor criou parauso pessoal uma erramenta chamada PHP/FI (Personal Home Page/Forms Interpreter).

Ele no imaginava, mas estava criando uma das mais poderosas linguagens para o de-senvolvimento de aplicaes na web. O PHP (sigla que um acrnimo recursivo paraPHP: Hypertext Preprocessor) conquistou muito espao nos ltimos anos.

Voc pode estar se perguntando: Se o Ajax baseado em tecnologias como Ja-vaScript e XML, ento qual a importncia do PHP nesse processo? Com certeza aimportncia grande. Na verdade az muito mais sentido utilizar o Ajax em conjuntocom uma linguagem de programao do lado servidor do que utiliz-lo isoladamente.Essa linguagem pode ser PHP, ASP ou qualquer outra utilizada para criao de pginas

dinmicas na web. Neste livro, utilizaremos a linguagem PHP, uma das mais popularesentre os desenvolvedores.


19/25


Como o objetivo do Ajax poder realizar chamadas assncronas ao servidor webenquanto o usurio usu rui da aplicao, utilizaremos programas PHP para receberessas chamadas e realizar o processamento das mesmas, retornando as in ormaesnecessrias aplicao do cliente. Por exemplo, se uma aplicao de comrcio eletrnico

necessitar do preo de algum produto, ela ar uma chamada (por meio do Ajax) paraum programa PHP, que ser responsvel por executar uma consulta no banco de dados,obter esse preo e retorn-lo ao navegador do usurio.

Portanto, em praticamente todos nossos exemplos teremos uma linguagem de pro-gramao no lado cliente (JavaScript) e outra no lado servidor (PHP).

1.4.5 Usar XML interessante, mas no obrigatrio

O termo Ajax, introduzido por Jesse James Garrett, da Adaptive Path, vem da expressoAsynchronous JavaScript and XML. Apesar do nome, ao tomar conhecimento dessanova abordagem de programao, voc poder se questionar se realmente necessrioutilizar a tecnologia XML em uma aplicao Ajax.

A verdade que no somos obrigados a utilizar XML. Observando o diagrama dastecnologias envolvidas no Ajax, apresentado neste captulo (Figura 1.9), percebemos queo XML entra na parte de Troca de dados, ou seja, a linguagem que o servidor webutiliza para retornar os dados solicitados pela aplicao do usurio. No entanto, esse

retorno no precisa ser necessariamente em ormato XML; pode inclusive ser um fuxode texto simples, como usaremos vrias vezes no decorrer deste livro.

Ento por que o XML utilizado? Isso ocorre porque a tecnologia XML evolui apassos largos e vem se tornando um padro para troca de dados, no apenas na webmas tambm entre aplicaes desktop que rodam em di erentes plata ormas.

Essa pre erncia se deve principalmente acilidade na manipulao dos dados deum arquivo XML, pois um ormato que nos disponibiliza dados estruturados. Dessa

orma, podemos utilizar as unes DOM para acessar e manipular esses dados da orma

que acharmos conveniente. O mesmo no ocorreria se o retorno osse eito como umfuxo de texto simples, no qual no h qualquer estruturao dos dados.

Portanto, para troca de in ormaes entre a aplicao e o servidor, sempre quepossvel, procure azer uso de marcaes XML, pois elas ajudaro na manipulao dosdados e, conseqentemente, sua aplicao car mais organizada, com um cdigo- ontemais cil de ser mantido.

1.4.6 Quando no vale a pena usar Ajax importante destacar que as aplicaes Ajax nem sempre proporcionam uma experin-cia melhor ao usurio do que as aplicaes tradicionais. Na realidade, o Ajax nos ornece


20/25


um determinado poder, que consiste na fexibilidade para a criao de interao na web.Contudo, assim como ocorre em nossa vida, quanto mais poder tivermos, maior deveser nossa precauo em exerc-lo. Por isso, torna-se necessria uma dose de cautela nosentido de no desagradar a experincia do usurio, mas aprimor-la.

Sendo assim, em que situaes o uso do Ajax no recomendado? Na realidade,devemos utilizar o Ajax sempre que possvel. Como j oi dito, no devemos deixar ousurio esperando em vo devido ao recarregamento desnecessrio de in ormaes.No entanto, se voc or desenvolver uma aplicao onde para cada passo do usurioseja necessrio mostrar uma pgina totalmente di erente da anterior, talvez seja melhorcriar uma aplicao no modelo clssico da web.

importante lembrar que a utilizao de Ajax aumenta bastante o tempo de plane- jamento de um site, j que todo o processo de interao com o usurio dever ser exaus-tivamente discutido antes de o desenvolvedor comear a implementao. Isso signi caque o uso dessa nova abordagem pode aumentar bastante os custos do projeto.

1.5 Ajax e a Web 2.0Se voc costuma ler com certa reqncia publicaes da rea de tecnologia, provavel-mente j deve ter lido a respeito da Web 2.0. Con orme oi comentado no incio destelivro, a idia da Web 2.0 azer com que o usurio utilize a web para acessar aplicaes,e no simples pginas estticas com pouca interatividade. Surge ento a pergunta: Qual o papel do Ajax nesse processo?.

O Ajax surgiu como um protagonista da Web 2.0, pois ele modi ca o modo como osnavegadores interagem com as in ormaes disponveis na internet. Portanto, podemosdizer que o Ajax um dos primeiros passos dessa nova gerao da internet.

Vamos imaginar a seguinte situao: voc baixa um arquivo CDR (CorelDraw) dainternet e tenta abri-lo em seu computador. Se voc no tiver o programa necessrio para

abri-lo, no caso o CorelDraw, o Windows exibir uma janela para escolha do programaa ser usado, semelhante janela mostrada na Figura 1.17.

Nessa situao, o usurio estar impossibilitado de abrir o arquivo, pois ele nopossui o aplicativo instalado em sua mquina. Ento, ele deve obter o CD de instalaodo programa e instal-lo em seu computador, para ento nalmente poder usu ruirdo arquivo.

Na nova gerao da internet a situao muda. No ser necessrio passar por todoesse processo, pois a Web 2.0 tem como caracterstica executar os so twares diretamentepela internet. Ningum precisar ter o programa instalado em seu computador. Bastaestar on-line. Veja na Tabela 1.1 os dois lados da Web 2.0.


21/25


Figura 1.17 Lista exibida pelo sistema ao no encontrar o aplicativo.

Tabela 1.1 Benefcios e desvantagens da Web 2.0

Benefcios Desvantagens

O uso de softwares on-line elimina no s os custos delicena para instalao nas mquinas, mas tambm otempo perdido nesse processo de instalao. O usuriopoder pagar apenas de acordo com seu tempo deutilizao.

As atualizaes dos softwares so facilitadas, poisocorrem on-line.

Os dados podem ser salvos no servidor e acessadosde qualquer computador com conexo internet. Almdisso, eles cam protegidos em relao a falhas no HDdo usurio.

Utilizar softwares on-line requer uma conexo de altavelocidade. As conexes de banda larga vm crescendorapidamente no mundo todo, mas grande parte dosusurios de internet ainda utiliza conexes discadas.

Se a conexo cair, o usurio ter seu trabalhointerrompido e possivelmente perder dados nosalvos.

Como os dados so armazenados no servidor, surgea questo da privacidade. Por exemplo, a empresaresponsvel pelo servidor ter acesso a informaes

que podem ser con denciais para o usurio. Alm disso,existe o risco de invaso do servidor e roubo de dados.

notrio que o modelo clssico (baseado em pginas) no nos permite reproduzircom e cincia os aplicativos do desktop na web. Por exemplo, di cil imaginar umso tware com todos os recursos do CorelDraw rodando no prprio navegador dousurio.

Surgem ento os questionamentos: Ser que demorar para a web atingir essenvel e reproduzir elmente as aplicaes desktop? E ser que no car pesado parao navegador carregar essas aplicaes?. So perguntas di ceis de serem respondidas,mas sabemos que o Ajax j est acelerando esse processo. Quanto ao carregamento daaplicao, a idia carregar no navegador apenas os recursos necessrios para as aes


22/25


que o usurio est executando. Os demais recursos seriam carregados posteriormentepor meio das chamadas assncronas do Ajax ao servidor.

Conhecendo o conceito de Web 2.0, ca clara a importncia do Ajax nesse processo,pois ele diminui muito a distncia entre as aplicaes para desktop e as aplicaespara a web., para a qual muitos aplicativos que oram consagrados no desktop j estomigrando com muito sucesso. J surgiram inclusive boatos de que algumas empresasestariam desenvolvendo um conjunto de aplicativos on-line (editores de texto, planilhaseletrnicas etc.) para concorrer com o O ce da Microso t.

Na realidade, desde que o Google lanou uma aplicao chamada Gmail, a comuni-dade web percebeu que era possvel azer o navegador se comportar como uma aplicaode verdade. O GMail chegou e conquistou seu espao, mesmo em um mercado saturadocomo o de e-mails na web (webmail). A partir da, o usurio comeou a se ver livre nos do sistema operacional, mas tambm do conceito de meu computador.

Previses parte, muito di cil dizer se realmente o Ajax dominar a Internet douturo ou se surgir um modelo inovador para substitu-lo, porm a idia da Web 2.0

comea a tomar orma a partir do Ajax, e os desenvolvedores devem estar preparadospara criar aplicaes condizentes com a nova gerao da web.

1.6 Requisitos e instalaes de so twaresA grande vantagem das aplicaes Ajax que elas rodam no prprio navegador web.Isso signi ca que, para usu ruir dessas aplicaes, basta que o usurio possua umaverso mais recente (aps 2001) de um dos principais navegadores utilizados no mer-cado, como por exemplo:

Mozilla Fire ox: http://www.mozilla.com/ refox/

Internet Explorer 5+: http://www.microsoft.com/ie/

Opera: http://www.opera.com/

Konqueror: http://www.konqueror.org/

Sa ari: http://www.apple.com/safari/

Para testarmos os exemplos apresentados neste livro, sero utilizados os seguintesso twares:

No lado cliente: Internet Explorer (navegador).

No lado servidor: PHP (linguagem de programao), Apache (servidor web), MySQL(banco de dados).


23/25


Se voc no tiver disposio um servidor contendo os so twares necessrios, podeinstalar o pacote PHP + Apache + MySQL em sua mquina, azendo-a executar o papelde servidor e possibilitando a voc testar os exemplos do livro.

No Windows, uma boa opo para instalar esses trs so twares obter o pacoteEasyPHP, disponvel para download emhttp://www.easyphp.org/. Com esse pacote, podem serinstalados o PHP, o Apache e o MySQL, a partir de um nico arquivo de instalao.

No entanto, se voc or um usurio um pouco mais experiente, recomendvelinstalar individualmente cada um desses so twares, visto que nem sempre o EasyPHPcontm as verses mais atuais de cada um deles. Em nosso caso, aremos manualmentea instalao das seguintes verses:

PHP 5, disponvel emhttp://www.php.net.

Apache 2.0, disponvel emhttp://httpd.apache.or g.

MySQL 5, disponvel emhttp://www.mysql.com.

Se voc resolver tambm azer a instalao e a con gurao manual dos so twares,o procedimento para o Windows o seguinte:

1. Instalao do PHP na seo de downloads do site do PHP, aa o download da versopara Windows do PHP 5. Voc pode baixar o pacote completo, disponvel em or-

mato ZIP. Em seguida, descompacte o arquivo no seu computador (normalmentecria-se a pasta c:\PHP para isso). Renomeie o arquivophp.ini-dist para php.ini ,a m de que o PHP possa localizar seu arquivo de con gurao. Por m, copieo arquivophp5ts.dll para a pasta de sistema do seu Windows (no Windows XP,a pasta C:\WINDOWS\system32), pois o PHP precisar encontrar esse arquivo. Faao mesmo para o arquivolibmysql.dll , que ser usado posteriormente no acessoao MySQL.

2. Instalao do Apache no site do Apache, na seo de downloads, h pastas com

vrias verses do so tware. No caso do Windows, uma boa alternativa acessaruma pasta chamadawin32, localizada dentro da pastabinaries . Nela, voc encon-trar algumas distribuies binrias do produto, ou seja, voc poder baixar umarquivo (normalmente com extenso .msi) e execut-lo para que o Apache sejaautomaticamente instalado em sua mquina, como mostrado na Figura 1.18.

Se durante o processo de instalao or solicitado o nome do servidor (servername), voc pode digitar localhost. Se ocorrer algum erro ao iniciar o Apache,ser exibida uma mensagem indicando onde est o problema no arquivo de con-

guraohttpd.conf , localizado no diretrioconf do Apache. Algumas vezes, esseerro pode ocorrer em virtude da alta de alguma in ormao, como, por exemplo,o e-mail do administrador. Se ocorrer, basta ornecer as in ormaes solicitadas


24/25


para que o Apache seja iniciado corretamente. Para veri car se o Apache estrodando, abra seu navegador e digite na barra de endereos:

http://localhost/

Deve aparecer uma pgina indicando que o Apache est em execuo (Figura 1.19).

Figura 1.18 Download do arquivo de instalao do Apache.

Figura 1.19 Testando o funcionamento do Apache.


25/25


Para que suas aplicaes possam ser acessadas pelo navegador, elas devem sercolocadas na pasta raiz do servidor (DocumentRoot), por padro chamada dehtdocs .Por exemplo:

C:\Arquivos de programas\Apache Group\Apache2\htdocs

A pasta raiz pode ser modi cada por meio da alterao do valor da diretivaDocumentRoot do arquivo de con guraohttpd.conf .

3. Instalao do MySQL aa o download do MySQL 5 no site o cial do produto. Assimcomo no Apache, voc tambm poder obter um arquivo binrio para Windows,com extensomsi . Basta azer o download desse arquivo e execut-lo para que oMySQL seja instalado.

4. Confgurao do PHP no Apache agora que voc j tem os trs so twares necessriospara montar seu servidor, alta apenas con gur-los a m de que uncionem emconjunto. Para habilitar o PHP como um mdulo do Apache, voc precisar acres-centar algumas linhas no arquivohttpd.conf . Essas linhas podem ser encontradasno arquivoinstall.txt que acompanha a distribuio do PHP. Por exemplo, parainstalar o PHP como mdulo do Apache 2.0, devem ser acrescentadas as seguinteslinhas:

LoadModule php5_module C:/PHP/php5apache2.dll"AddType application/x-httpd-php .phpPHPIniDir C:/PHP"

A primeira linha carrega o mdulo do PHP, a segunda az com que o Apachereconhea os scripts com extenso.php , e a terceira indica a localizao do ar-quivo de con guraophp.ini . Consulte o arquivoinstall.txt para orientaesquanto a outras verses. Aps incluir as linhas, reinicie o Apache para que elastenham e eito.

5. Confgurao do MySQL no PHP para nalizar, precisamos habilitar a extenso do MySQL

no arquivo de con gurao do PHP, ophp.ini . Neste livro, utilizaremos a extensomysqli , visto que nossa verso do MySQL superior a 4.1, e, portanto, a antiga extensodo MySQL no uncionar. A linha que habilita essa extenso :

extension=php_mysqli.dll

Se essa linha estiver comentada, retire o comentrio. Caso ela no exista, deve serinserida. Se sua verso do MySQL or anterior a 4.1, habilite o arquivophp_mysql.dll em vez dophp_mysqli.dll . Veri que ainda se a diretivaextension_dir est apon-tando para o diretrio correto das extenses do PHP (normalmente chamado deext). Por exemplo:

extension dir = C:/PHP/ext/"

Web interativa com Ajax e PHP - Juliano Niederauer - Capítulo 1

Documents

Transcript of Web interativa com Ajax e PHP - Juliano Niederauer - Capítulo 1