Web Interativa Com Ajax e PHP

Web Interativa com
Ajax e PHP
Juliano Niederauer
Novatec
1
CAPTULO
O que Ajax?
A palavra Ajax vem da expresso Asynchronous JavaScript and XML. o uso sistemtico de JavaScript e XML (entre outras tecnologias) para tornar o navegador mais interativo com o usurio, utilizando-se solicitaes assncronas de informaes. Isso quer dizer que podemos utilizar o Ajax para fazer uma solicitao ao servidor web sem que seja necessrio recarregar a pgina que estamos acessando. Veremos a seguir as principais diferenas entre as pginas que utilizam esse recurso e as pginas que fazem uso do modelo tradicional de comunicao com o servidor.
1.1 Modelo clica e espera versus modelo interativo

Desde o surgimento da internet, o modelo de interao entre usurio e servidor via HTTP baseado em um sistema simples de hipertexto. Ou seja, voc clica em um link para requisitar um documento e ento espera... o servidor responde, processando sua requisio e devolvendo-lhe o documento. Depois de usufruir desse documento, voc clica em mais um link e espera... e assim por diante (veja a Figura 1.1).
NAVEGADOR CLIENTE Solicitao HTTP
SERVIDOR Servidor web
Interface do usurio Dados HTML
Banco de dados e processos do servidor
Figura 1.1 Modelo clssico de aplicao web.
17
18
Web Interativa com Ajax e PHP
Esse sistema ainda est em uso, porm os designers e desenvolvedores sempre questionaram se esse inconveniente chama-responde teria fim. Por diversos fatores, geralmente eles 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 navegador do usurio, falta de plug-ins instalados na mquina-cliente e baixa qualidade das conexes utilizadas pelos usurios. Diante dessas restries, os desenvolvedores trabalharam no sentido de melhorar o modelo de interao da web, mesmo dentro do sistema chama-responde. Assim, foram criando novas tcnicas para tornar as aplicaes mais interessantes e fazer com que elas se tornassem to teis quanto suas aplicaes equivalentes para desktop. Podemos dizer que uma dessas tcnicas, denominada Ajax, apesar de existir h bastante tempo, s ganhou notoriedade quando aquelas antigas restries comearam a ser superadas. Assim como ocorreu na poca em que os navegadores passaram a suportar tecnologias como CSS e XHTML, a possibilidade de utilizar o Ajax nos principais navegadores foi comemorada pelos desenvolvedores, de modo que o principal beneficiado com a adoo dessa ferramenta ser o usurio final, pois a flexibilidade do Ajax ir conferir uma grande agilidade atualizao das informaes na web. O modelo de uma aplicao que utiliza Ajax est representado na Figura 1.2.
NAVEGADOR CLIENTE
Interface do usurio Chamada Javascript Dados HTML

Solicitao HTTP
SERVIDOR Servidor Web / XML
Ferramenta Ajax
Dados XML
Banco de dados e processos do servidor
Figura 1.2 Modelo de aplicao com Ajax.
Veja que, nesse modelo, a interao entre o navegador e o servidor web no ocorre de forma totalmente direta, mas por meio da ferramenta Ajax. E como o Ajax ativado por uma chamada JavaScript, o usurio pode permanecer visualizando a pgina normalmente enquanto ocorre a comunicao com o servidor web. O servidor processa a solicitao do Ajax (por exemplo, realizando alguma pesquisa ou simplesmente atualizando alguma informao no banco de dados) e envia uma resposta. Caso o servidor retorne dados, o Ajax poder utilizar esses dados para fazer a atualizao de apenas uma parte da pgina que o usurio est visualizando, sem
Captulo 1 O que Ajax?
19
que seja necessrio recarreg-la totalmente. Caso contrrio, o usurio tambm poder continuar usufruindo normalmente da pgina, mas ela no sofrer qualquer alterao visual. Ou seja, como se a pgina pudesse ouvir e falar simultaneamente. Portanto, notvel que essa forma de interao entre cliente e servidor possibilitar no apenas a agilidade na atualizao de informaes na web, mas evitar tambm a retransmisso desnecessria de informaes estticas (cdigos, textos, imagens etc.), melhorando o trfego da rede e a usabilidade das pginas, que ficaro muito mais parecidas com aplicaes do que com simples pginas da internet. Conforme foi comentado no incio do livro, o Ajax j existe h bastante tempo, mas sua difuso dependia do momento da web e das nossas habilidades em lidar com as tecnologias envolvidas nesse processo. Finalmente percebemos que a web est passando por esse processo de mudana e j estamos muito mais aptos a trabalhar com as tecnologias disponveis nessa rea. Veremos a seguir, como exemplo, algumas situaes onde seria interessante o uso do Ajax.
1.2 Exemplos de uso prtico

Existem diversos tipos de situaes nas quais o uso do Ajax seria extremamente til, dentre as quais podemos citar a validao de formulrios, atualizao de enquetes e de carrinhos de compras (e-commerce), conversao on-line (chats), entre outras que priorizam a atualizao de informaes em tempo real. Outro exemplo bastante comum so os sites de relacionamento, os quais vm utilizando essa tcnica para facilitar a classificao de seus usurios. Um dos sites mais conhecidos, a rede social Orkut, pertencente ao Google, utiliza bastante esse recurso. Os desenvolvedores do Orkut criaram uma legenda que permite a cada usurio classificar seus amigos, conforme mostrado na Figura 1.3:
Figura 1.3 Legenda utilizada.
20
Assim, cada amigo relacionado a esse usurio poder ser classificado por ele de acordo 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 superconfivel pode preencher as trs , carinhas clicando sobre a terceira delas. Se voc f de um amigo, pode clicar sobre a , estrela e marc-la. A pergunta nesse caso a seguinte: Como fazer para atualizar o banco de 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 aplicao web, ao clicar sobre um desses smbolos seria enviada uma solicitao ao servidor web e 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, permitindo que o usurio continue navegando e visualizando a pgina como se nada tivesse acontecido. Mais adiante veremos como implementar um sistema semelhante a esse. Outra aplicao do Ajax no comrcio eletrnico, mais especificamente na parte que envolve o carrinho de compras, ou seja, os produtos que o cliente j selecionou para comprar. Normalmente o frete a ser pago calculado de acordo com o CEP do cliente (Figura 1.5).
Figura 1.5 Calculando o frete do produto.
21
Portanto, o cliente dever digitar seu CEP, clicar no boto Ok e aguardar at que a pgina seja recarregada com o valor do frete calculado pelo sistema. Se fosse utilizado o Ajax, no momento em que o cliente clicasse no boto Ok, haveria uma comunicao via JavaScript com o servidor para obter o valor do frete, 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, estaramos evitando o recarregamento desnecessrio de muito contedo, principalmente se for um grande portal.
Figura 1.6 Respondendo uma enquete.
Outro exemplo seria a validao de formulrios de cadastro em tempo real. claro que se pode fazer uma validao do lado cliente por meio de uma funo JavaScript, porm existem informaes que precisam ser validadas no lado servidor, como, por exemplo, o nome de usurio (username). A Figura 1.7 mostra um formulrio de cadastro cuja validao feita do modo tradicional, ou seja, o servidor web retorna uma pgina de resposta informando que o username escolhido j existe somente aps o usurio submeter o formulrio inteiro validao. Se utilizssemos Ajax, poderamos incluir um boto Testar ao lado do campo do username. Assim, ao digitar um nome de usurio, um clique no boto Testar ativaria a ferramenta Ajax, que verificaria em tempo real no servidor se o username digitado vlido. Um script de bate-papo (chat) poderia ser mais facilmente 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.
22
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-line editvel e um sistema de sugestes para ferramentas de busca.
23
Portanto, Ajax no somente um novo modelo, mas tambm uma iniciativa na construo de aplicaes web mais dinmicas e criativas. O Ajax permite que vrias tecnologias trabalhem juntas, cada uma fazendo sua parte, conferindo ao desenvolvedor meios poderosos para a criao de websites.
1.3 Caractersticas do Ajax

Pelos exemplos apresentados at o momento, voc j pde perceber que o principal objetivo do Ajax melhorar a interatividade entre o usurio e o servidor. Isso significa que as pginas devem ser programadas de forma a evitar que os usurios esperem em vo. No h porque interromper a interao com o usurio a cada vez que a aplicao necessitar 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 as tecnologias envolvidas nesse processo, assim como a utilidade de cada uma delas:
Apresentao Interao dinmica
XHTML e CSS
DOM
Javascript
Troca de dados
XML
Chamadas assncronas
XMLHttpRequest
Figura 1.9 Tecnologias utilizadas pelo Ajax.
Perceba que todo o processo gira em torno da linguagem JavaScript, pois toda a comunicao entre o usurio e o servidor ocorrer por meio dessa linguagem, a partir da qual o Ajax ser ativado. Talvez a maior novidade apresentada na figura seja o XMLHttpRequest, que justamente a tecnologia que viabiliza o processo inteiro. Trata-se de um objeto JavaScript que torna possvel a comunicao assncrona com o servidor, sem a necessidade de recarregar a pgina por completo. Algumas pessoas acham que XMLHttpRequest, objeto integrante da especificao do modelo 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 em agregar diversas tecnologias para conferir interatividade aplicao web.
24
O modelo DOM consiste em um conjunto de rotinas que permite o acesso e modificao 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 conferir dinamismo, aperfeioando a manipulao das informaes em questo. Essas informaes, por sua vez, podero ser retornadas pelo servidor no conhecido formato XML (eXtensible Markup Language), um dos mais utilizados para troca de dados. Por fim, a apresentao desse contedo ser feita pelas populares linguagens de marcao HTML ou XHTML (eXtensible Hypertext Markup Language) e pelas folhas de estilo CSS (Cascading Style Sheets). No Captulo 2, ser feita uma reviso dos principais conceitos relativos a cada uma dessas tecnologias, para posteriormente criarmos nossa primeira aplicao com o uso do Ajax. Agora, para complementar a explicao sobre o modelo proposto pelo Ajax, acompanhe a seguir os princpios dessa ferramenta que resumem tudo o que foi explicado at o momento.
1.3.1 O navegador hospeda uma aplicao, no contedo

Analisando o funcionamento 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 informaes so armazenadas em uma sesso do usurio, localizada no servidor web. Quando o usurio entra no site ou inicia uma sesso, vrios objetos so criados no lado servidor. Por exemplo, um site de comrcio eletrnico, o carrinho de compras armazenado nessa sesso. Posteriormente, o servidor web envia ao navegador do usurio a pgina inicial, que inclui no s cdigos HTML, mas tambm dados do usurio, contedos do site e instrues de formatao. Toda vez que o usurio interage com o site, o navegador envia uma requisio ao servidor, que retorna um outro documento, contendo a mesma mistura de cabealhos e dados. Assim, por ser um terminal bobo o que o navegador faz simplesmente , retirar o documento anterior e exibir o novo, mesmo que os dois documentos sejam muito semelhantes. Quando o usurio efetua a sada ou fecha o navegador, a aplicao finalizada e a sesso destruda. Esse processo ilustrado pela Figura 1.10. A figura mostra o navegador fazendo quatro requisies em seqncia para o servidor web, de modo que, em cada uma delas, o servidor retorna uma pgina inteira para ser exibida ao usurio. Isso ocorre porque toda a lgica da aplicao est no lado do servidor.

NAVEGADOR
ENTRADA
25
SERVIDOR
Pgina inicial Pgina web Pgina web Pgina de sada
Sesso do usurio
Dados do usurio
SADA
Banco de dados
Figura 1.10 Fluxo clssico da web.
No caso de uma aplicao Ajax, parte da lgica da aplicao movida para o navegador (por meio da linguagem JavaScript). Nesse novo cenrio, quando o usurio entra no site ou inicia uma sesso, o servidor envia ao navegador um documento mais complexo, formado em grande parte por cdigo JavaScript. A idia que esse documento se torne a aplicao do cliente, permanecendo com ele por toda a sesso, mesmo que seja necessrio alterar consideravelmente sua aparncia em determinados momentos. Essa aplicao ter a capacidade de tratar as informaes fornecidas pelo usurio, decidindo se elas devem ser manipuladas no lado cliente ou no lado servidor, ou ainda se far uma combinao dessas duas alternativas. Por exemplo, se houver necessidade de acessar um banco de dados, a aplicao envia uma requisio ao servidor, caso contrrio ela mesma realiza o tratamento das informaes. Isso significa que nesse novo modelo o navegador pode armazenar dados sobre o estado da aplicao, visto que o mesmo documento persiste sobre toda a sesso do usurio. No caso de um web site de comrcio eletrnico, por exemplo, o contedo de um carrinho de compras poderia ser armazenado no prprio navegador em vez de ser armazenado na sesso do servidor. A Figura 1.11 ilustra como ocorre o fluxo de informaes na web por meio do uso do Ajax. Perceba que, quando o cliente entra no site, o servidor retorna um documento mais complexo, que ser a aplicao do cliente. Ao contrrio do modelo clssico, a aplicao do cliente formada por apenas uma pgina, que envia freqentes requisies ao servidor. Essas requisies, que so feitas de forma assncrona pelo objeto XMLHttpRequest, podem ser utilizadas para executar diversas operaes, como, por exemplo, consultas e atualizaes nos bancos de dados localizados no servidor.
26
NAVEGADOR
ENTRADA

SERVIDOR
Pgina (aplicao) do cliente
Retorna a aplicao Requisies freqentes
Sesso do usurio
Alguns dados do usurio
Dados do usurio
SADA Pgina de sada

Banco de dados
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 informaes relativas s aes que o usurio executou. Assim, o desenvolvedor pode decidir se acha mais conveniente armazenar uma informao no lado cliente ou na sesso do usurio localizada no servidor.
1.3.2 O servidor fornece dados, no contedo

Como pudemos observar no modelo clssico, a cada requisio que o navegador faz, o servidor retorna uma pgina inteira, ou seja, uma mistura de dados do usurio, contedos do site e instrues de formatao. Entretanto, no novo modelo, precisamos de uma resposta imediata que contenha apenas as informaes que so de nosso interesse. Devemos evitar que sejam reenviados todos os contedos e cdigos que no sofreram qualquer alterao. Por exemplo, quando um cliente digita seu CEP em um carrinho de compras, tudo que precisamos responder com o valor do frete para o CEP digitado ou informar se ocorreu algum erro, ou seja, muitas vezes precisaremos atualizar apenas uma 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 retornar dados em vez de contedos. O grfico apresentado na Figura 1.12 ilustra o trfego de informaes em uma aplicao web clssica. Cada coluna representa uma pgina acessada pelo usurio. Veja que, a cada pgina acessada, transferida uma determinada quantidade de informaes, envolvendo dados, contedos e tags de formatao. No modelo proposto pelo Ajax, a idia priorizar a transferncia dos dados e reduzir ao mximo a transferncia das informaes relacionadas apresentao da pgina.
27
Figura 1.12 Trfego de informaes em uma aplicao web clssica.
Para isso, quando o usurio entrar no site, seu navegador receber uma pgina com uma 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 trafegar entre o navegador e o servidor so basicamente dados, alm de uma quantidade mnima de instrues de apresentao. Ao comparar os dois grficos apresentados, podemos perceber que o primeiro modelo transfere muito mais informaes que o segundo. Essa diferena ilustrada pela Figura 1.14. Perceba que em uma aplicao web clssica aumenta consideravelmente a quantidade de informaes transferidas ao longo da navegao do usurio. J a aplicao Ajax no transfere informaes desnecessrias, resultando em muito menos trfego acumulado ao longo da navegao.
28
Figura 1.14 Dados transferidos ao longo do tempo.
Isso ocorre porque, em uma aplicao Ajax, o trfego 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 eficientes. Ou seja, medida que o tempo de interao aumentar, o custo da largura de banda ser menor na aplicao Ajax do que na sua aplicao clssica equivalente. Portanto, para melhorar a interatividade com o usurio, fundamental que o servidor retorne apenas as informaes relevantes aplicao no momento. Esse retorno pode ser feito de diversas formas, como, por exemplo, pela utilizao de um arquivo XML. Mais adiante veremos detalhes sobre as formas de retorno e em quais situaes interessante o uso de cada um delas. De qualquer forma, podemos dizer que qualquer um dos formatos escolhidos ser mais eficiente do que a mistura de informaes retornadas por uma aplicao web clssica.
1.3.3 Interao flexvel entre usurio e aplicao

A estrutura de uma aplicao web clssica no nos permite chegar sequer prximo do nvel de interao de uma aplicao para desktop, por exemplo. Ao utilizar JavaScript e folhas de estilo CSS, at conseguimos reproduzir alguns efeitos de interao em um ambiente web, mas mesmo assim a soluo ainda pode ser considerada muito rudimentar. Devemos ter em mente que um navegador web s conhece duas maneiras de enviar entradas de dados para outro computador: hiperlinks e formulrios HTML. Quem conhece o ambiente de programao web sabe que esses dois mtodos so chamados de GET e POST, respectivamente. No caso dos hiperlinks, para oferecer uma melhoria na interface, eles podem estar vinculados a imagens e folhas de estilo (CSS), como, por exemplo, para definir efeitos a serem aplicados quando o mouse estiver sobre eles. Em relao aos formulrios HTML, eles nos oferecem um subconjunto bsico de componentes de interface com o
29
usurio, como caixas de texto, listas de seleo, botes de rdio e caixas de checagem (checkboxes). Entretanto, esses componentes no so suficientes para garantir uma boa interatividade 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 formulrios nos oferecem de apont-los para uma funo JavaScript. Essa uma tcnica bastante comum em pginas web para realizar validaes de formulrios no prprio navegador do usurio, as quais, apesar de inclurem a verificao de campos vazios, valores fora de intervalo e assim por diante, para posteriormente os dados serem submetidos ao servidor, so insuficientes, pois o cdigo JavaScript s roda no navegador, ou seja, antes da pgina ser enviada. Portanto, depois que a pgina for enviada, o usurio ter de aguardar uma validao extra no lado servidor, a fim de verificar se no houve uma tentativa de burlar a segurana da aplicao. No caso do Ajax, a interao com o usurio tende a ser flexvel, contnua e a fluir de forma mais amigvel. No ser mais necessrio aguardar ao clicar em um hiperlink ou submeter um formulrio. Conceitos mais sofisticados, como, por exemplo, o arrastar e soltar tornam-se praticveis, fazendo com que a interface se assemelhe interface , de uma aplicao para desktop. Dessa forma, torna-se possvel combinar a interao do usurio e as solicitaes ao servidor de maneira mais completa. Portanto, o modelo proposto pelo Ajax habilita o servidor a trabalhar de forma conjunta com o usurio, proporcionando a este uma experincia muito mais agradvel.
1.3.4 Disciplina na codificao

J vimos que uma aplicao Ajax um cdigo JavaScript complexo que se comunica com o servidor enquanto o usurio continua trabalhando. Embora seja um modelo que descende das aplicaes web clssicas, pequena a similaridade entre essas duas formas de programar. Devemos ter sempre em mente essas diferenas para criar aplicaes eficientes. Codificar utilizando Ajax bastante diferente de codificar uma aplicao clssica para a web. Com Ajax, o cdigo fornecido no incio da aplicao deve ser executado at que ela seja encerrada, sem interrupes. Para atingirmos esse objetivo, devemos escrever cdigos de alto desempenho e de fcil manuteno. Normalmente esses cdigos sero muito maiores do que outros escritos em aplicaes web clssicas. Portanto, necessria muita disciplina para desenvolver uma aplicao Ajax. A maioria dos desenvolvedores web costuma utilizar JavaScript apenas em certas ocasies, devido limitao que o modelo clssico apresenta. Esse modelo baseado
30
em pginas e no possibilita que os scripts permaneam ao longo do tempo. Assim, a linguagem JavaScript perdeu importncia, e muitos desenvolvedores a menosprezam. Nas aplicaes Ajax, o JavaScript ganha muita importncia, pois o centro do processo. E como a base de cdigo dessa linguagem passa a ser maior, tornam-se necessrias boas prticas na construo desse cdigo. recomendvel que o desenvolvedor crie um cdigo organizado e que possa ser entendido facilmente por outros profissionais, principalmente quando houver uma equipe envolvida no projeto. Nesse caso, importante que a equipe siga padres de codificao, a fim de tornar a aplicao bastante manutenvel.
1.4 O contexto do Ajax na web

Muito se fala sobre o Ajax, mas grande parte dos usurios e desenvolvedores web ainda tem diversas dvidas sobre o real benefcio que esse novo modelo de programao lhes trar. Os questionamentos envolvem os mais variados aspectos, como, por exemplo, as mudanas na forma de programar, as limitaes de acessibilidade por parte do usurio, a comparao com outras tecnologias, a necessidade ou no de utilizar determinados mecanismos, a integrao com algumas linguagens de programao e as situaes nas quais 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 certas tecnologias. Algumas pessoas acreditavam que o Ajax foi inventado pela Google, proprietria do site de buscas mais utilizado no mundo. Na verdade, esse comentrio surgiu porque a Google foi 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 empresas tambm j utilizam com sucesso esse novo modelo, como, por exemplo, a Amazon.com, a maior livraria virtual do mundo. Mais adiante, veremos o que necessrio tecnicamente para que os usurios e os desenvolvedores possam usufruir do Ajax.
31
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 que as aplicaes Ajax so mais fceis de desenvolver do que as aplicaes web tradicionais. Na realidade, isso nem sempre ocorre. As aplicaes Ajax podem conter cdigos JavaScript complexos no lado cliente, o que aumenta a possibilidade de erros (bugs). Devemos ainda levar em considerao as peculiaridades dos diferentes tipos de navegadores existentes no mercado, como Internet Explorer, Mozilla Firefox, Opera, Safari, entre outros. Nossa aplicao precisa estar preparada para lidar com todos eles. Por exemplo, para comear a usar o objeto XMLHttpRequest, devemos verificar o tipo de navegador que o cliente est utilizando:
function IniciaAjax() { var req; try {
} catch(e) { try {
req = new ActiveXObject(Microsoft.XMLHTTP");
// Internet Explorer
} catch(ex) {
req = new ActiveXObject(Msxml2.XMLHTTP");
32
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 utilizado para efetuar uma requisio com o Ajax. Apenas note que so feitas tentativas de criao do objeto para diferentes 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 plataformas mais adequadas e de boas ferramentas de desenvolvimento, visando a diminuio no ndice de erros. Outro aspecto a ser analisado a questo da acessibilidade de uma aplicao que utiliza Ajax. Os desenvolvedores se mostram preocupados ao lidar com questes que possam limitar o funcionamento da aplicao. Por exemplo, ser que o boto Voltar do navegador deixar de funcionar? E ser que a aplicao ir funcionar para usurios que desabilitaram o JavaScript de seus navegadores? Alm disso, que tipo de cuidados devemos tomar para garantir a segurana de uma aplicao Ajax? . claro que ainda h muito trabalho a ser feito para determinar as limitaes do Ajax, porm, medida que esse novo modelo for ganhando popularidade, os desenvolvedores iro cada vez mais trabalhar em meios de lidar com eventuais dificuldades de uso dessa ferramenta, ou seja, assim como ocorre com qualquer novidade no mundo da programao, o crescimento da comunidade de desenvolvedores desvendar muitas dessas questes, tornando a ferramenta mais eficiente 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 essas . duas ferramentas podem ser mescladas, como ocorre no site de compartilhamento de imagens flickr (Figura 1.16). Nesse site, os desenvolvedores utilizaram em conjunto essas duas tecnologias para fazer um photostream, isto , uma interface que possibilita ao usurio navegar em um determinado conjunto de fotos sem que ele precise trocar de pgina.
33
Figura 1.16 Site flickr mistura as tecnologias Ajax e Flash.
Na verdade, os propsitos do Ajax e do Flash so distintos, embora algumas vezes eles possam ser utilizados para executar tarefas semelhantes. Nesses casos, podemos decidir se a melhor soluo para um determinado problema o Ajax ou se o mais indicado o Flash, o qual, costuma ser utilizado para criao de animaes e exibio de informaes ao usurio de uma forma mais atraente em termos visuais. O Ajax, por sua vez, tem como principal objetivo a interao assncrona com o servidor, possibilitando a 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 linguagem PHP, cuja primeira verso surgiu em 1995, quando Rasmus Lerdorf criou para uso pessoal uma ferramenta chamada PHP/FI (Personal Home Page/Forms Interpreter). Ele no imaginava, mas estava criando uma das mais poderosas linguagens para o desenvolvimento de aplicaes na web. O PHP (sigla que um acrnimo recursivo para PHP: Hypertext Preprocessor) conquistou muito espao nos ltimos anos. Voc pode estar se perguntando: Se o Ajax baseado em tecnologias como JavaScript e XML, ento qual a importncia do PHP nesse processo? Com certeza a importncia grande. Na verdade faz muito mais sentido utilizar o Ajax em conjunto com 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 populares entre os desenvolvedores.
34
Como o objetivo do Ajax poder realizar chamadas assncronas ao servidor web enquanto o usurio usufrui da aplicao, utilizaremos programas PHP para receber essas chamadas e realizar o processamento das mesmas, retornando as informaes necessrias aplicao do cliente. Por exemplo, se uma aplicao de comrcio eletrnico necessitar do preo de algum produto, ela far uma chamada (por meio do Ajax) para um 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 programao 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 expresso , Asynchronous JavaScript and XML. Apesar do nome, ao tomar conhecimento dessa nova abordagem de programao, voc poder se questionar se realmente necessrio utilizar a tecnologia XML em uma aplicao Ajax. A verdade que no somos obrigados a utilizar XML. Observando o diagrama das tecnologias envolvidas no Ajax, apresentado neste captulo (Figura 1.9), percebemos que o XML entra na parte de Troca de dados ou seja, a linguagem que o servidor web , utiliza para retornar os dados solicitados pela aplicao do usurio. No entanto, esse retorno no precisa ser necessariamente em formato XML; pode inclusive ser um fluxo de texto simples, como usaremos vrias vezes no decorrer deste livro. Ento por que o XML utilizado? Isso ocorre porque a tecnologia XML evolui a passos largos e vem se tornando um padro para troca de dados, no apenas na web mas tambm entre aplicaes desktop que rodam em diferentes plataformas. Essa preferncia se deve principalmente facilidade na manipulao dos dados de um arquivo XML, pois um formato que nos disponibiliza dados estruturados. Dessa forma, podemos utilizar as funes DOM para acessar e manipular esses dados da forma que acharmos conveniente. O mesmo no ocorreria se o retorno fosse feito como um fluxo de texto simples, no qual no h qualquer estruturao dos dados. Portanto, para troca de informaes entre a aplicao e o servidor, sempre que possvel, procure fazer uso de marcaes XML, pois elas ajudaro na manipulao dos dados e, conseqentemente, sua aplicao ficar mais organizada, com um cdigo-fonte mais fcil de ser mantido.
1.4.6 Quando no vale a pena usar Ajax

importante destacar que as aplicaes Ajax nem sempre proporcionam uma experincia melhor ao usurio do que as aplicaes tradicionais. Na realidade, o Ajax nos fornece
35
um determinado poder, que consiste na flexibilidade para a criao de interao na web. Contudo, assim como ocorre em nossa vida, quanto mais poder tivermos, maior deve ser nossa precauo em exerc-lo. Por isso, torna-se necessria uma dose de cautela no sentido 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 foi dito, no devemos deixar o usurio esperando em vo devido ao recarregamento desnecessrio de informaes. No entanto, se voc for desenvolver uma aplicao onde para cada passo do usurio seja necessrio mostrar uma pgina totalmente diferente da anterior, talvez seja melhor criar uma aplicao no modelo clssico da web. importante lembrar que a utilizao de Ajax aumenta bastante o tempo de planejamento de um site, j que todo o processo de interao com o usurio dever ser exaustivamente discutido antes de o desenvolvedor comear a implementao. Isso significa que o uso dessa nova abordagem pode aumentar bastante os custos do projeto.
1.5 Ajax e a Web 2.0

Se voc costuma ler com certa freqncia publicaes da rea de tecnologia, provavelmente j deve ter lido a respeito da Web 2.0. Conforme foi comentado no incio deste livro, a idia da Web 2.0 fazer 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 modifica o modo como os navegadores interagem com as informaes disponveis na internet. Portanto, podemos dizer que o Ajax um dos primeiros passos dessa nova gerao da internet. Vamos imaginar a seguinte situao: voc baixa um arquivo CDR (CorelDraw) da internet 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 programa a ser usado, semelhante janela mostrada na Figura 1.17. Nessa situao, o usurio estar impossibilitado de abrir o arquivo, pois ele no possui o aplicativo instalado em sua mquina. Ento, ele deve obter o CD de instalao do programa e instal-lo em seu computador, para ento finalmente poder usufruir do arquivo. Na nova gerao da internet a situao muda. No ser necessrio passar por todo esse processo, pois a Web 2.0 tem como caracterstica executar os softwares diretamente pela internet. Ningum precisar ter o programa instalado em seu computador. Basta estar on-line. Veja na Tabela 1.1 os dois lados da Web 2.0.
36
Figura 1.17 Lista exibida pelo sistema ao no encontrar o aplicativo. Tabela 1.1 Benefcios e desvantagens da Web 2.0
Benefcios Desvantagens
Utilizar softwares on-line requer uma conexo de alta O uso de softwares on-line elimina no s os custos de velocidade. As conexes de banda larga vm crescendo licena para instalao nas mquinas, mas tambm o rapidamente no mundo todo, mas grande parte dos tempo perdido nesse processo de instalao. O usurio usurios de internet ainda utiliza conexes discadas. poder pagar apenas de acordo com seu tempo de utilizao. Se a conexo cair, o usurio ter seu trabalho interrompido e possivelmente perder dados no As atualizaes dos softwares so facilitadas, pois salvos. ocorrem on-line. Como os dados so armazenados no servidor, surge Os dados podem ser salvos no servidor e acessados a questo da privacidade. Por exemplo, a empresa de qualquer computador com conexo internet. Alm responsvel pelo servidor ter acesso a informaes disso, eles ficam protegidos em relao a falhas no HD que podem ser confidenciais para o usurio. Alm disso, do usurio. existe o risco de invaso do servidor e roubo de dados.
notrio que o modelo clssico (baseado em pginas) no nos permite reproduzir com eficincia os aplicativos do desktop na web. Por exemplo, difcil imaginar um software com todos os recursos do CorelDraw rodando no prprio navegador do usurio. Surgem ento os questionamentos: Ser que demorar para a web atingir esse nvel e reproduzir fielmente as aplicaes desktop? E ser que no ficar pesado para o navegador carregar essas aplicaes? So perguntas difceis de serem respondidas, . mas sabemos que o Ajax j est acelerando esse processo. Quanto ao carregamento da aplicao, a idia carregar no navegador apenas os recursos necessrios para as aes
37
que o usurio est executando. Os demais recursos seriam carregados posteriormente por meio das chamadas assncronas do Ajax ao servidor. Conhecendo o conceito de Web 2.0, fica clara a importncia do Ajax nesse processo, pois ele diminui muito a distncia entre as aplicaes para desktop e as aplicaes para a web., para a qual muitos aplicativos que foram consagrados no desktop j esto migrando com muito sucesso. J surgiram inclusive boatos de que algumas empresas estariam desenvolvendo um conjunto de aplicativos on-line (editores de texto, planilhas eletrnicas etc.) para concorrer com o Office da Microsoft. Na realidade, desde que o Google lanou uma aplicao chamada Gmail, a comunidade web percebeu que era possvel fazer o navegador se comportar como uma aplicao de verdade O GMail chegou e conquistou seu espao, mesmo em um mercado saturado . como o de e-mails na web (webmail). A partir da, o usurio comeou a se ver livre no s do sistema operacional, mas tambm do conceito de meu computador . Previses parte, muito difcil dizer se realmente o Ajax dominar a Internet do futuro ou se surgir um modelo inovador para substitu-lo, porm a idia da Web 2.0 comea a tomar forma a partir do Ajax, e os desenvolvedores devem estar preparados para criar aplicaes condizentes com a nova gerao da web.
1.6 Requisitos e instalaes de softwares

A grande vantagem das aplicaes Ajax que elas rodam no prprio navegador web. Isso significa que, para usufruir dessas aplicaes, basta que o usurio possua uma verso mais recente (aps 2001) de um dos principais navegadores utilizados no mercado, como por exemplo: Mozilla Firefox: http://www.mozilla.com/firefox/ Internet Explorer 5+: http://www.microsoft.com/ie/ Opera: http://www.opera.com/ Konqueror: http://www.konqueror.org/ Safari: http://www.apple.com/safari/ Para testarmos os exemplos apresentados neste livro, sero utilizados os seguintes softwares: No lado cliente: Internet Explorer (navegador). No lado servidor: PHP (linguagem de programao), Apache (servidor web), MySQL (banco de dados).
38
Se voc no tiver disposio um servidor contendo os softwares necessrios, pode instalar o pacote PHP + Apache + MySQL em sua mquina, fazendo-a executar o papel de servidor e possibilitando a voc testar os exemplos do livro. No Windows, uma boa opo para instalar esses trs softwares obter o pacote EasyPHP, disponvel para download em http://www.easyphp.org/. Com esse pacote, podem ser instalados o PHP, o Apache e o MySQL, a partir de um nico arquivo de instalao. No entanto, se voc for um usurio um pouco mais experiente, recomendvel instalar individualmente cada um desses softwares, visto que nem sempre o EasyPHP contm as verses mais atuais de cada um deles. Em nosso caso, faremos manualmente a instalao das seguintes verses: PHP 5, disponvel em http://www.php.net. Apache 2.0, disponvel em http://httpd.apache.org. MySQL 5, disponvel em http://www.mysql.com. Se voc resolver tambm fazer a instalao e a configurao manual dos softwares, o procedimento para o Windows o seguinte: 1. Instalao do PHP na seo de downloads do site do PHP, faa o download da verso para Windows do PHP 5. Voc pode baixar o pacote completo, disponvel em formato ZIP. Em seguida, descompacte o arquivo no seu computador (normalmente cria-se a pasta c:\PHP para isso). Renomeie o arquivo php.ini-dist para php.ini, a fim de que o PHP possa localizar seu arquivo de configurao. Por fim, copie o arquivo php5ts.dll para a pasta de sistema do seu Windows (no Windows XP, a pasta C:\WINDOWS\system32), pois o PHP precisar encontrar esse arquivo. Faa o mesmo para o arquivo libmysql.dll, que ser usado posteriormente no acesso ao MySQL. 2. Instalao do Apache no site do Apache, na seo de downloads, h pastas com vrias verses do software. No caso do Windows, uma boa alternativa acessar uma pasta chamada win32, localizada dentro da pasta binaries. Nela, voc encontrar algumas distribuies binrias do produto, ou seja, voc poder baixar um arquivo (normalmente com extenso .msi) e execut-lo para que o Apache seja automaticamente instalado em sua mquina, como mostrado na Figura 1.18. Se durante o processo de instalao for solicitado o nome do servidor (server name), voc pode digitar localhost. Se ocorrer algum erro ao iniciar o Apache, ser exibida uma mensagem indicando onde est o problema no arquivo de configurao httpd.conf, localizado no diretrio conf do Apache. Algumas vezes, esse erro pode ocorrer em virtude da falta de alguma informao, como, por exemplo, o e-mail do administrador. Se ocorrer, basta fornecer as informaes solicitadas
39
para que o Apache seja iniciado corretamente. Para verificar se o Apache est rodando, 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.
40
Para que suas aplicaes possam ser acessadas pelo navegador, elas devem ser colocadas na pasta raiz do servidor (DocumentRoot), por padro chamada de htdocs. Por exemplo:
C:\Arquivos de programas\Apache Group\Apache2\htdocs DocumentRoot do
A pasta raiz pode ser modificada por meio da alterao do valor da diretiva arquivo de configurao httpd.conf.
3. Instalao do MySQL faa o download do MySQL 5 no site oficial do produto. Assim como no Apache, voc tambm poder obter um arquivo binrio para Windows, com extenso msi. Basta fazer o download desse arquivo e execut-lo para que o MySQL seja instalado. 4. Configurao do PHP no Apache agora que voc j tem os trs softwares necessrios para montar seu servidor, falta apenas configur-los a fim de que funcionem em conjunto. Para habilitar o PHP como um mdulo do Apache, voc precisar acrescentar algumas linhas no arquivo httpd.conf. Essas linhas podem ser encontradas no arquivo install.txt que acompanha a distribuio do PHP. Por exemplo, para instalar o PHP como mdulo do Apache 2.0, devem ser acrescentadas as seguintes linhas:
LoadModule php5_module C:/PHP/php5apache2.dll" AddType application/x-httpd-php .php PHPIniDir C:/PHP"
A primeira linha carrega o mdulo do PHP, a segunda faz com que o Apache reconhea os scripts com extenso .php, e a terceira indica a localizao do arquivo de configurao php.ini. Consulte o arquivo install.txt para orientaes quanto a outras verses. Aps incluir as linhas, reinicie o Apache para que elas tenham efeito. 5. Configurao do MySQL no PHP para finalizar, precisamos habilitar a extenso do MySQL no arquivo de configurao do PHP, o php.ini. Neste livro, utilizaremos a extenso mysqli, visto que nossa verso do MySQL superior a 4.1, e, portanto, a antiga extenso do MySQL no funcionar. A linha que habilita essa extenso :
extension=php_mysqli.dll
Se essa linha estiver comentada, retire o comentrio. Caso ela no exista, deve ser inserida. Se sua verso do MySQL for anterior a 4.1, habilite o arquivo php_mysql. dll em vez do php_mysqli.dll. Verifique ainda se a diretiva extension_dir est apontando para o diretrio correto das extenses do PHP (normalmente chamado de ext). Por exemplo:
extension_dir = C:/PHP/ext/"

Web Interativa Com Ajax e PHP - Juliano Niederauer - Capítulo 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Interativa Com Ajax e PHP - Juliano Niederauer - Capítulo 1

Uploaded by

Copyright:

Available Formats

Web Interativa com

1.1 Modelo clica e espera versus modelo interativo

SERVIDOR Servidor web

Interface do usurio Dados HTML

Banco de dados e processos do servidor

Figura 1.1 Modelo clssico de aplicao web.

Interface do usurio Chamada Javascript Dados HTML

SERVIDOR Servidor Web / XML

Banco de dados e processos do servidor

Figura 1.2 Modelo de aplicao com Ajax.

Captulo 1 O que Ajax?

1.2 Exemplos de uso prtico

Figura 1.3 Legenda utilizada.