Você está na página 1de 38

AJAX Avanado

21 de janeiro de 2010

Sumrio
I Sobre essa Apostila 2 4 9 18
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 20 20 23 25 27 29 30 31 34 34 36

II Informaes Bsicas III GNU Free Documentation License IV AJAX Avanado


0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 0.10 0.11 0.12 Reviso de AJAX . . . . . . . . . . . . XML . . . . . . . . . . . . . . . . . . . Estrutura de um XML . . . . . . . . . Criar array com informaes de banda Gerar XML com o XMLWriter . . . . . Preparando a aplicao cliente . . . . Criando funo para requisitar o XML JavaScript e DOM . . . . . . . . . . . Exibindo dados em interface amigvel Mtodos Get e Post . . . . . . . . . . Enviando dados via POST . . . . . . . Adicionando interface . . . . . . . .

Parte I

Sobre essa Apostila

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Contedo
O contedo dessa apostila fruto da compilao de diversos materiais livres publicados na internet, disponveis em diversos sites ou originalmente produzido no CDTC (http://www.cdtc.org.br.) O formato original deste material bem como sua atualizao est disponvel dentro da licena GNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seo de mesmo nome, tendo inclusive uma verso traduzida (no ocial). A reviso e alterao vem sendo realizada pelo CDTC (suporte@cdtc.org.br) desde outubro de 2006. Crticas e sugestes construtivas sero bem-vindas a qualquer hora.

Autores
A autoria deste de responsabilidade de Ricardo Kehrle Miranda (ricardo.kehrle@cdtc.org.br). O texto original faz parte do projeto Centro de Difuso de Tecnologia e Conhecimento que vm sendo realizado pelo ITI (Instituto Nacional de Tecnologia da Informao) em conjunto com outros parceiros institucionais, e com as universidades federais brasileiras que tem produzido e utilizado Software Livre apoiando inclusive a comunidade Free Software junto a outras entidades no pas. Informaes adicionais podem ser obtidas atravs do email ouvidoria@cdtc.org.br, ou da home page da entidade, atravs da URL http://www.cdtc.org.br.

Garantias
O material contido nesta apostila isento de garantias e o seu uso de inteira responsabilidade do usurio/leitor. Os autores, bem como o ITI e seus parceiros, no se responsabilizam direta ou indiretamente por qualquer prejuzo oriundo da utilizao do material aqui contido.

Licena
Copyright 2006, Instituto Nacional de Tecnologia da Informao (cdtc@iti.gov.br) . Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOSTILA. A copy of the license is included in the section entitled GNU Free Documentation License.

Parte II

Informaes Bsicas

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Sobre o CDTC
Objetivo Geral O Projeto CDTC visa a promoo e o desenvolvimento de aes que incentivem a disseminao de solues que utilizem padres abertos e no proprietrios de tecnologia, em proveito do desenvolvimento social, cultural, poltico, tecnolgico e econmico da sociedade brasileira. Objetivo Especco Auxiliar o Governo Federal na implantao do plano nacional de software no-proprietrio e de cdigo fonte aberto, identicando e mobilizando grupos de formadores de opinio dentre os servidores pblicos e agentes polticos da Unio Federal, estimulando e incentivando o mercado nacional a adotar novos modelos de negcio da tecnologia da informao e de novos negcios de comunicao com base em software no-proprietrio e de cdigo fonte aberto, oferecendo treinamento especco para tcnicos, prossionais de suporte e funcionrios pblicos usurios, criando grupos de funcionrios pblicos que iro treinar outros funcionrios pblicos e atuar como incentivadores e defensores dos produtos de software no proprietrios e cdigo fonte aberto, oferecendo contedo tcnico on-line para servios de suporte, ferramentas para desenvolvimento de produtos de software no proprietrios e do seu cdigo fonte livre, articulando redes de terceiros (dentro e fora do governo) fornecedoras de educao, pesquisa, desenvolvimento e teste de produtos de software livre.

Guia do aluno
Neste guia, voc ter reunidas uma srie de informaes importantes para que voc comece seu curso. So elas: Licenas para cpia de material disponvel; Os 10 mandamentos do aluno de Educao a Distncia; Como participar dos foruns e da wikipdia; Primeiros passos. muito importante que voc entre em contato com TODAS estas informaes, seguindo o roteiro acima.

Licena
Copyright 2006, Instituto Nacional de Tecnologia da Informao (cdtc@iti.gov.br).
5

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

dada permisso para copiar, distribuir e/ou modicar este documento sob os termos da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior pblicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSA APOSTILA. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU".

Os 10 mandamentos do aluno de educao online

1. Acesso Internet: ter endereo eletrnico, um provedor e um equipamento adequado pr-requisito para a participao nos cursos a distncia; 2. Habilidade e disposio para operar programas: ter conhecimentos bsicos de Informtica necessrio para poder executar as tarefas; 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distncia conta muitos pontos, pois ir colaborar para o processo ensino-aprendizagem pessoal, dos colegas e dos professores; 4. Comportamentos compatveis com a etiqueta: mostrar-se interessado em conhecer seus colegas de turma respeitando-os e se fazendo ser respeitado pelos mesmos; 5. Organizao pessoal: planejar e organizar tudo fundamental para facilitar a sua reviso e a sua recuperao de materiais; 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigaes e realiz-las em tempo real; 7. Curiosidade e abertura para inovaes: aceitar novas idias e inovar sempre; 8. Flexibilidade e adaptao: requisitos necessrio mudana tecnolgica, aprendizagens e descobertas; 9. Objetividade em sua comunicao: comunicar-se de forma clara, breve e transparente ponto - chave na comunicao pela Internet; 10. Responsabilidade: ser responsvel por seu prprio aprendizado. O ambiente virtual no controla a sua dedicao, mas reete os resultados do seu esforo e da sua colaborao.

Como participar dos fruns e Wikipdia


Voc tem um problema e precisa de ajuda? Podemos te ajudar de 2 formas: A primeira o uso dos fruns de notcias e de dvidas gerais que se distinguem pelo uso: . O frum de notcias tem por objetivo disponibilizar um meio de acesso rpido a informaes que sejam pertinentes ao curso (avisos, notcias). As mensagens postadas nele so enviadas a
6

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

todos participantes. Assim, se o monitor ou algum outro participante tiver uma informao que interesse ao grupo, favor post-la aqui. Porm, se o que voc deseja resolver alguma dvida ou discutir algum tpico especco do curso. recomendado que voc faa uso do Frum de dvidas gerais que lhe d recursos mais efetivos para esta prtica. . O frum de dvidas gerais tem por objetivo disponibilizar um meio fcil, rpido e interativo para solucionar suas dvidas e trocar experincias. As mensagens postadas nele so enviadas a todos participantes do curso. Assim, ca muito mais fcil obter respostas, j que todos podem ajudar. Se voc receber uma mensagem com algum tpico que saiba responder, no se preocupe com a formalizao ou a gramtica. Responda! E no se esquea de que antes de abrir um novo tpico recomendvel ver se a sua pergunta j foi feita por outro participante. A segunda forma se d pelas Wikis: . Uma wiki uma pgina web que pode ser editada colaborativamente, ou seja, qualquer participante pode inserir, editar, apagar textos. As verses antigas vo sendo arquivadas e podem ser recuperadas a qualquer momento que um dos participantes o desejar. Assim, ela oferece um timo suporte a processos de aprendizagem colaborativa. A maior wiki na web o site "Wikipdia", uma experincia grandiosa de construo de uma enciclopdia de forma colaborativa, por pessoas de todas as partes do mundo. Acesse-a em portugus pelos links: Pgina principal da Wiki - http://pt.wikipedia.org/wiki/ Agradecemos antecipadamente a sua colaborao com a aprendizagem do grupo!

Primeiros Passos
Para uma melhor aprendizagem recomendvel que voc siga os seguintes passos: Ler o Plano de Ensino e entender a que seu curso se dispe a ensinar; Ler a Ambientao do Moodle para aprender a navegar neste ambiente e se utilizar das ferramentas bsicas do mesmo; Entrar nas lies seguindo a seqncia descrita no Plano de Ensino; Qualquer dvida, reporte ao Frum de Dvidas Gerais.

Perl do Tutor
Segue-se uma descrio do tutor ideal, baseada no feedback de alunos e de tutores. O tutor ideal um modelo de excelncia: consistente, justo e prossional nos respectivos valores e atitudes, incentiva mas honesto, imparcial, amvel, positivo, respeitador, aceita as idias dos estudantes, paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.
7

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

A classicao por um tutor desta natureza proporciona o melhor feedback possvel, crucial, e, para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem. Este tutor ou instrutor: fornece explicaes claras acerca do que ele espera e do estilo de classicao que ir utilizar; gosta que lhe faam perguntas adicionais; identica as nossas falhas, mas corrige-as amavelmente, diz um estudante, e explica porque motivo a classicao foi ou no foi atribuda; tece comentrios completos e construtivos, mas de forma agradvel (em contraste com um reparo de um estudante: os comentrios deixam-nos com uma sensao de crtica, de ameaa e de nervossismo) d uma ajuda complementar para encorajar um estudante em diculdade; esclarece pontos que no foram entendidos, ou corretamente aprendidos anteriormente; ajuda o estudante a alcanar os seus objetivos; exvel quando necessrio; mostra um interesse genuno em motivar os alunos (mesmo os principiantes e, por isso, talvez numa fase menos interessante para o tutor); escreve todas as correes de forma legvel e com um nvel de pormenorizao adequado; acima de tudo, devolve os trabalhos rapidamente;

Parte III

GNU Free Documentation License

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

(Traduzido pelo Joo S. O. Bueno atravs do CIPSGA em 2001) Esta uma traduo no ocial da Licena de Documentao Livre GNU em Portugus Brasileiro. Ela no publicada pela Free Software Foundation, e no se aplica legalmente a distribuio de textos que usem a GFDL - apenas o texto original em Ingls da GNU FDL faz isso. Entretanto, ns esperamos que esta traduo ajude falantes de portugus a entenderem melhor a GFDL. This is an unofcial translation of the GNU General Documentation License into Brazilian Portuguese. It was not published by the Free Software Foundation, and does not legally state the distribution terms for software that uses the GFDLonly the original English text of the GFDL does that. However, we hope that this translation will help Portuguese speakers understand the GFDL better. Licena de Documentao Livre GNU Verso 1.1, Maro de 2000 Copyright (C) 2000 Free Software Foundation, Inc. 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA permitido a qualquer um copiar e distribuir cpias exatas deste documento de licena, mas no permitido alter-lo.

INTRODUO
O propsito desta Licena deixar um manual, livro-texto ou outro documento escrito "livre"no sentido de liberdade: assegurar a qualquer um a efetiva liberdade de copi-lo ou redistribui-lo, com ou sem modicaes, comercialmente ou no. Secundariamente, esta Licena mantm para o autor e editor uma forma de ter crdito por seu trabalho, sem ser considerado responsvel pelas modicaes feitas por terceiros. Esta Licena um tipo de "copyleft"("direitos revertidos"), o que signica que derivaes do documento precisam ser livres no mesmo sentido. Ela complementa a GNU Licena Pblica Geral (GNU GPL), que um copyleft para software livre. Ns zemos esta Licena para que seja usada em manuais de software livre, por que software livre precisa de documentao livre: um programa livre deve ser acompanhado de manuais que provenham as mesmas liberdades que o software possui. Mas esta Licena no est restrita a manuais de software; ela pode ser usada para qualquer trabalho em texto, independentemente do assunto ou se ele publicado como um livro impresso. Ns recomendamos esta Licena principalmente para trabalhos cujo propsito seja de introduo ou referncia.

APLICABILIDADE E DEFINIES
Esta Licena se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelo detentor dos direitos autorais dizendo que ele pode ser distribudo sob os termos desta Licena. O "Documento"abaixo se refere a qualquer manual ou texto. Qualquer pessoa do pblico um

10

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

licenciado e referida como "voc". Uma "Verso Modicada"do Documento se refere a qualquer trabalho contendo o documento ou uma parte dele, quer copiada exatamente, quer com modicaes e/ou traduzida em outra lngua. Uma "Seo Secundria" um apndice ou uma seo inicial do Documento que trata exclusivamente da relao dos editores ou dos autores do Documento com o assunto geral do Documento (ou assuntos relacionados) e no contm nada que poderia ser includo diretamente nesse assunto geral (Por exemplo, se o Documento em parte um livro texto de matemtica, a Seo Secundria pode no explicar nada de matemtica). Essa relao poderia ser uma questo de ligao histrica com o assunto, ou matrias relacionadas, ou de posies legais, comerciais, loscas, ticas ou polticas relacionadas ao mesmo. As "Sees Invariantes"so certas Sees Secundrias cujos ttulos so designados, como sendo de Sees Invariantes, na nota que diz que o Documento publicado sob esta Licena. Os "Textos de Capa"so certos trechos curtos de texto que so listados, como Textos de Capa Frontal ou Textos da Quarta Capa, na nota que diz que o texto publicado sob esta Licena. Uma cpia "Transparente"do Documento signica uma cpia que pode ser lida automaticamente, representada num formato cuja especicao esteja disponvel ao pblico geral, cujos contedos possam ser vistos e editados diretamente e sem mecanismos especiais com editores de texto genricos ou (para imagens compostas de pixels) programas de pintura genricos ou (para desenhos) por algum editor de desenhos grandemente difundido, e que seja passvel de servir como entrada a formatadores de texto ou para traduo automtica para uma variedade de formatos que sirvam de entrada para formatadores de texto. Uma cpia feita em um formato de arquivo outrossim Transparente cuja constituio tenha sido projetada para atrapalhar ou desencorajar modicaes subsequentes pelos leitores no Transparente. Uma cpia que no "Transparente" chamada de "Opaca". Exemplos de formatos que podem ser usados para cpias Transparentes incluem ASCII simples sem marcaes, formato de entrada do Texinfo, formato de entrada do LaTex, SGML ou XML usando uma DTD disponibilizada publicamente, e HTML simples, compatvel com os padres, e projetado para ser modicado por pessoas. Formatos opacos incluem PostScript, PDF, formatos proprietrios que podem ser lidos e editados apenas com processadores de texto proprietrios, SGML ou XML para os quais a DTD e/ou ferramentas de processamento e edio no estejam disponveis para o pblico, e HTML gerado automaticamente por alguns editores de texto com nalidade apenas de sada. A "Pgina do Ttulo"signica, para um livro impresso, a pgina do ttulo propriamente dita, mais quaisquer pginas subsequentes quantas forem necessrias para conter, de forma legvel, o material que esta Licena requer que aparea na pgina do ttulo. Para trabalhos que no tenham uma pgina do ttulo, "Pgina do Ttulo"signica o texto prximo da apario mais proeminente do ttulo do trabalho, precedendo o incio do corpo do texto.

11

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

FAZENDO CPIAS EXATAS


Voc pode copiar e distribuir o Documento em qualquer meio, de forma comercial ou no comercial, desde que esta Licena, as notas de copyright, e a nota de licena dizendo que esta Licena se aplica ao documento estejam reproduzidas em todas as cpias, e que voc no acrescente nenhuma outra condio, quaisquer que sejam, s desta Licena. Voc no pode usar medidas tcnicas para obstruir ou controlar a leitura ou confeco de cpias subsequentes das cpias que voc zer ou distribuir. Entretanto, voc pode aceitar compensao em troca de cpias. Se voc distribuir uma quantidade grande o suciente de cpias, voc tambm precisa respeitar as condies da seo 3. Voc tambm pode emprestar cpias, sob as mesmas condies colocadas acima, e tambm pode exibir cpias publicamente.

FAZENDO CPIAS EM QUANTIDADE


Se voc publicar cpias do Documento em nmero maior que 100, e a nota de licena do Documento obrigar Textos de Capa, voc precisar incluir as cpias em capas que tragam, clara e legivelmente, todos esses Textos de Capa: Textos de Capa da Frente na capa da frente, e Textos da Quarta Capa na capa de trs. Ambas as capas tambm precisam identicar clara e legivelmente voc como o editor dessas cpias. A capa da frente precisa apresentar o ttulo completo com todas as palavras do ttulo igualmente proeminentes e visveis. Voc pode adicionar outros materiais s capas. Fazer cpias com modicaes limitadas s capas, tanto quanto estas preservem o ttulo do documento e satisfaam a essas condies, pode ser tratado como cpia exata em outros aspectos. Se os textos requeridos em qualquer das capas for muito volumoso para caber de forma legvel, voc deve colocar os primeiros (tantos quantos couberem de forma razovel) na capa verdadeira, e continuar os outros nas pginas adjacentes. Se voc publicar ou distribuir cpias Opacas do Documento em nmero maior que 100, voc precisa ou incluir uma cpia Transparente que possa ser lida automaticamente com cada cpia Opaca, ou informar, em ou com, cada cpia Opaca a localizao de uma cpia Transparente completa do Documento acessvel publicamente em uma rede de computadores, qual o pblico usurio de redes tenha acesso a download gratuito e annimo utilizando padres pblicos de protocolos de rede. Se voc utilizar o segundo mtodo, voc precisar tomar cuidados razoavelmente prudentes, quando iniciar a distribuio de cpias Opacas em quantidade, para assegurar que esta cpia Transparente vai permanecer acessvel desta forma na localizao especicada por pelo menos um ano depois da ltima vez em que voc distribuir uma cpia Opaca (diretamente ou atravs de seus agentes ou distribuidores) daquela edio para o pblico. pedido, mas no obrigatrio, que voc contate os autores do Documento bem antes de redistribuir qualquer grande nmero de cpias, para lhes dar uma oportunidade de prover voc com uma verso atualizada do Documento.

12

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

MODIFICAES
Voc pode copiar e distribuir uma Verso Modicada do Documento sob as condies das sees 2 e 3 acima, desde que voc publique a Verso Modicada estritamente sob esta Licena, com a Verso Modicada tomando o papel do Documento, de forma a licenciar a distribuio e modicao da Verso Modicada para quem quer que possua uma cpia da mesma. Alm disso, voc precisa fazer o seguinte na verso modicada: A. Usar na Pgina de Ttulo (e nas capas, se houver alguma) um ttulo distinto daquele do Documento, e daqueles de verses anteriores (que deveriam, se houvesse algum, estarem listados na seo "Histrico do Documento"). Voc pode usar o mesmo ttulo de uma verso anterior se o editor original daquela verso lhe der permisso; B. Listar na Pgina de Ttulo, como autores, uma ou mais das pessoas ou entidades responsveis pela autoria das modicaes na Verso Modicada, conjuntamente com pelo menos cinco dos autores principais do Documento (todos os seus autores principais, se ele tiver menos que cinco); C. Colocar na Pgina de Ttulo o nome do editor da Verso Modicada, como o editor; D. Preservar todas as notas de copyright do Documento; E. Adicionar uma nota de copyright apropriada para suas prprias modicaes adjacente s outras notas de copyright; F. Incluir, imediatamente depois das notas de copyright, uma nota de licena dando ao pblico o direito de usar a Verso Modicada sob os termos desta Licena, na forma mostrada no tpico abaixo; G. Preservar nessa nota de licena as listas completas das Sees Invariantes e os Textos de Capa requeridos dados na nota de licena do Documento; H. Incluir uma cpia inalterada desta Licena; I. Preservar a seo entitulada "Histrico", e seu ttulo, e adicionar mesma um item dizendo pelo menos o ttulo, ano, novos autores e editor da Verso Modicada como dados na Pgina de Ttulo. Se no houver uma sesso denominada "Histrico"no Documento, criar uma dizendo o ttulo, ano, autores, e editor do Documento como dados em sua Pgina de Ttulo, ento adicionar um item descrevendo a Verso Modicada, tal como descrito na sentena anterior; J. Preservar o endereo de rede, se algum, dado no Documento para acesso pblico a uma cpia Transparente do Documento, e da mesma forma, as localizaes de rede dadas no Documento para as verses anteriores em que ele foi baseado. Elas podem ser colocadas na seo "Histrico". Voc pode omitir uma localizao na rede para um trabalho que tenha sido publicado pelo menos quatro anos antes do Documento, ou se o editor original da verso a que ela se rera der sua permisso; K. Em qualquer seo entitulada "Agradecimentos"ou "Dedicatrias", preservar o ttulo da
13

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

seo e preservar a seo em toda substncia e m de cada um dos agradecimentos de contribuidores e/ou dedicatrias dados; L. Preservar todas as Sees Invariantes do Documento, inalteradas em seus textos ou em seus ttulos. Nmeros de seo ou equivalentes no so considerados parte dos ttulos da seo; M. Apagar qualquer seo entitulada "Endossos". Tal sesso no pode ser includa na Verso Modicada; N. No reentitular qualquer seo existente com o ttulo "Endossos"ou com qualquer outro ttulo dado a uma Seo Invariante. Se a Verso Modicada incluir novas sees iniciais ou apndices que se qualiquem como Sees Secundrias e no contenham nenhum material copiado do Documento, voc pode optar por designar alguma ou todas aquelas sees como invariantes. Para fazer isso, adicione seus ttulos lista de Sees Invariantes na nota de licena da Verso Modicada. Esses ttulos precisam ser diferentes de qualquer outro ttulo de seo. Voc pode adicionar uma seo entitulada "Endossos", desde que ela no contenha qualquer coisa alm de endossos da sua Verso Modicada por vrias pessoas ou entidades - por exemplo, declaraes de revisores ou de que o texto foi aprovado por uma organizao como a denio ocial de um padro. Voc pode adicionar uma passagem de at cinco palavras como um Texto de Capa da Frente , e uma passagem de at 25 palavras como um Texto de Quarta Capa, ao nal da lista de Textos de Capa na Verso Modicada. Somente uma passagem de Texto da Capa da Frente e uma de Texto da Quarta Capa podem ser adicionados por (ou por acordos feitos por) qualquer entidade. Se o Documento j incluir um texto de capa para a mesma capa, adicionado previamente por voc ou por acordo feito com alguma entidade para a qual voc esteja agindo, voc no pode adicionar um outro; mas voc pode trocar o antigo, com permisso explcita do editor anterior que adicionou a passagem antiga. O(s) autor(es) e editor(es) do Documento no do permisso por esta Licena para que seus nomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquer Verso Modicada.

COMBINANDO DOCUMENTOS
Voc pode combinar o Documento com outros documentos publicados sob esta Licena, sob os termos denidos na seo 4 acima para verses modicadas, desde que voc inclua na combinao todas as Sees Invariantes de todos os documentos originais, sem modicaes, e liste todas elas como Sees Invariantes de seu trabalho combinado em sua nota de licena. O trabalho combinado precisa conter apenas uma cpia desta Licena, e Sees Invariantes Idnticas com multiplas ocorrncias podem ser substitudas por apenas uma cpia. Se houver mltiplas Sees Invariantes com o mesmo nome mas com contedos distintos, faa o ttulo de
14

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

cada seo nico adicionando ao nal do mesmo, em parnteses, o nome do autor ou editor origianl daquela seo, se for conhecido, ou um nmero que seja nico. Faa o mesmo ajuste nos ttulos de seo na lista de Sees Invariantes nota de licena do trabalho combinado. Na combinao, voc precisa combinar quaisquer sees entituladas "Histrico"dos diversos documentos originais, formando uma seo entitulada "Histrico"; da mesma forma combine quaisquer sees entituladas "Agradecimentos", ou "Dedicatrias". Voc precisa apagar todas as sees entituladas como "Endosso".

COLETNEAS DE DOCUMENTOS
Voc pode fazer uma coletnea consitindo do Documento e outros documentos publicados sob esta Licena, e substituir as cpias individuais desta Licena nos vrios documentos com uma nica cpia incluida na coletnea, desde que voc siga as regras desta Licena para cpia exata de cada um dos Documentos em todos os outros aspectos. Voc pode extrair um nico documento de tal coletnea, e distribu-lo individualmente sob esta Licena, desde que voc insira uma cpia desta Licena no documento extrado, e siga esta Licena em todos os outros aspectos relacionados cpia exata daquele documento.

AGREGAO COM TRABALHOS INDEPENDENTES


Uma compilao do Documento ou derivados dele com outros trabalhos ou documentos separados e independentes, em um volume ou mdia de distribuio, no conta como uma Verso Modicada do Documento, desde que nenhum copyright de compilao seja reclamado pela compilao. Tal compilao chamada um "agregado", e esta Licena no se aplica aos outros trabalhos auto-contidos compilados junto com o Documento, s por conta de terem sido assim compilados, e eles no so trabalhos derivados do Documento. Se o requerido para o Texto de Capa na seo 3 for aplicvel a essas cpias do Documento, ento, se o Documento constituir menos de um quarto de todo o agregado, os Textos de Capa do Documento podem ser colocados em capas adjacentes ao Documento dentro do agregado. Seno eles precisaro aparecer nas capas de todo o agregado.

TRADUO
Traduo considerada como um tipo de modicao, ento voc pode distribuir tradues do Documento sob os termos da seo 4. A substituio de Sees Invariantes por tradues requer uma permisso especial dos detentores do copyright das mesmas, mas voc pode incluir tradues de algumas ou de todas as Sees Invariantes em adio s verses orignais dessas Sees Invariantes. Voc pode incluir uma traduo desta Licena desde que voc tambm inclua a verso original em Ingls desta Licena. No caso de discordncia entre a traduo e a

15

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

verso original em Ingls desta Licena, a verso original em Ingls prevalecer.

TRMINO
Voc no pode copiar, modicar, sublicenciar, ou distribuir o Documento exceto como expressamente especicado sob esta Licena. Qualquer outra tentativa de copiar, modicar, sublicenciar, ou distribuir o Documento nula, e resultar automaticamente no trmino de seus direitos sob esta Licena. Entretanto, terceiros que tenham recebido cpias, ou direitos de voc sob esta Licena no tero suas licenas terminadas, tanto quanto esses terceiros permaneam em total acordo com esta Licena.

REVISES FUTURAS DESTA LICENA


A Free Software Foundation pode publicar novas verses revisadas da Licena de Documentao Livre GNU de tempos em tempos. Tais novas verses sero similares em espirito verso presente, mas podem diferir em detalhes ao abordarem novos porblemas e preocupaes. Veja http://www.gnu.org/copyleft/. A cada verso da Licena dado um nmero de verso distinto. Se o Documento especicar que uma verso particular desta Licena "ou qualquer verso posterior"se aplica ao mesmo, voc tem a opo de seguir os termos e condies daquela verso especca, ou de qualquer verso posterior que tenha sido publicada (no como rascunho) pela Free Software Foundation. Se o Documento no especicar um nmero de Verso desta Licena, voc pode escolher qualquer verso j publicada (no como rascunho) pela Free Software Foundation. ADENDO: Como usar esta Licena para seus documentos Para usar esta Licena num documento que voc escreveu, inclua uma cpia desta Licena no documento e ponha as seguintes notas de copyright e licenas logo aps a pgina de ttulo: Copyright (c) ANO SEU NOME. dada permisso para copiar, distribuir e/ou modicar este documento sob os termos da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior publicada pela Free Software Foundation; com as Sees Invariantes sendo LISTE SEUS TTULOS, com os Textos da Capa da Frente sendo LISTE, e com os Textos da Quarta-Capa sendo LISTE. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU". Se voc no tiver nenhuma Seo Invariante, escreva "sem Sees Invariantes"ao invs de dizer quais so invariantes. Se voc no tiver Textos de Capa da Frente, escreva "sem Textos de Capa da Frente"ao invs de "com os Textos de Capa da Frente sendo LISTE"; o mesmo para os Textos da Quarta Capa. Se o seu documento contiver exemplos no triviais de cdigo de programas, ns recomendamos a publicao desses exemplos em paralelo sob a sua escolha de licena de software livre,

16

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

tal como a GNU General Public License, para permitir o seu uso em software livre.

17

Parte IV

AJAX Avanado

18

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

0.1 Reviso de AJAX


Vamos, neste curso, estudar mais profundamente o AJAX( Asynchronous JavaScript And XML) . O XML que no foi utilizado no curso bsico de AJAX do CDTC agora ser abordado para que seja possvel a criao de aplicaes mais ricas. Para quem j se esqueceu vamos relembrar letra por letra esse conjunto de tecnologias e seu funcionamento: * AJAX - Asynchronous: normalmente a cada vez que uma requisio feita, a pgina "travada"at que o servidor retorne o novo contedo da pgina. O termo Asynchronous, assncrono em portugus signica que agora o usurio pode fazer vrias requisies a um servidor sem "travar"a tela. Abaixo vemos um esquemtico do funcionamento de uma aplicao web sncrona e assncrona:

Figura1 - Aplicaes sncronas e assncronas. * AJAX - JavaScript: do lado cliente sempre carregaremos scripts JavaScript. Uma vez carregada a pgina, eles quem vo executar as requisies por meio do objeto XMLHttpRequest. Abaixo vemos um script bsico usando esse objeto: /* criar objeto XMLHttpRequest */ xmlHttp = getXmlHttpRequest(); /* abrir objeto */ xmlHttp.open( "GET", url , true); /* denir funo a ser chamada quando a requisio terminar*/ xmlHttp.onreadystatechange = pronto; /* enviar dados/efetuar requisio */ xmlHttp.send(); Ao abrir o objeto passamos ao mtodo open os parmetros "GET", url e true. Em que "GET"se refere ao mtodo da requisio http (ser melhor abordado mais a frente), url uma string contendo o endereo a ser feita a requisio e true um ag indicando que a requisio ser assncrona, ou seja, o script continuar sua execuo sem aguardar que a requisio seja terminada. * AJAX - XML: voc pode ter percebido que a segunda letra A foi pulada, isso porque and (palavra da lngua inglesa) signica apenas a conjuno "e"na lngua portuguesa. XML ou eXtensible Markup Language uma linguagem de marcao padronizada. Ela servir para que possamos em uma nica requisio passar vrios dados do servidor ao cliente de maneira organizada. Essa linguagem ser melhor abordada logo a seguir.

19

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

0.2 XML
XML eXtensible Markup Language - Traduzindo teramos Linguagem de Marcao eXtensvel. uma linguagem muito utilizada para troca de mensagens na internet. Isso porque uma linguagem fcil de ser usada e independente de plataforma (sistemas operacionais, navegadores, servidores etc). Foi criada em meados dos anos 90 pelo World Wide Web Consortium( W3C)com a inteno de juntar a exibilidade de uma linguagem que vinha sendo utilizada na poca (o SGML) com a simplicidade do HTML. importante saber que um XML no faz nada, apenas encapsula informaes. Embora j existam linguagens de execuo baseadas em XML, essa no sua principal funo. Ento, no caso do AJAX, o XML ser o responsvel por carregar as informaes que sero enviadas do servidor para o cliente. Do cliente para o servidor passaremos as informaes pelos clssicos mtodos Get e Post que sero melhor detalhados mais adiante em nosso curso. Abaixo vemos um diagrama para visualizarmos onde se encontra o XML em um sistema utilizando AJAX:

Figura2 - Diagrama de troca de dados em AJAX. Note que a gerao do XML pode ser feita em qualquer servidor HTTP, no se limitando ao Apache+PHP, bastando apenas que o servidor gere um XML com estrutura conhecida pela sua aplicao JavaScript.

0.3 Estrutura de um XML


Conforme visto anteriormente, o XML segue uma estrutura em rvore. Vamos criar um XML que contenha os dados dos funcionrios de uma empresa. Primeiramente monta-se a rvore:

20

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Figura3 - rvore XML de uma empresa. A partir desta rvore vamos comear a montar nosso XML. Vamos identicar cada n da rvore utilizando tags da mesma forma que em um cdigo HTML, porm as tags tero o nome no n correspondente a ela: * A primeira coisa a se fazer criar o identicador do XML com as informaes da verso e a codicao. A verso que utilizaremos a 1.0: <?xml version="1.0"encoding="UTF-8"?> * Vamos comear a montar nossa rvore criando a tag da empresa: <?xml version="1.0"encoding="UTF-8"?> <empresa> </empresa> * Descendo a rvore temos funcionrios e clientes: <?xml version="1.0"encoding="UTF-8"?> <empresa> <funcionarios> </funcionarios> <clientes> </clientes> </empresa> * E assim por diante. Note que no inclu as tarefas para que voc possa treinar. Logo, teremos: <?xml version="1.0"encoding="UTF-8"?> <empresa> <funcionarios> <nome></nome> </funcionarios> <clientes> <nome></nome>
21

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

</clientes> </empresa> A princpio parece estar tudo bem, porm vamos adicionar vrios funcionrios e vrios clientes e no apenas um. Veja o cdigo novamente e perceba que se copiarmos o contedo entre as tags <funcionarios></funcionarios> as tags caro confusas. Vamos mexer um pouco em nossa rvore adicionando mais um n dentro de funcionrios chamado servidor. Vamos, tambm, adicionar um atributo para identicar melhor cada funcionrio e cada cliente. Um atributo ca dentro de uma tag seguindo a sintaxe <nome_da_tag atributo="valor_do_atributo . Assim possuiremos arquivo do tipo: <?xml version="1.0"encoding="UTF-8"?> <empresa> <funcionarios > <servidor id=> <nome></nome> </servidor> </funcionarios> <clientes> <nome id= ></nome> </clientes> </empresa> Pronto. Perceba que o mesmo problema que ocorreu em funcionrios tambm acontece para tarefas, pense como agora nossa estrutura est montada. Por m, basta adicionar quantos servidores e clientes quisermos. <?xml version="1.0"encoding="UTF-8"?> <empresa> <funcionarios > <servidor id="0001 <nome>Fulano Cicrano da Silva</nome> </servidor> <servidor id="0002 <nome>Jo?e Neto</nome> </servidor> <servidor id="0003 <nome>Arnaldo Haroldo</nome> </servidor> </funcionarios> <clientes> <nome id="cliente1Joaozinho da Silva</nome> <nome id="cliente2Mario Jos</nome> <nome id="cliente3Silvia dos Santos</nome> <nome id="cliente4Maria do Carmo</nome> <nome id="cliente5Fulano de Tal</nome> </clientes> </empresa>

22

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

0.4 Criar array com informaes de banda


Para criar nosso XML, vamos imaginar um cenrio em que voc sabe apenas o nome da banda e com isso quer obter vrias informaes sobre ela, como integrantes e discograa. Pois bem, como visto na lio anterior comearemos pela rvore:

Figura4 - rvore XML de uma banda. Neste curso no utilizaremos bancos de dados, ento antes de partir para a criao do XML propriamente dita, vamos criar um arquivo chamado discoteca.php para guardar as informaes das bandas em um grande array, seguindo a mesma rvore. A nica diferena que o array ter vrias bandas, equanto que o XML ter as informaes apenas da banda escolhida: <?php $discoteca = array( 0 => array( nome => Angra , integrantes => array( 0 => Daniel dos Santos , 1 => Eduardo Falaschi, 2 => Felipe Andreoli, 3 => Kiko Loureiro, 4 => Rafael Bittencourt, 5 => Ricardo Confessori ), discograa => array( 0 => (1993) Angels Cry , 1 => (1996) Holy Land, 2 => (1998) Fireworks, 3 => (2001) Rebirth, 4 => (2004) Temple of Shadows, 5 => (2006) Aurora Consurgens ) ), 1 => array( nome => Paralamas , integrantes => array( 0 => Bi Ribeiro , 1 => Herbert Vianna, 2 => Joo Barone
23

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

), discograa => array( 0 => 1983 Cinema Mudo , 1 => 1984 O Passo do Lui, 2 => 1986 Selvagem?, 3 => 1987 D, 4 => 1988 Bora-Bora, 5 => 1989 Big Bang, 6 => 1990 Arquivo, 7 => 1991 Os Gr&atilde;os, 8 => 1994 Severino, 9 => 1995 Vamo Bat&ecirc; Lata, 10 => 1996 Nove Luas, 12 => 1998 Hey Na Na, 13 => 1999 Ac&uacute;stico MTV, 14 => 2000 Arquivo II, 15 => 2002 Longo Caminho, 16 => 2004 Uns Dias Ao Vivo, 17 => 2005 Hoje, 18 => 2007 Rock in Rio 1985, 19 => 2009 Brasil Afora ) ), 2 => array(nome => Raimundos , integrantes => array( 0 => Dig&atilde;o , 1 => Canisso, 2 => Fred, 3 => Rodolfo ), discograa => array( 0 => 1994 - Raimundos , 1 => 1995 - Lav&ocirc; T&acute; Novo, 2 => 1996 - Cesta Bsica, 3 => 1997 - Lapadas do Povo, 4 => 1999 - S&oacute; no For&eacute;vis, 5 => 2000 - MTV ao Vivo (Raimundos) ) ), 3 => array(nome => Skank , integrantes => array( 0 => Haroldo Ferreti , 1 => Henrique Portugal, 2 => Lelo Zaneti, 3 => Samuel Rosa ), discograa => array( 0 => 1993 Skank , 1 => 1994 Calango, 2 => 1996 O Samba Pocon&eacute;,
24

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

3 => 1998 Siderado, 4 => 2000 Maquinarama, 5 => 2000 MTV Ao Vivo em Ouro Preto, 6 => 2003 Cosmotron, 7 => 2005 Radiola, 8 => 2006 Carrossel, 9 => 2008 Beleza Pura: Nacional, 10 => 2009 Estandarte ) ) ); ?> Salve na pasta /var/www/ ou na pasta em que seu apache est congurado para executar scripts PHP. Para testar o array coloque ao m do arquivo o comando print_r( $discograa ); e execute o script a partir do seu navegador. Por exemplo, se o Apache+PHP estiver rodando na sua mquina, digite na barra de endereo do navegador: http://localhost/discoteca.php. Todos os dados do array devem ser exibidos na tela. Para visualiz-los de maneira ordenada basta clicar com o boto direito na tela do navegador e escolher a opo Cdigo-fonte. Feito isso apague a linha da funo print_r() e continue.

0.5 Gerar XML com o XMLWriter


Neste passo vamos criar mais um arquivo PHP. Este arquivo ir gerar um XML a partir do array. Informaremos qual a banda desejamos obter informaes por meio de uma varivel passada no endereo da pgina, ou seja, por Get. Vamos chamar este aquivo de xml.php e comear a escrev-lo: /* importar discoteca */ include( discoteca.php ); /* capturar string pelo mtodo GET */ $banda = $_GET[banda]; /* capturar ndice do array da banda */ for ( $i = 0 ; $i <= count($discoteca) ; $i++ ) { if( $discoteca[$i][nome] == $banda ) { $ID = $i; break; } } Aps importar a discoteca, vemos que a varivel $banda carregada. Ela ir conter o valor que ser passado pela URL aps o nome do arquivo xml.php da seguinte forma: Se digitarmos no navegador http://localhost/xml.php?banda=Angra ento a varivel $banda receber a string Angra.

25

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Na prxima parte do cdigo o ndice capturado percorrendo-se o array por meio de um for at que a banda com aquele nome passado na URL seja encontrado. Nos passos seguintes, dentro do mesmo arquivo, comearemos a utilizar o objeto XMLWriter do PHP: /* criar um objeto XMLWriter */ $xml = new XMLWriter; /* enviar xml para o buffer */ $xml->openURI(php://output); /* denir verso e codicao */ $xml->startDocument(1.0, UTF-8 ); /* identar documento */ $xml->setIndent(true); /* escrever elementos e atributos */ $xml->startElement(banda); //<banda> $xml->writeElement(nome, $discoteca[$ID][nome] ); // <nome>nome da banda</nome> Feitas as conguraes iniciais do XML como verso e codicao, que seria o mesmo que escrever <?xml version="1.0"encoding="UTF-8"?> , comeamos a escrita dos elementos e atributos. O mtodo startElement() abrir um elemento e o mtodo writeElement() abrir um elemento, atribuir um valor a ele e o fechar em seguida, ou seja, ser utilizado sempre que estivermos em uma posio nal da rvore, no nosso caso, os nomes. Veja nos comentrios ao lado qual a sada equivalente de cada mtodo. Agora, vamos terminar de preencher nosso arquivo XML: /* insere elemento dos integrantes */ $xml->startElement(integrantes); // <integrantes> for ( $i = 0 ; $i < count( $discoteca[$ID][integrantes] ) ; $i++ ) { $xml->startElement( musico );// <musico> $xml->writeAttribute(id, musico.$i ); // <musico id="id do musico $xml->writeElement(nome, $discoteca[$ID][integrantes][$i] ); // <nome>nome do musico</nome> $xml->endElement(); // </musico> } $xml->endElement(); // </integrantes> /* insere elemento discograca */ $xml->startElement(discograa); // <discograa> for ( $i = 0 ; $i < count( $discoteca[$ID][discograa] ) ; $i++ ) { $xml->startElement( album ); // <album> $xml->writeAttribute(id, album.$i ); $xml->writeElement(nome, $discoteca[$ID][discograa][$i] ); $xml->endElement(); // </album> } $xml->endElement(); // </discograa> /* fecha nodo raiz */
26

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

$xml->endElement(); // </banda> Veja que o mtodo endElement() no recebe argumentos, ele se encarrega de fechar corretamente o ltimo elemento aberto. Essa uma das vantagens de se utilizar este objeto em vez de criar um XML por meio de prints ou echos que aparentemente seria a forma mais rpida. Para nalizar vamos adicionar mais dois comandos para fechar o arquivo e descarreg-lo: /* fecha documento */ $xml->endDocument(); $xml->ush(); Salve e teste o script (Ex.: http://localhost/xml.php?banda=Angra). Abra o cdigo-fonte e veja se o arquivo exibido realmente o esperado.

0.6 Preparando a aplicao cliente


O nosso objetivo ao nal deste curso ter uma tabela com o nome de algumas bandas de forma que quando clicarmos no nome de uma delas, os dados referentes quela banda sero carregados nos respectivos campos da tabela, tudo isso sem precisarmos recarregar a pgina. Na prxima lio adicionaremos um termmetro que permitir que tambm envie informaes para o servidor sem recarregar sua tela. Vejamos como dever car a cara do programa nal:

Figura5 - Interface nal. Agora vamos criar 3 arquivos que, diferentemente dos criados na lio 2 em que eram executados no servidor, sero executados na mquina cliente, ou seja, pelo navegador. Estes arquivos
27

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

sero organizados da seguinte maneira: * ajax.js - contm as funes necessrias para carregar um objeto XMLHttpRequest em navegadores diversos e funes para carregar objetos DOM. * script.js - contm o script que ir carregar e ler o XML. * index.html - contm a interface com o usurio. Vamos preparar estes trs arquivos: ajax.js /* Funo utilizada para obter um objeto HttpRequest */ function getXmlHttpRequest() { var xmlHttp = null; try { // Objeto utilizando no Firefox, Opera e Safari xmlHttp = new XMLHttpRequest(); } catch(e) { try { // Objeto utilizado no Internet Explorer 6.0 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { // Objeto utilizado no Internet Explorer 5.5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } /* funo utilizada para abrir um objeto DOM */ function getXmlDoc( xml ) { if (window.DOMParser) { parser = new DOMParser(); xmlDoc = parser.parseFromString( xml , "text/xml"); return xmlDoc; } else { // Internet Explorer xmlDoc = new ActiveXObject( "Microsoft.XMLDOM"); xmlDoc.async= "false"; xmlDoc.loadXML( text ); return xmlDoc; } } script.js function carregarInfo( banda ) {
28

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

} index.html <html> <head> <title>Curso Ajax Avan&ccedil;ado</title> <script type="text/javascript"src="ajax.js</script> <script type="text/javascript"src="script.js</script> </head> <body> </body> </html>

0.7 Criando funo para requisitar o XML


Vamos abrir nosso arquivo script.js e criar o script que ir carregar o XML gerado pelo servidor. function carregarInfo( banda ) { /* criar objeto XMLHttpRequest */ xmlHttp = getXmlHttpRequest(); /* endereo do servidor */ url_servidor = ; /* arquivo que gera o XML*/ url = url_servidor + "xml.php"; /* nmero aleatrio para evitar cache */ url = url + "?id="+ Math.random(); /* abrir objeto informando mtodo http e adicionando a informao da banda */ xmlHttp.open( "GET", url + "&banda="+ banda , true); /* denir funo a ser chamada quando o XML estiver carregado */ xmlHttp.onreadystatechange = xmlPronto; /* enviar dados */ xmlHttp.send(); } No cdigo acima, ns criamos o objeto XMLHttpRequest e com ele conguramos o endereo do servidor (neste caso est em branco, pois est rodando na mquina local, insira o endereo do servidor entre as caso esteja rodando o servidor em outra mquina), o script gerador de XML, a forma de utilizao do objeto e a funo que ser usada quando o estado do objeto mudar. Para nosso exemplo, nos interessa o estado em que o arquivo est pronto, o estado 4.

29

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Abaixo vamos inserir a funo que exibir um alerta com o contedo do retornado pelo servidor, ou seja, o arquivo XML que se encontra no atributo responseText: function xmlPronto() { if ( xmlHttp.readyState == 4 ) { window.alert( xmlHttp.responseText ); } } Podemos testar o funcionamento do nosso programa adicionando ao nal deste mesmo arquivo a linha: carregarInfo( Angra ); e abrir pelo navegador o arquivo index.html ( http://localhost/index.html ). Aps carregada a pgina, ela ir fazer uma requisio ao servidor por AJAX. Terminada essa requisio um alerta deve ser exibido com o contedo do XML.

0.8 JavaScript e DOM


Agora que j geramos o XML e j conseguimos captur-lo, precisamos saber l-lo. Para isso utilizaremos o DOM, Document Object Model. Se voc j mexeu com AJAX e/ou XML j deve ter ouvido essa sigla em algum lugar. Ento o que e para que serve DOM? DOM uma conveno para representar arquivos HTML, XHTML e XML no formato de objetos independentemente de linguagem. Isso signica que agora que capturamos o XML vamos transform-lo em um objeto para que possamos acessar os campos, valores e atributos do documento. No arquivo ajax.js, criamos a funo getXmlDoc( xml ). Veja que os navegadores se utilizam de funes diferentes, mas no nal das contas geram o mesmo objeto que convencionado pelo DOM. A partir de um objeto DOM, podemos acessar um mtodo chamado getElementsByTagName("nome do elemento"). Esse mtodo retornar um com todos os elementos com o nome passado no argumento. Cada elemento ou cada posio do arrayarray representado por um novo objeto DOM. aqui que mora o maior problema. Por vezes esse cascateamento de arrays e objetos confunde a cabea do programador, ento o melhor ter sempre a rvore do seu XML em mos e prestar bastante ateno para diferenciar o que array e o que objeto para no se atrapalhar. Vamos gerar este objeto e fazer as operaes necessrias nos dados do arquivo dentro da nossa funo xmlPronto() do arquivo script.js. Ela dever car da seguinte forma: function xmlPronto() { if ( xmlHttp.readyState == 4 ) { /* carregar objeto DOM */ xml = getXmlDoc( xmlHttp.responseText ); /* adquirindo o elemento banda */
30

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

banda = xml.getElementsByTagName( "banda")[0]; /* adquirindo o elemento nome */ nome = banda.childNodes[1].childNodes[0].nodeValue; /* msico - numerao mpar no primeiro childNode */ musico = banda.getElementsByTagName( "integrantes")[0].childNodes[1]. childNodes[1].childNodes[0].nodeValue; /* album - numerao mpar no primeiro childNode */ album = banda.getElementsByTagName( "discograa")[0].childNodes[1]. childNodes[1].childNodes[0].nodeValue; } } Carregado o objeto DOM com o XML retornado pelo XMLHttpRequest, adquirimos o elemento "banda". Como este o primeiro e nico elemento com este nome ele ser armazenado na posio [0] do array. Seguindo nossa rvore, vamos capturar alguns elementos: * Nome: O nome a primeira posio do n lho(childNode), ento porque acessamos a posio [1] e no a posio [0]? Acessamos a posio [1] do n lho pois a posio zero onde estaria o valor do n banda. Nesse caso separamos um elemento chamado "nome"para este m. No n seguinte pegamos a posio [0] (objeto onde se encontra o valor) e por m acessamos o valor do n(nodeValue). * Msico: Agora dentro do objeto da banda vamos buscar o objeto integrantes banda.getElementsByTagName( "integrantes"). Como dentro da banda s existe um elementro integrantes acessamos a posio [0] do array. Agora vamos acessar a posio do array onde est o array do primeiro "musico"childNodes[1]. Dentro de "musico"vamos acessar "nome"childNodes[1]. E nalmente, vamos pegar o valor de nome. Este valor se encontra no objeto da posio zero. Este objeto possui o atributo nodeValue que iremos acessar childNodes[0].nodeValue da mesma forma como vimos no nome anterior. * lbum: Semelhante a msico. Perceba ento que caso queira ver vrios msicos ou vrias bandas, basta continuar a contagem em nmeros mpares da posio do primeiro n. Isso porque teremos sempre aos pares valor,elemento,valor,elemento.... Faa o teste: Acrescente a linha window.alert( nome++musico++album ); antes do m do if e faa como no tpico anterior para vericar o funcionamento do programa.

0.9 Exibindo dados em interface amigvel


Nosso programa est quase pronto. Vamos criar uma interface e adequar nosso script a ela se necessrio. Para comear criamos uma simples tabela em HTML no arquivo { index.html:} <html>
31

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

<head> <title>Curso Ajax Avan&ccedil;ado</title> <script type="text/javascript"src="ajax.js</script> <script type="text/javascript"src="script.js</script> </head> <body> <center> <table bgcolor="#0"width=80%> <tr> <td colspan=4 align=center><font size=4 color="#FFFFFF<b>BANDAS</b></font></td> </tr> <tr bgcolor="#EEEEEE <td align=center><a href=>Angra</a></td> <td align=center><a href=>Paralamas</a></td> <td align=center><a href=>Raimundos</a></td> <td align=center><a href=>Skank</a></td> </tr> <tr> <td colspan=4 align=center> <table width=100% id="info <tr bgcolor="#EEEEEE"height="35px <td align=center colspan=2 id="titulo_info <b><i>info</i></b> </td> </tr> <tr bgcolor="#EEEEEEindex.html: <td width=20%>Nome:</td> <td id="nome</td> </tr> <tr bgcolor="#EEEEEE <td width=20%>Integrantes:</td> <td id="integrantes</td> </tr> <tr bgcolor="#EEEEEE <td width=20%>Discograa:</td> <td id="discograa</td> </tr> </table> </td> </tr> </table> </center> </body> </html> Abra a pgina e veja se exibida de forma correta. Veja que na tabela "info"existem clulas com os IDs: nome, integrantes e discograa. So essas clulas que queremos preencher com as informaes da banda. Perceba tambm que o
32

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

links das bandas esto vazios <a href=> . Que tal nesse link chamarmos o nosso script. Assim quando clicar em uma banda suas informaes sero carregadas. Faa da seguinte forma <a href="javascript: carregarInfo(Angra) para todas as bandas e veja se o alerta que usamos para testar no tpico anterior funciona. Feito isto vamos retirar o alerta e alterar nosso script para que ele carregue os dados da banda automaticamente, vamos alterar a funo xmlPronto para que que da seguinte maneira: function xmlPronto() { if ( xmlHttp.readyState == 4 ) { /* carregar objeto DOM */ xml = getXmlDoc( xmlHttp.responseText ); /* adquirindo o elemento banda */ banda = xml.getElementsByTagName( "banda")[0]; /* adquirindo os elementos nome */ nome = banda.childNodes[1].childNodes[0].nodeValue; /* musico - numerao mpar no primeiro childNode */ musico = banda.getElementsByTagName( "integrantes")[0].childNodes[5].childNodes[1]. childNodes[0].nodeValue; /* album - numerao mpar no primeiro childNode */ album = banda.getElementsByTagName( "discograa")[0].childNodes[5].childNodes[1]. childNodes[0].nodeValue; /* preencher campos */ document.getElementById( nome ).innerHTML = nome; document.getElementById( integrantes ).innerHTML = musico; document.getElementById( discograa ).innerHTML = album; } } Neste ponto voc j deve saber o que faremos agora: testar. Atualize a pgina e clique no link da banda para ver os dados sendo exibidos no local correto. O interessante no AJAX permitir a criao de interfaces ricas em interatividade e amigveis ao usurio. Com isso em mente daremos um toque nal ao nosso programa colocando uma animao de carregando indicando ao usurio que estamos processando seu pedido. Copie uma imagem de carregando e salve-a na pasta do nosso programa. Agora basta mudar o contedo do nosso ttulo da tabela de informaes aps o mtodo send da funo carregarInfo() : /* mostrar animao de carregando */

33

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

document.getElementById( titulo_info ).innerHTML = <img src="loading.gif; E uma vez terminado o preenchimento dos campos vamos apagar a animao voltando o contedo original do ttulo em xmlPronto() : /* apgar animao de carregando */ document.getElementById( titulo_info ).innerHTML = <b><i>info</i></b>; Teste e veja sua primeira aplicao em AJAX propriamente dita rodando. Se as informaes estiverem carregando muito rpido insira a funo sleep(1); ao nal do aquivo xml.php para simularmos o tempo de resposta do servidor e assim poder ver a animao de carregando. Como exerccio que tal mostrar nos campos todos os integrantes e toda a discograa da banda? Um pouco trabalhoso, mas o usurio agradece no ter que carregar a pgina toda vez que estiver que fazer uma requisio.

0.10 Mtodos Get e Post


Existem vrios mtodos para se fazer uma requisio HTTP. Os 2 mais usados em formulrios so Get e Post. Nosso objetivo enviar dados, ento sabermos a diferena quanto ao envio de dados suciente para esta lio: * GET - Como visto em lies anteriores as variveis so passadas no endereo da pgina: http://endereco_ip/pagina.php?variavel1=valor_variavel_1&variavel2=valor_variavel_2&variavel3= valor_variavel3 o Para acess-las no PHP basta ler a string $_GET[variavel_x] * POST - Neste mtodo os dados so enviados no cabealho da mensagem de requisio HTTP. Dessa forma eles no so facilmente vistos pelo usurio. Este mtodo se torna ideal quando queremos trocar dados condenciais ou que no sejam eticamente corretos de serem expostos na internet. Qual usar? Recomenda-se utilizar o mtodo Get em casos que a informao apenas indica o caminho de um contedo. No nosso exerccio, passamos o nome da banda por Get porque apenas informamos qual banda queramos acessar e essa informao pblica. como se tivessemos criado uma pgina para cada banda e os links nos levariam para estas pginas que so abertas para quem quiser ver. Mas se quisermos enviar informaes como login, telefone, dados de uma votao recomenda-se o mtodo Post. No Post o usurio no poder ver as informaes a menos que esteja monitorando a rede. Isso signica que mesmo as informaes sendo passadas pelo cabealho no so criptografadas. Alm disso, os navegadores limitam o tamanho das URLs, sendo recomendvel no criar variveis maiores que 250 caracteres para passar via mtodo Get.

0.11 Enviando dados via POST


Vamos comear agora um exemplo de como utilizar o mtodo POST em um objeto XMLHttpRequest. Para isso vamos continuar nosso exerccio anterior adicionando um termmetro. O

34

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

termmetro ser 3 botes que o usurio poder clicar, dizendo se o site ruim, mdio ou bom. Essa informao ser escrita em um arquivo texto no servidor sem que o usurio perceba que uma requisio foi executada. Para formulrios em HTML basicamente preenchemos o atributo action do formulrio com POST. Por XMLHttpRequest no to simples, mas tambm no complicado. Para fazermos um exerccio, vamos comear criando uma funo no arquivo script.js semelhante a funo carregarInfo() chamada postDados(). function postDados( termometro ) { /* criar objeto XMLHttpRequest */ xmlHttpPost = getXmlHttpRequest(); /* nome do servidor */ url_servidor = ; /* arquivo que recer os dados */ url = url_servidor + "relatorio.php"; /* dados - variavel="valor da variavel"*/ dados = "termometro="+termometro; /* abrir objeto informando mtodo http e adicionando a informao do termometro */ xmlHttpPost.open( "POST", url, true ); /* informaes do cabealho */ xmlHttpPost.setRequestHeader( "Content-type", "application/x-www-form-urlencoded"); // codicao dos dados xmlHttpPost.setRequestHeader( "Content-length", dados.length ); // tamanho dos dados enviados pelo cabealho xmlHttpPost.setRequestHeader( "Connection", "close"); // fechar conexo aps cada requisio /* denir funcao a ser chamada quando a requisio terminar */ xmlHttpPost.onreadystatechange = dadosEnviados; /* enviar dados */ xmlHttpPost.send( dados ); } function dadosEnviados() { } A diferena comea quando se abre o objeto informando que vamos utilizar o mtodo Post do protocolo HTTP em open( "POST", url, true );. Em seguida,. comeamos a passar as informaes do cabealho, como a codicao usada, o tamanho dos dados. Por m, passamos a string de

35

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

dados como aguemento de send(). Percebe-se que o arquivo relatorio.php chamado. Ento nele que vamos ler a string $_POST[termometro] e escrever seu contedo juntamante com o IP do usurio em um aquivo texto. { relatorio.php} <?php /* nome do arquivo do relatorio */ $arquivo = relatorio.txt; /* endereo IP do cliente */ $IP = $_SERVER[REMOTE_ADDR]; /* voto enviado via POST */ $voto = $_POST[termometro]; /* string com informaes */ $dados = $IP . "$voto\n"; /* escrever informaes no relatrio */ if( le_put_contents( $arquivo, $dados, FILE_APPEND ) ) { /* simula atraso do servidor */ sleep(2); /* informar ao usurio que o arquivo foi escrito com sucesso */ echo Seu voto foi computado com sucesso!; } ?>

0.12 Adicionando interface


Estamos perto do m. Vamos adicionar mais 2 linhas nossa tabela do arquivo index.html. <tr bgcolor="#EEEEEE <td colspan=1>Term&ocirc;metro:</td> <td colspan=3> <input type=radio name="term"value="BOM"onChange=>Bom <input type=radio name="term"value="MEDIO"onChange=>M&eacute;dio <input type=radio name="term"value="RUIM"onChange=>Ruim </td> </tr> <tr bgcolor="#EEEEEE <td id="term_info"colspan=4>Vote agora!</td> </tr>

36

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Abra-o pelo navegador e a tabela dever apresentar seu aspecto nal:

Figura6 - Programa nal.

Vamos preencher o atributo onChange com a nossa funo para enviar dados por Post:onChange+"javascr postDados( this.value )". O atributo this.value passar ento o valor BOM, MEDIO ou RUIM para a varivel "termometro"da funo. Por m, vamos avisar ao usurio do status do envio dos seus dados assim como feito no exemplo anterior adicionando a seguinte linha aps send(dados): document.getElementById( term_info ).innerHTML = Aguarde enquanto computamos seu voto...; e preenchendo a funo dadosEnviados: function dadosEnviados() { /* mostrar informao sobre dados enviados */ document.getElementById( term_info ).innerHTML = xmlHttpPost.responseText; } Pronto, agora basta navegar. Caso tenha problemas, os erros de JavaScript so sempre exibidos no console de erros do seu navegador. Ele te ajudar a debugar o cdigo. Crie um arquivo em branco chamdo relatorio.txt e salve-o. Certique-se de que o usurio do apache tem permisso de leitura e escrita neste arquivo.

37