Ajax

Verso 1.0.0

Sumrio
I Sobre essa apostila 3 6 11 20
21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 22 22 22 22 23 23 23 23 24

II Informaes Bsicas III GNU Free Documentation License IV ajax

1 Introduco 2 Plano de ensino 2.1 Objetivo . . . 2.2 Pblico Alvo . 2.3 Pr-requisitos 2.4 Descrio . . 2.5 Metodologia . 2.6 Cronograma 2.7 Programa . . 2.8 Avaliao . . 2.9 Bibliograa .

3 Inicio 25 3.1 Inicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 3.2 Como funciona . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 4 Inicio 27 4.1 Pedidos do HTTP do AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 4.2 O Objeto XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 4.3 Seu browser suporta AJAX? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 5 Objeto XMLHttpRequest e Aplicao II 30 5.1 Objeto XMLHttpRequest Cont. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6 Aplicao AJAX + Javascript 34 6.1 Aplicao Ajax + Javacript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 6.2 Cdigo da funo GetXmlHttpObject() . . . . . . . . . . . . . . . . . . . . . . . . . . 35

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

7 Cdigo Final 37 7.1 Pgina Ajax HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

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 em 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. Criticas e sugestes construtivas so bem-vindas a qualquer tempo.

Autores
A autoria deste contedo, atividades e avaliaes de responsabilidade de Diego de Aquino Soares (diego@cdtc.org.br) . O texto original faz parte do projeto Centro de Difuso de Tecnolgia e Conhecimento, que vem sendo realizado pelo ITI em conjunto com outros parceiros institucionais, atuando em conjunto 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 atrves do email ouvidoria@cdtc.org.br, ou da home page da entidade, atrves 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,Diego de Aquino Soares (diego@cdtc.org.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.

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

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 de 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 de 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, Diego de Aquino Soares (diego@cdtc.org.br) . 7

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 fazendo ser respeitado pelo mesmo. 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 8

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 Forum 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. 9

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;

10

Parte III

GNU Free Documentation License

11

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

12

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.

13

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.

14

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 15

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 16

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

17

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,

18

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.

19

Parte IV

ajax

20

Captulo 1

Introduco
Este um curso bsico sobre AJAX. Nele mostraremos algumas funes do Javascript, que tero o tempo de execuo mais rpido, graas ao Ajax. necessrio ter conhecimentos de Javascript e HTML e o conhecimento de XML e PHP se voc quizer deixar sua pgina mais complexa.

21

Captulo 2

Plano de ensino
2.1 Objetivo
Qualicar tcnicos e programadores na linguagem de programao AJAX.

2.2 Pblico Alvo

Tcnicos e Programadores que desejam trabalhar com AJAX.

2.3 Pr-requisitos
Os usurios devero ser, necessariamente, indicados por empresas pblicas e ter conhecimento bsico acerca da lgica de programao.

2.4 Descrio
O curso ser realizado na modalidade Educao a Distncia e utilizar a Plataforma Moodle como ferramenta de aprendizagem. Ele ser dividido em tpicos e cada um deles composto por um conjunto de atividades (lies, fruns, glossrios, questionrios e outros) que devero ser executadas de acordo com as instrues fornecidas. O material didtico est disponvel on-line de acordo com as datas pr-estabelecidas em cada tpico. Todo o material est no formato de lies, e estar disponvel ao longo do curso. As lies podero ser acessadas quantas vezes forem necessrias. Aconselhamos a leitura de "Ambientao do Moodle", para que voc conhea o produto de Ensino a Distncia, evitando diculdades advindas do "desconhecimento"sobre o mesmo. Ao nal de cada semana do curso ser disponibilizada a prova referente ao mdulo estudado anteriormente que tambm conter perguntas sobre os textos indicados. Utilize o material de cada semana e os exemplos disponibilizados para se preparar para prova. Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida deve ser disponibilizada no frum ou enviada por e-mail. Diariamente os monitores daro respostas e esclarecimentos.

22

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

2.5 Metodologia
O curso est dividido da seguinte maneira:

2.6 Cronograma
Introduo Inicio Objeto XMLHttpRequest e Aplicao II Aplicao AJAX + Javascript Cdigo Final As lies contm o contudo principal. Elas podero ser acessadas quantas vezes forem necessrias, desde que esteja dentro da semana programada. Ao nal de uma lio, voc receber uma nota de acordo com o seu desempenho. Responda com ateno s perguntas de cada lio, pois elas sero consideradas na sua nota nal. Caso sua nota numa determinada lio for menor do que 6.0, sugerimos que voc faa novamente esta lio. Ao nal do curso ser disponibilizada a avaliao referente ao curso. Tanto as notas das lies quanto a da avaliao sero consideradas para a nota nal. Todos os mdulos caro visveis para que possam ser consultados durante a avaliao nal. Aconselhamos a leitura da "Ambientao do Moodle"para que voc conhea a plataforma de Ensino a Distncia, evitando diculdades advindas do "desconhecimento"sobre a mesma. Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida dever ser enviada no frum. Diariamente os monitores daro respostas e esclarecimentos.

2.7 Programa
O curso de Ajax oferecer o seguinte contedo: Introduo Inicio Objeto XMLHttpRequest e Aplicao II Aplicao AJAX + Javascript Cdigo Final

2.8 Avaliao
Toda a avaliao ser feita on-line. Aspectos a serem considerados na avaliao: Iniciativa e autonomia no processo de aprendizagem e de produo de conhecimento; 23

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Capacidade de pesquisa e abordagem criativa na soluo dos problemas apresentados. Instrumentos de avaliao: Participao ativa nas atividades programadas. Avaliao ao nal do curso. O participante far vrias avaliaes referente ao contedo do curso. Para a aprovao e obteno do certicado o participante dever obter nota nal maior ou igual a 6.0 de acordo com a frmula abaixo: Nota Final = ((ML x 7) + (AF x 3)) / 10 = Mdia aritmtica das lies AF = Avaliaes

2.9 Bibliograa
Site ofcial: www.w3schools.com

24

Captulo 3

Inicio
3.1 Inicio
AJAX uma abreviao para Asynchronous JavaScript and XML (JavaScript e XML Assncrono). No se trata de uma nova tecnologia, ao contrrio do que parece ser, trata-se de uma forma de juntar as tecnologias j existentes. O termo AJAX foi utilizado pela primeira vez por Jesse James Garrett em seu artigo AJAX: A New Approach to Web Applications (Ajax: Uma nova Aproximao para Aplicaes Web) em 18 de Fevereiro de 2005. Esse termo considerado o caminho inicial para quem pretende ingressar nos conhecimentos sobre AJAX. No entanto, essa forma de juntar as tecnologias j utilizadas veio antes mesmo da criao do termo AJAX. Tal forma j era utilizada pelo Google, pioneiro nessa nova maneira de aplicao web. No s o Google como a Adaptive Path, empresa americana, especializada em Web e em ferramentas e consultorias para tornar a experincia do usurio ao acessar um site ou aplicao Web mais agradvel. Nem mesmo o Google, nem muito menos a Adaptive Path, inventaram o Ajax, que na verdade no possui nenhum proprietrio. James Garret tambm no criou o Ajax, apenas criou uma abreviao, um "apelido", para a juno de novas tecnologias para facilitar a troca de informaes entre seus amigos e clientes desenvolvedores. Logo depois do artigo de James Garret e os diversos exemplos passados pelo Google a respeito da juno de novas tecnologias, tais como: GMail, Google Suggest e Google Maps, a tcnica por trs do Ajax ganhou fora por todo o mundo e graas a isso, vemos novas aplicaes,que anteriormente, eram impossveis de ser implementadas na web.

3.2 Como funciona

Uma aplicao Desktop possui uma riqueza de interfaces e tempos de resposta que estavam fora do alcance de uma aplicao Web, pela sua prpria natureza de funcionamento. O Ajax entra em cena para quebrar esta barreira e abrir as portas de novas possibilidades para as aplicaes Web [GARRET, 2005]. Para isso, o Ajax utiliza dos seguintes procedimentos: * usa XHTML e CSS (Cascading Style Sheets) para camada de apresentao personalizada; * usa DOM (Modelo de Objeto de Documento) para dinamismo e interatividade na interface grca; * usa XML XSLT para troca e manipulao de dados; 25

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

* usa o objeto XMLHttpRequest para recuperao assncrona de dados; * usa Javascript para juntar todas as partes. Normalmente, o modelo clssico de uma aplicao web, funciona da seguinte maneira: * o usurio realiza uma ao na interface (como exemplo, o clique em um boto). Com isso uma requisio enviada do HTTP de volta para o servidor web; * com isso, ocorre a execuo, por parte do servidor, tal como uma consulta a uma base de dados ou at mesmo um clculo; * aps essa execuo, o servidor retorna para o cliente uma resposta em HTML, a qual interpretada pelo browser. O que ocorre normalmente que enquanto o servidor est processando as informaes, o usurio no pode fazer nada alm de esperar pela resposta. O AJAX faz o processamento assncrono, diminuindo esse tempo de resposta entre servidor e usurio. No processamento sncrono, existe a espera do trmino de uma atividade para iniciar outra. J no assncrono (papel do ajax) as atividades podem ser executadas enquanto a primeira ainda est sendo processada.

26

Captulo 4

Inicio
Antes de aprender o ajax, necessrio que voc tenha o conhecimento bsico de: HTML/XHTML, JAVASCRIPT e um pouco de PHP. No h nada de novo para aprender, o AJAX usa tecnologias j existentes. Tecnologias, essas que so usadas h muito tempo por vrios desenvolvedores, como dito anteriormente.

4.1 Pedidos do HTTP do AJAX

Normalmente, em um cdigo de Javascript, se voc quer alguma informao de uma base de dados ou at mesmo de um arquivo de algum servidor, voc ter que utilizar um GET ou POST do HTML. Para que seja feito isso, o usurio ter que clicar no boto "Submit"para enviar ou pegar a informao, esperar o sevidor responder para s ento, uma pgina ser carregada com os resultados desejados pelo usurio. Com o servidor retornando uma nova pgina cada vez que o usurio utiliza o "Submit", faz com que, tradicionais aplicaes web execute a ao lentamente, tornando o processo no muito amigvel com o usurio. Com o AJAX, seu Javascript comunica-se direto com o servidor atravs do objeto do prprio Javascript XMLHttpRequest. Com o pedido HTTP, a pgina web pode fazer um pedido e obter a resposta do servidor web sem mesmo recarregar a pagina. O usurio permanecer na mesma pgina.

4.2 O Objeto XMLHttpRequest

Com o XMLHttpRequest, o desenvolvedor pode atualizar a pgina, com dados do servidor, mesmo depois dela ter sido carregada. AJAX cou popular com o Google em 2005 com o Google Suggest. Essa ferramenta do Google, usa o XMLHttpRequest para criar uma interface web muito dinmica da seguinte forma: quando voc comea a escrever na caixa de busca do Google, o Javascript envia o que foi escrito para um servidor e o servidor retorna uma lista de sugestes. O objeto XMLHttpRequest suportado na Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. Exemplos em AJAX Para entendermos como o AJAX funciona, vamos criar uma pequena aplicao AJAX.

27

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Primeiro vamos fazer um formulrio HMTL padro com dois campos: Nome e Hora. Feito isso, salve o arquivo criado como "Ajax.htm". Ex.1:

<html> <body> <form name = "Formulario"> Nome: <input type = "text" name = "NomeUsuario" /> Hora: <input type = "text" name = "hora" /> </form> </body> </hmtl>

4.3 Seu browser suporta AJAX?

A chave do AJAX o objeto XMLHttpRequest. No entanto, diferentes browsers utilizam diferentes mtodos para cria-lo. A Internet Explorer utiliza o ActiveXObject. J os demais browsers utilizam o XMLHttpRequest, objeto este presente no Javascript. Para criar esse objeto, em acordo com os diferentes browsers, vamos utilizar o "try and cash"do Javascript. Para isso, vamos d uma melhorada no arquivo "Ajax.htm"criado anteriormente. Ex.2:

<html> <body> <script type="text/javascript"> function FuncaoAjax() { var xmlHttp; try { // Opera 8.0+, Safari,Firefox xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
28

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

} </script>

} catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Seu browser no suporta AJAX!"); return false; } } }

<form name="Formulario"> Nome: <input type = "text" name = "NomeUsuario" /> Hora: <input type = "text" name = "hora" /> </form> </body> </html>
Vamos explicar agora o que foi feito nesse cdigo: -em primeiro lugar, em cada "try"atribumos varivel xmlHttp criada para armazenar o objeto XMLHttpRequest; -depois disso, tentamos criar o objeto "xmlHttp = new XMLHttpRequest()"para os browsers: Opera 8.0+, Safari ou Firefox. Caso haja alguma falha para criar esse objeto nesses browsers, tentamos criar na Internet Explorer com "xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")"que ser compatvel com a Internet Explorer 6.0+. Se mesmo assim falhar a tentativa da criao, utilizamos o xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") que dar certo, se utilizarmos o Explorer 5.5+; -Se, ainda depois de todas essas tentativas, no der certo, porque o usurio utiliza um browser muito ultrapassado. Logo, mostra-se uma mensagem de erro, falando que o browser no suporta o AJAX. Obs1: claro que os browser modernos utilizados atualmente suportam essa tecnologia fazendo com que a parte do cdigo "alert("Seu browser no suporta AJAX!");"dicilmente ser mostrada. Obs2: Esse codigo, pode parecer longo e complexo, no entanto, ele ser usado diversas vezes quando voc quiser criar o objeto XMLHttpRequest. Logo, basta utilizar esse mesmo cdigo utilizando o "copiar e colar"toda vez que voc quiser criar esse objeto, pois esse cdigo ser compatvel com qualquer browser popular, tais como: Internet Explorer, Opera, Firefox e Safari.

29

Captulo 5

Objeto XMLHttpRequest e Aplicao II

5.1 Objeto XMLHttpRequest Cont.
Antes de continuarmos a falar sobre esse objeto e de enviar determinados dados, utilizando o mesmo, voc tem que saber trs propriedades do XMLHttpRequest. Primeira propriedade Depois de pedir ao servidor, ser necessrio uma funo que possa receber um dado que retornado pelo servidor. A propriedade "onreadystatechange"armazena a funco que ir processar a resposta vinda do servidor. Ex.:

xmlHttp.onreadystatechange=function() { // Algum codigo }

Segunda propriedade A propriedade "readyState"segura o status da resposta do servidor. Cada vez que essa propriedade muda, ocorre a execuo da propriedade onreadystatechange. Listaremos agora alguns valores que podem ser usado nessa propriedade: Estado 0 => O pedido no inicializado Estado 1 => Houve um set up do pedido Estado 2 => O pedido foi enviado Estado 3 => O pedido est em processo Estado 4 => O pedido est completo Exemplo dessa propriedade:

xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Apanha o dado da resposta do servidor } }

Obs.: Veja que a propriedade "readyState"est sendo usada em conjunto com a onreadystatechange, para saber se o dado vindo do servidor completo. Terceira propriedade 30

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

Os dados enviados para o servidor pode ser recuperado utilizando a propriedade "responseText". No cdigo feito no incio da lio, vamos escolher um valor para o campo "sobrenome"igual a "responseText". Ex.:

xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.formulario.hora.value=xmlHttp.responseText; } }

Enviar um pedido para o servidor Para enviarmos um pedido para o servidor, necessrio que utilizemos dois mtodos: open() e o send(). O primeiro mtodo recebe trs argumentos. O primeiro argumento dene qual mtodo devemos usar quando formos enviar o pedido (GET ou POST). O segundo argumento especica a URL da parte do programa do servidor. E o terceiro argumento especica que o pedido deve ser assncrono. O mtodo "send()"envia o pedido para o servidor. O cdigo para esses mtodos seria o seguinte:

xmlHttp.open("GET","hora.asp",true); xmlHttp.send(null);
Obs: Suponha que o arquivo HTML e ASP esteja no mesmo diretrio. Agora, necessrio saber quando vamos utilizar a funo AJAX, ou seja, quando ela ser executada. Deixaremos essa funo rodando "por trs da cena"no momento que o usurio estiver digitando no campo nome do nosso cdigo criado no incio do curso. Ex.(Parte do cdigo) :

<form name="Formulario"> Nome: <input type="text" onkeyup="FuncaoAjax();" name="nome" /> Hora: <input type="text" name="hora" /> </form>
Feito isso, agora, vamos d um "upgrade"no nosso cdigo criado no inicio do curso. Ex.(Cdigo melhorado!) :

<html> <body> <script type="text/javascript"> function FuncaoAjax() { var xmlHttp; try

31

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

{ if(xmlHttp.readyState==4) { document.formulario.hora.value=xmlHttp.responseText; } } xmlHttp.open("GET","hora.asp",true); xmlHttp.send(null); </script>

{ // Opera 8.0+, Safari,Firefox xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Seu browser no suporta AJAX!"); return false; } } } } xmlHttp.onreadystatechange=function()

<form name="Formulario"> Nome: <input type="text" onkeyup="FuncaoAjax();" name="nome" /> Hora: <input type="text" name="hora" /> </form> </body> </html>
Criaremos agora um script que mostrar a hora atual do sevidor. A propriedadade responseText, explicada anteriormente ir armazenar os dados enviados pelo servidor. Vamos mostrar agora o tempo atual. O cdigo hora.asp seria esse: 32

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

<% response.expires=-1 response.write(hora) %>

Obs.: A propriedade expires dene quanto tempo uma pgina ser armazenada em um navegador antes da expirao. Se um usurio retorna para uma mesma pgina antes de expir-la, a verso armazenada mostrada. response.expires=-1 indica que a pgina nunca ser armazenada. Basicamente isso que precisamos saber sobre o Ajax, a prxima lio ser a montagem de algum cdigo mais complexo, utilizando como exemplo o Javascript.

33

Captulo 6

Aplicao AJAX + Javascript

6.1 Aplicao Ajax + Javacript
O que faremos a seguir o seguinte: Pediremos para o usurio digitar alguma letra em um campo. Com isso ele ter como resposta algumas sugestes do que ele esteja querendo. No Exemplo, usaremos nome de msica. O usurio digitar uma letra no campo "Banda"e embaixo ser listado algumas opes. Antes de prosseguirmos com a lio, vamos mostrar algumas funes que sero teis para a aplicao de Ajax em um cdigo de Javascript. Comearemos com a funo: "MostraOpcao()". Tal funo em Javascript, onde o lugar dela na tag head></head>"do html. Agora veja como o cdigo dessa funo:

<form> Banda: <input type="text" id="txt1" onkeyup="MostraOpcao(this.value)"> </form> <p> Opes: <span id="txthint"></span></p>
Como pode ser observado, trata-se de um cdigo html com um campo de entrada chamado "txt1". O pargrafo (<p> </p>) abaixo um span chamado "txthint". Esse span utilizado para guardar dados recuperados do servidor web. Quando o usurio insere um dado, a funo "MostraOpcao" executada. A execuo dessa funo provocada pelo evento onkeyup. Isto , toda vez que o usurio escreve alguma coisa no campo "Banda", a funo "MostraOpcao" chamada.

function MostraOpcao(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) {

34

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

alert ("Seu Browser no suporta AJAX!"); return; } var url="Opcao.php"; //1) url=url+"?q="+str; //2) url=url+"&sid="+Math.random(); //3) xmlHttp.onreadystatechange=stateChanged; //4) xmlHttp.open("GET",url,true); //5) xmlHttp.send(null); //6) }
A funo executada toda vez que uma letra (caractere) escrito no campo "Banda:", Caso o campo for vazio (str == 0) a funo simplesmente limpa o ndice guardado dos dados recuperados do servidor web do txtHint. Seguindo a condio imposta para que ocorra a execuo da funo (str > 0), mostraremos agora o que a funo faz: 1) dene a url que ser enviada para o servidor; 2) adiciona um parmetro "q"para a url com o ndice do campo de entrada; 3) adiciona um nmero aleatrio para impedir que o usurio use um arquivo fechado; 4) cria um objeto XMLHTTP, e diz para o objeto executar uma funo chamada stateChanged quando uma mudana provocada; 5) abre uma URL, esta funo possui trs parmetros: - mtodo: indica se a passagem de parmetros para a URL ser via POST ou GET, neste caso o GET; - URL: endereo que ser acessado; - assncrono: se verdadeiro, executa assncrono, ou seja, no espera pelo retorno da URL para continuar executando o script. Se falso o browser car ?travado? enquanto o script executado. 6) envia uma resposta HTTP para o servidor. Como j foi mencionado, a funo "GetXmlHttpObject()" utilizada para testar se o Objeto xmlHttp poder ser criado em diferentes browsers.

6.2 Cdigo da funo GetXmlHttpObject()

function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer
35

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;

A funo stateChange() tambm est presente nesse cdigo, sua utilizao se d quando ocorre alguma mudana no estado do objeto xmlhttp e o cdigo dela esse:

function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }

Obs: Quando o estado muda para quatro (Pedido completo) o ndice do que est armazenado preenchido pela propriedade responseText, que como foi mecionado na lio anterior, tem como funo recuperar os dados enviados para o servidor.

36

Captulo 7

Cdigo Final
7.1 Pgina Ajax HTML
O cdigo abaixo, em html e contm um link para um cdigo javascript que ser mostrado logo mais. No haver coisas muito novas nessa lio, simplesmente reunimos os cdigos feitos anteriormente e demos uma otimizada nele.

<html> <head> <script src="NomeBanda.js"></script> </head> <body> <form> Banda: <input type="text" id="txt1" onkeyup="MostraOpcao(this.value)"> </form> <p> Opes: <span id="txthint"></span></p> </body> </html>
O cdigo que est salvo como "NomeBanda.js" dessa forma:

var xmlHttp function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) {

37

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

alert ("Se browser no suporta AJAX!"); return; } var url="Opcao.php"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
Com isso encerramos a juno das outras funes feitas anteriormente. Logo abaixo est o cdigo da url que ser enviada para o servidor (Opcao.php).

<?php $a[]="Aerosmith";
38

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

$a[]="Angra"; $a[]="Araketu"; $a[]="Dead fish"; $a[]="Detonautas"; $a[]="Deftones"; $a[]="Incubus"; $a[]="Inimigos da HP"; $a[]="Natiruts"; $a[]="Biquini Cavadao"; $a[]="Pitty"; $a[]="JorgeBen"; $a[]="Engenheiros"; $a[]="Legio Urbana"; $a[]="Capital Inicial"; $a[]="Paralamas"; $a[]="REM"; $a[]="Metallica"; $a[]="Greenday"; $a[]="ACDC"; $a[]="Nazareth"; $a[]="PinkFloyd"; $a[]="Pink"; $a[]="Fagner"; $a[]="Nirvana"; $a[]="Pantera"; $a[]="Pisirico"; $a[]="Vagabanda"; $a[]="Vinny"; $a[]="Catedral"; //pegando o parametro "q" da url $q=$_GET["q"]; //ve se as opes do array tem tamanho q>0 if (strlen($q) > 0) { $opcao=""; for($i=0; $i<cont($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($opcao=="") { $opcao=$a[$i]; } else { $opcao=$opcao." , ".$a[$i];
39

CDTC

Centro de Difuso de Tecnologia e Conhecimento

Brasil/DF

// Se nenhuma opo for encontrada ou algo foi digitado de forma incorreta // Ocorrer a mensagem "sem sugestes". if ($hint == "") { $response="Sem sugestes!"; } else { $OpcaoEscolhida=$opcao; } //saida da resposta echo $OpcaoEscolhida; ?>
Com isso encerramos o curso de AJAX. Agora basta usar a criatividade e criar diversas pginas otimizidas e com rpida resposta. Aprofunde mais utilizando PHP, ASP, CSS, entre outras linguagens para aplicao web.

40