You are on page 1of 41

Ajax

Versão 1.0.0

Sumário

I Sobre essa apostila 3

II Informações Básicas 6

III GNU Free Documentation License 11

IV ajax 20

1 Introducão 21

2 Plano de ensino 22
2.1 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.2 Público Alvo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.3 Pré-requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.4 Descrição . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.5 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.6 Cronograma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.7 Programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.8 Avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.9 Bibliografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

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 Aplicação II 30
5.1 Objeto XMLHttpRequest Cont. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

6 Aplicação AJAX + Javascript 34
6.1 Aplicação Ajax + Javacript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
6.2 Código da função GetXmlHttpObject() . . . . . . . . . . . . . . . . . . . . . . . . . . 35

1

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

7 Código Final 37
7.1 Página Ajax HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2

Parte I

Sobre essa apostila

3

cdtc. Licença Copyright ©2006.cdtc. cujo teor integral encontra-se aqui reproduzido na seção de mesmo nome. Autores A autoria deste conteúdo. atuando em conjunto com as universidades federais brasileiras que tem produzido e utilizado Software Livre. atividades e avaliações é de responsabilidade de Diego de Aquino Soares (diego@cdtc. apoiando inclusive a comunidade Free Software junto a outras entidades no país. Informações adicionais podem ser obtidas atráves do email ouvidoria@cdtc. 4 . ou da home page da entidade. A copy of the license is included in the section entitled GNU Free Documentation License.org.br).br. Os autores. O texto original faz parte do projeto Centro de Difusão de Tecnolgia e Conhecimento. bem como o ITI e seus parceiros.br. distribute and/or modify this document under the terms of the GNU Free Documentation License. Criticas e sugestões construtivas são bem-vindas a qualquer tempo.Diego de Aquino Soares (diego@cdtc.br) . A revisão e alteração vem sendo realizada pelo CDTC (suporte@cdtc. não se responsabilizam direta ou indiretamente por qualquer prejuízo oriundo da utilização do material aqui contido.org. O formato original deste material bem como sua atualização está disponível dentro da licença GNU Free Documentation License.org. Version 1. que vem sendo realizado pelo ITI em conjunto com outros parceiros institucionais.org.br. desde outubro de 2006.org. Garantias O material contido nesta apostila é isento de garantias e o seu uso é de inteira responsabi- lidade do usuário/leitor. disponíveis em diversos sites ou originalmente produzido no CDTC em http://www. tendo inclusive uma versão traduzida (não oficial).1 or any later version published by the Free Software Foundation.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF Conteúdo O conteúdo dessa apostila é fruto da compilação de diversos materiais livres publicados na in- ternet.org. atráves da URL http://www. Permission is granted to copy. with the Invariant Chapter being SOBRE ESSA APOS- TILA.br) .

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF 5 .

Parte II Informações Básicas 6 .

político. profissionais de suporte e funcionários públicos usuários.org. ferramentas para desenvolvimento de produtos de software não proprietários e de seu código fonte livre. criando grupos de funcionários públicos que irão treinar outros funcionários públicos e atuar como incentivadores e defensores de produtos de software não proprietários e código fonte aberto. estimulando e incentivando o mercado nacional a adotar novos modelos de negócio da tecnologia da informação e de novos negócios de comunicação com base em software não-proprietário e de código fonte aberto. São elas: • Licenças para cópia de material disponível • Os 10 mandamentos do aluno de Educação a Distância • Como participar dos foruns e da wikipédia • Primeiros passos É muito importante que você entre em contato com TODAS estas informações. oferecendo treinamento específico para técnicos. articulando redes de terceiros (dentro e fora do governo) fornecedoras de educação. 7 . pesquisa. seguindo o roteiro acima. cultural. Objetivo Específico Auxiliar o Governo Federal na implantação do plano nacional de software não-proprietário e de código fonte aberto. Licença Copyright ©2006. identificando e mobilizando grupos de formadores de opinião dentre os servidores públicos e agentes políticos da União Federal. tecnológico e econômico da sociedade brasileira.br) . em proveito do desenvolvimento social.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF Sobre o CDTC Objetivo Geral O Projeto CDTC visa a promoção e o desenvolvimento de ações que incentivem a dissemina- ção de soluções que utilizem padrões abertos e não proprietários de tecnologia. desenvolvimento e teste de pro- dutos de software livre. Guia do aluno Neste guia. Diego de Aquino Soares (diego@cdtc. você terá reunidas uma série de informações importantes para que você comece seu curso. ofe- recendo conteúdo técnico on-line para serviços de suporte.

O ambiente virtual não controla a sua dedicação. Versão 1. notícias). • 4. dos colegas e dos professores. Uma cópia da licença está inclusa na seção entitulada "Licença de Docu- mentação Livre GNU".1 ou qualquer versão posterior públicada pela Free Software Foundation.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF É dada permissão para copiar. Flexibilidade e adaptação: requisitos necessário à mudança tecnológica. distribuir e/ou modificar este documento sob os termos da Licença de Documentação Livre GNU.chave na comunicação pela Internet. breve e transparente é ponto . ser participativo no ensino a distân- cia conta muitos pontos. Comportamentos compatíveis com a etiqueta: mostrar-se interessado em conhecer seus colegas de turma respeitando-os e fazendo ser respeitado pelo mesmo. • 3. Responsabilidade: ser responsável por seu próprio aprendizado. Como participar dos fóruns e Wikipédia Você tem um problema e precisa de ajuda? Podemos te ajudar de 2 formas: A primeira é o uso dos fóruns de notícias e de dúvidas gerais que se distinguem pelo uso: . Habilidade e disposição para operar programas: ter conhecimentos básicos de Informá- tica é necessário para poder executar as tarefas. com o Capitulo Invariante SOBRE ESSA APOSTILA. pois irá colaborar para o processo ensino-aprendizagem pessoal. • 10. • 5. As mensagens postadas nele são enviadas a 8 . O fórum de notícias tem por objetivo disponibilizar um meio de acesso rápido a informações que sejam pertinentes ao curso (avisos. Organização pessoal: planejar e organizar tudo é fundamental para facilitar a sua revisão e a sua recuperação de materiais. Acesso à Internet: ter endereço eletrônico. Vontade para aprender colaborativamente: interagir. • 9. um provedor e um equipamento adequado é pré-requisito para a participação nos cursos a distância. aprendizagens e descobertas. Objetividade em sua comunicação: comunicar-se de forma clara. • 6. mas reflete os resultados do seu esforço e da sua colaboração. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigações e realizá-las em tempo real. • 2. • 8. Os 10 mandamentos do aluno de educação online • 1. • 7. Curiosidade e abertura para inovações: aceitar novas idéias e inovar sempre.

fica muito mais fácil obter respostas. Se você receber uma mensagem com algum tópico que saiba responder. tolerante. ela oferece um ótimo suporte a processos de aprendizagem colaborativa. • Entrar nas lições seguindo a seqüência descrita no Plano de Ensino. Uma wiki é uma página web que pode ser editada colaborativamente.http://pt. se o monitor ou algum outro participante tiver uma informação que interesse ao grupo. Assim. não se preocupe com a formalização ou a gramática. positivo. uma experiência grandiosa de construção de uma enciclopédia de forma colaborativa. amável. O tutor ideal é um modelo de excelência: é consistente. é paciente. É recomendado que você faça uso do Forum de dúvidas gerais que lhe dá recursos mais efetivos para esta prática. reporte ao Fórum de Dúvidas Gerais. A maior wiki na web é o site "Wikipé- dia". editar.org/wiki/ Agradecemos antecipadamente a sua colaboração com a aprendizagem do grupo! Primeiros Passos Para uma melhor aprendizagem é recomendável que você siga os seguintes passos: • Ler o Plano de Ensino e entender a que seu curso se dispõe a ensinar.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF todos participantes. Assim. aceita as idéias dos estudantes. O fórum de dúvidas gerais tem por objetivo disponibilizar um meio fácil. A segunda forma se dá pelas Wikis: . apreciativo. já que todos podem ajudar. por pessoas de todas as partes do mundo. imparcial. As versões antigas vão sendo arquivadas e podem ser recuperadas a qualquer momento que um dos participantes o desejar. justo e profissional nos respectivos valores e atitudes. Acesse-a em português pelos links: • Página principal da Wiki . Responda! E não se esqueça de que antes de abrir um novo tópico é recomendável ver se a sua pergunta já foi feita por outro participante. . se o que você deseja é resolver alguma dúvida ou discutir algum tópico específico do curso. respeitador. Perfil do Tutor Segue-se uma descrição do tutor ideal. Assim. favor postá-la aqui. rápido e interativo para solucionar suas dúvidas e trocar experiências. incentiva mas é honesto. 9 . As mensagens postadas nele são enviadas a todos participantes do curso. baseada no feedback de alunos e de tutores.wikipedia. • Ler a Ambientação do Moodle para aprender a navegar neste ambiente e se utilizar das ferramentas básicas do mesmo. • Qualquer dúvida. compreensivo e pronto a ajudar. apagar textos. qualquer par- ticipante pode inserir. Porém. pessoal. ou seja.

• ajuda o estudante a alcançar os seus objetivos. de ameaça e de nervossismo’) • dá uma ajuda complementar para encorajar um estudante em dificuldade. • gosta que lhe façam perguntas adicionais. mas corrige-as amavelmente’. • acima de tudo. diz um estudante. mas de forma agradável (em contraste com um reparo de um estudante: ’os comentários deixam-nos com uma sensação de crítica. • é flexível quando necessário. devolve os trabalhos rapidamente. • tece comentários completos e construtivos. talvez numa fase menos interessante para o tutor). para a maior parte dos alunos. constitui o ponto central do processo de aprendizagem. • mostra um interesse genuíno em motivar os alunos (mesmo os principiantes e. • escreve todas as correções de forma legível e com um nível de pormenorização adequado. • esclarece pontos que não foram entendidos. é crucial. ou corretamente aprendidos anteriormente. e.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF A classificação por um tutor desta natureza proporciona o melhor feedback possível. por isso. e do estilo de classificação que irá utilizar.’ Este tutor ou instrutor: • fornece explicações claras acerca do que ele espera. 10 . • identifica as nossas falhas. ’e explica por- que motivo a classificação foi ou não foi atribuída’.

Parte III GNU Free Documentation License 11 .

esta Licença mantém para o autor e editor uma forma de ter crédito por seu trabalho. 59 Temple Place. nós esperamos que esta tradução ajude falantes de português a entenderem melhor a GFDL. It was not published by the Free Software Foundation. que é um copyleft para software livre. Ela não é publicada pela Free Software Foundation.apenas o texto original em Inglês da GNU FDL faz isso.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF (Traduzido pelo João S. sem ser considerado responsável pelas modificações feitas por terceiros. mas não é permitido alterá-lo. Inc. comercialmente ou não. independentemente do assunto ou se ele é publicado como um livro impresso. livro-texto ou outro documento escrito "livre"no sentido de liberdade: assegurar a qualquer um a efetiva liberdade de copiá-lo ou redistribui-lo. and does not legally state the distribution terms for software that uses the GFDL–only the original English text of the GFDL does that. INTRODUÇÃO O propósito desta Licença é deixar um manual. por que software livre precisa de documentação livre: um programa livre deve ser acompanhado de manuais que provenham as mesmas liberdades que o software possui. Secundariamente. Bueno através do CIPSGA em 2001) Esta é uma tradução não oficial da Licença de Documentação Livre GNU em Português Brasi- leiro. Esta Licença é um tipo de "copyleft"("direitos revertidos"). Entretanto. Março de 2000 Copyright (C) 2000 Free Software Foundation. Ela complementa a GNU Licença Pública Ge- ral (GNU GPL). However. Mas esta Licença não está restrita a manuais de software. we hope that this translation will help Portuguese speakers understand the GFDL better. O "Documento"abaixo se refere a qualquer manual ou texto. Nós fizemos esta Licença para que seja usada em manuais de software livre. This is an unofficial translation of the GNU General Documentation License into Brazilian Por- tuguese. MA 02111-1307 USA É permitido a qualquer um copiar e distribuir cópias exatas deste documento de licença. Qualquer pessoa do público é um 12 . ela pode ser usada para qualquer trabalho em texto. o que significa que derivações do documento precisam ser livres no mesmo sentido. APLICABILIDADE E DEFINIÇÕES Esta Licença se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelo detentor dos direitos autorais dizendo que ele pode ser distribuído sob os termos desta Licença.1. Suite 330. Licença de Documentação Livre GNU Versão 1. Boston. com ou sem modificações. Nós recomendamos esta Licença prin- cipalmente para trabalhos cujo propósito seja de introdução ou referência. O. e não se aplica legalmente a distribuição de textos que usem a GFDL .

formatos proprietários que podem ser lidos e editados apenas com processadores de texto proprietários. quer copiada exatamente. na nota que diz que o texto é publicado sob esta Licença. ou de posições legais. Os "Textos de Capa"são certos trechos curtos de texto que são listados. Para trabalhos que não tenham uma página do título. Essa relação poderia ser uma questão de ligação histórica com o assunto. As "Seções Invariantes"são certas Seções Secundárias cujos títulos são designados. "Página do Título"significa o texto próximo da aparição mais proe- minente do título do trabalho. SGML ou XML usando uma DTD disponibilizada publicamente. Uma cópia "Transparente"do Documento significa uma cópia que pode ser lida automatica- mente. e HTML gerado automaticamente por alguns editores de texto com finalidade apenas de saída. formato de entrada do Texinfo. SGML ou XML para os quais a DTD e/ou ferramentas de processamento e edição não estejam disponíveis para o público. se o Documento é em parte um livro texto de matemática. compatível com os padrões. éticas ou políticas relacionadas ao mesmo. Formatos opacos incluem PostScript. mais quaisquer páginas subsequentes quantas forem necessárias para conter. Exemplos de formatos que podem ser usados para cópias Transparentes incluem ASCII sim- ples sem marcações. 13 . a página do título propriamente dita. representada num formato cuja especificação esteja disponível ao público geral. e que seja passível de servir como entrada a formatadores de texto ou para tradução automática para uma variedade de formatos que sirvam de entrada para formatadores de texto. a Seção Secundária pode não explicar nada de matemática). para um livro impresso. como Textos de Capa Frontal ou Textos da Quarta Capa.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF licenciado e é referida como "você". A "Página do Título"significa. Uma "Versão Modificada"do Documento se refere a qualquer trabalho contendo o documento ou uma parte dele. ou matérias relaci- onadas. formato de entrada do LaTex. o material que esta Licença requer que apareça na página do título. na nota que diz que o Documento é publicado sob esta Licença. Uma "Seção Secundária"é um apêndice ou uma seção inicial do Documento que trata ex- clusivamente da relação dos editores ou dos autores do Documento com o assunto geral do Documento (ou assuntos relacionados) e não contém nada que poderia ser incluído diretamente nesse assunto geral (Por exemplo. Uma cópia que não é "Transparente"é chamada de "Opaca". comerciais. e projetado para ser modificado por pessoas. precedendo o início do corpo do texto. como sendo de Seções Invariantes. Uma cópia feita em um formato de arquivo outrossim Transparente cuja constituição tenha sido projetada para atrapalhar ou de- sencorajar modificações subsequentes pelos leitores não é Transparente. PDF. cujos conteúdos possam ser vistos e editados diretamente e sem mecanismos especiais com editores de texto genéricos ou (para imagens compostas de pixels) programas de pintura genéricos ou (para desenhos) por algum editor de desenhos grandemente difundido. e HTML simples. de forma legível. quer com modificações e/ou traduzida em outra língua. filosóficas.

e Textos da Quarta Capa na capa de trás. pode ser tratado como cópia exata em outros aspectos. Se você utilizar o segundo método. É pedido. e a nota de licença do Documento obrigar Textos de Capa. quaisquer que sejam. Você pode adicionar outros materiais às capas. e que você não acres- cente nenhuma outra condição. todos esses Textos de Capa: Textos de Capa da Frente na capa da frente. de forma comercial ou não comercial. quando iniciar a distribuição de cópias Opacas em quantidade. e continuar os outros nas páginas adjacentes. você pode aceitar com- pensação em troca de cópias. ou informar. A capa da frente precisa apresentar o título com- pleto com todas as palavras do título igualmente proeminentes e visíveis. Fazer cópias com modificações limitadas às capas. FAZENDO CÓPIAS EM QUANTIDADE Se você publicar cópias do Documento em número maior que 100. Se os textos requeridos em qualquer das capas for muito volumoso para caber de forma legível. você precisará tomar cuidados razoavel- mente prudentes. Você não pode usar medidas técnicas para obstruir ou controlar a leitura ou confecção de cópias subsequentes das cópias que você fizer ou distribuir. às desta Licença. você precisará incluir as cópias em capas que tragam. cada cópia Opaca a localização de uma cópia Transparente completa do Documento acessível publicamente em uma rede de computadores. você precisa ou incluir uma cópia Transparente que possa ser lida automaticamente com cada cópia Opaca. Entretanto. Você também pode emprestar cópias. à qual o público usuário de redes tenha acesso a download gratuito e anônimo utilizando padrões públicos de protocolos de rede. e a nota de licença dizendo que esta Licença se aplica ao documento estejam reproduzidas em todas as cópias. Ambas as capas também precisam identificar clara e legivelmente você como o editor dessas cópias. você deve colocar os primeiros (tantos quantos couberem de forma razoável) na capa verdadeira. mas não é obrigatório. para lhes dar uma oportunidade de prover você com uma versão atualizada do Documento. e também pode exibir cópias publicamente.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF FAZENDO CÓPIAS EXATAS Você pode copiar e distribuir o Documento em qualquer meio. você também precisa respeitar as condições da seção 3. as notas de copyright. 14 . Se você publicar ou distribuir cópias Opacas do Documento em número maior que 100. tanto quanto estas preservem o título do documento e satisfaçam a essas condições. em ou com. Se você distribuir uma quantidade grande o suficiente de cópias. desde que esta Licença. para assegurar que esta cópia Transparente vai permanecer acessível desta forma na localização especificada por pelo menos um ano depois da última vez em que você distribuir uma cópia Opaca (direta- mente ou através de seus agentes ou distribuidores) daquela edição para o público. que você contate os autores do Documento bem antes de redistribuir qualquer grande número de cópias. sob as mesmas condições colocadas acima. clara e legivelmente.

dado no Documento para acesso público a uma cópia Transparente do Documento. e adicionar à mesma um item dizendo pelo menos o título. E. se houver alguma) um título distinto daquele do Do- cumento. Incluir. uma nota de licença dando ao público o direito de usar a Versão Modificada sob os termos desta Licença. Em qualquer seção entitulada "Agradecimentos"ou "Dedicatórias". Preservar todas as notas de copyright do Documento. e editor do Documento como dados em sua Página de Título. e da mesma forma. e daqueles de versões anteriores (que deveriam. você precisa fazer o seguinte na versão modificada: A. ano. conjuntamente com pelo menos cinco dos autores principais do Documento (todos os seus autores principais. Além disso. ano. estarem listados na seção "Histórico do Documento"). criar uma dizendo o título. Colocar na Página de Título o nome do editor da Versão Modificada. Listar na Página de Título. então adicionar um item descrevendo a Versão Modificada. autores. Preservar o endereço de rede. ou se o editor original da versão a que ela se refira der sua permissão. como autores. H. na forma mostrada no tópico abaixo. B. como o editor. C. Você pode omitir uma localização na rede para um trabalho que tenha sido publicado pelo menos quatro anos antes do Documento. com a Versão Modificada tomando o papel do Documento. J. Se não houver uma sessão denominada "Histórico"no Documento. imediatamente depois das notas de copyright. e seu título. se houvesse algum.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF MODIFICAÇÕES Você pode copiar e distribuir uma Versão Modificada do Documento sob as condições das se- ções 2 e 3 acima. Você pode usar o mesmo título de uma versão anterior se o editor original daquela versão lhe der permissão. F. de forma a licenciar a distribuição e modificação da Versão Modificada para quem quer que possua uma cópia da mesma. K. desde que você publique a Versão Modificada estritamente sob esta Licença. Adicionar uma nota de copyright apropriada para suas próprias modificações adjacente às outras notas de copyright. novos autores e editor da Versão Modificada como dados na Página de Título. Preservar a seção entitulada "Histórico". tal como descrito na sentença anterior. Usar na Página de Título (e nas capas. Elas podem ser colocadas na seção "Histórico". se ele tiver menos que cinco). Preservar nessa nota de licença as listas completas das Seções Invariantes e os Textos de Capa requeridos dados na nota de licença do Documento. preservar o título da 15 . G. se algum. I. Incluir uma cópia inalterada desta Licença. uma ou mais das pessoas ou entidades responsá- veis pela autoria das modificações na Versão Modificada. D. as localizações de rede dadas no Docu- mento para as versões anteriores em que ele foi baseado.

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. O trabalho combinado precisa conter apenas uma cópia desta Licença. Números de seção ou equivalentes não são considerados parte dos títulos da seção.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF seção e preservar a seção em toda substância e fim de cada um dos agradecimentos de contri- buidores e/ou dedicatórias dados. mas você pode trocar o antigo. desde que ela não contenha qual- quer coisa além de endossos da sua Versão Modificada por várias pessoas ou entidades . faça o título de 16 . sem modificações. M. adicionado previamente por você ou por acordo feito com alguma entidade para a qual você esteja agindo. você não pode adicionar um outro. COMBINANDO DOCUMENTOS Você pode combinar o Documento com outros documentos publicados sob esta Licença. com permissão explícita do editor anterior que adicionou a passagem antiga. Para fazer isso. inalteradas em seus textos ou em seus títulos. Se houver múltiplas Seções Invariantes com o mesmo nome mas com conteúdos distintos. Preservar todas as Seções Invariantes do Documento. O(s) autor(es) e editor(es) do Documento não dão permissão por esta Licença para que seus nomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquer Versão Modificada. você pode optar por designar alguma ou todas aquelas seções como invariantes. e liste todas elas como Seções Invariantes de seu trabalho combinado em sua nota de licença. declarações de revisores ou de que o texto foi aprovado por uma organização como a definição oficial de um padrão. Se a Versão Modificada incluir novas seções iniciais ou apêndices que se qualifiquem como Seções Secundárias e não contenham nenhum material copiado do Documento. e uma passagem de até 25 palavras como um Texto de Quarta Capa. Se o Documento já incluir um texto de capa para a mesma capa. L. ao final da lista de Textos de Capa na Versão Modificada. N. Não reentitular qualquer seção existente com o título "Endossos"ou com qualquer outro título dado a uma Seção Invariante. Você pode adicionar uma passagem de até cinco palavras como um Texto de Capa da Frente . Tal sessão não pode ser incluída na Versão Modificada. Você pode adicionar uma seção entitulada "Endossos".por exemplo. Esses títulos preci- sam ser diferentes de qualquer outro título de seção. desde que você inclua na com- binação todas as Seções Invariantes de todos os documentos originais. e Seções Invariantes Idênticas com multiplas ocorrências podem ser substituídas por apenas uma cópia. sob os termos definidos na seção 4 acima para versões modificadas. adicione seus títulos à lista de Seções Invariantes na nota de licença da Versão Modificada. Apagar qualquer seção entitulada "Endossos".

e distribuí-lo individualmente sob esta Licença. e substituir as cópias individuais desta Licença nos vários documentos com uma única cópia incluida na coletânea. só por conta de terem sido assim compilados. você precisa combinar quaisquer seções entituladas "Histórico"dos diver- sos documentos originais. Você pode incluir uma tradução desta Licença desde que você também in- clua a versão original em Inglês desta Licença. desde que você siga as regras desta Licença para cópia exata de cada um dos Documentos em todos os outros aspectos. desde que você insira uma cópia desta Licença no documento extraído. então. em parênteses. No caso de discordância entre a tradução e a 17 . ou um número que seja único. da mesma forma combine quaisquer seções entituladas "Agradecimentos". ou "Dedicatórias". e eles não são trabalhos derivados do Documento. Na combinação. Você pode extrair um único documento de tal coletânea. TRADUÇÃO Tradução é considerada como um tipo de modificação. Você precisa apagar todas as seções entituladas como "Endosso".CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF cada seção único adicionando ao final do mesmo. se o Documento constituir menos de um quarto de todo o agregado. o nome do autor ou editor origianl daquela seção. mas você pode incluir traduções de algumas ou de todas as Seções Invariantes em adição às versões orignais dessas Seções Invariantes. os Textos de Capa do Documento podem ser colocados em capas adjacentes ao Documento dentro do agregado. Faça o mesmo ajuste nos títulos de seção na lista de Seções Invariantes nota de licença do trabalho combinado. em um volume ou mídia de distribuição. não conta como uma Ver- são Modificada do Documento. Se o requerido para o Texto de Capa na seção 3 for aplicável a essas cópias do Documento. formando uma seção entitulada "Histórico". AGREGAÇÃO COM TRABALHOS INDEPENDENTES Uma compilação do Documento ou derivados dele com outros trabalhos ou documentos se- parados e independentes. Tal compilação é chamada um "agregado". então você pode distribuir traduções do Documento sob os termos da seção 4. COLETÂNEAS DE DOCUMENTOS Você pode fazer uma coletânea consitindo do Documento e outros documentos publicados sob esta Licença. se for conhecido. e esta Licença não se aplica aos outros trabalhos auto-contidos compilados junto com o Documento. desde que nenhum copyright de compilação seja reclamado pela compilação. Senão eles precisarão aparecer nas capas de todo o agregado. A substituição de Seções Invariantes por traduções requer uma permissão especial dos detentores do copyright das mesmas. e siga esta Licença em todos os outros aspectos relacionados à cópia exata daquele documento.

É dada permissão para copiar. 18 . tanto quanto esses terceiros permaneçam em total acordo com esta Licença. Uma cópia da li- cença está inclusa na seção entitulada "Licença de Documentação Livre GNU". Versão 1. você pode escolher qualquer versão já publicada (não como rascunho) pela Free Software Foundation. ou distribuir o Documento exceto como expres- samente especificado sob esta Licença. sublicen- ciar. você tem a opção de seguir os termos e condições daquela versão específica. nós recomenda- mos a publicação desses exemplos em paralelo sob a sua escolha de licença de software livre.gnu. e resultará automaticamente no término de seus direitos sob esta Licença. Entretanto.org/copyleft/. Se o seu documento contiver exemplos não triviais de código de programas. ou direitos de você sob esta Licença não terão suas licenças terminadas. Qualquer outra tentativa de copiar.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF versão original em Inglês desta Licença. TÉRMINO Você não pode copiar. REVISÕES FUTURAS DESTA LICENÇA A Free Software Foundation pode publicar novas versões revisadas da Licença de Documen- tação Livre GNU de tempos em tempos. Se o Documento não especificar um número de Versão desta Licença. sublicenciar. e com os Textos da Quarta-Capa sendo LISTE. terceiros que tenham recebido cópias. modificar. Veja http://www. o mesmo para os Textos da Quarta Capa. A cada versão da Licença é dado um número de versão distinto. ou distribuir o Documento é nula.1 ou qualquer versão posterior publicada pela Free Soft- ware Foundation. modificar. inclua uma cópia desta Licença no documento e ponha as seguintes notas de copyright e licenças logo após a página de título: Copyright (c) ANO SEU NOME. com os Textos da Capa da Frente sendo LISTE. ou de qualquer versão posterior que tenha sido publicada (não como rascunho) pela Free Software Foundation. Se você não tiver Textos de Capa da Frente. Se o Documento especificar que uma versão particular desta Licença "ou qualquer versão posterior"se aplica ao mesmo. escreva "sem Seções Invariantes"ao invés de dizer quais são invariantes. ADENDO: Como usar esta Licença para seus documentos Para usar esta Licença num documento que você escreveu. com as Seções Invariantes sendo LISTE SEUS TÍTULOS. Se você não tiver nenhuma Seção Invariante. escreva "sem Textos de Capa da Frente"ao invés de "com os Textos de Capa da Frente sendo LISTE". distribuir e/ou modificar este documento sob os termos da Licença de Documentação Livre GNU. mas podem diferir em detalhes ao abordarem novos porblemas e preocupações. a versão original em Inglês prevalecerá. Tais novas versões serão similares em espirito à versão presente.

para permitir o seu uso em software livre. 19 .CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF tal como a GNU General Public License.

Parte IV ajax 20 .

que terão o tempo de execução mais rápido.Capítulo 1 Introducão Este é um curso básico sobre AJAX. É necessário ter conhecimentos de Javascript e HTML e o conhecimento de XML e PHP se você quizer deixar sua página mais complexa. graças ao Ajax. Nele mostraremos algumas funções do Javascript. 21 .

Diariamente os monitores darão respostas e esclarecimentos.2 Público Alvo Técnicos e Programadores que desejam trabalhar com AJAX. Aconselhamos a leitura de "Ambien- tação do Moodle". questionários e outros) que deverão ser executadas de acordo com as instruções fornecidas. Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deve ser disponibilizada no fórum ou enviada por e-mail. 2. necessariamente. Ele será dividido em tópicos e cada um deles é composto por um conjunto de atividades (lições. 2. Todo o material está no formato de lições. Utilize o material de cada semana e os exemplos disponibilizados para se preparar para prova. indicados por empresas públicas e ter conheci- mento básico acerca da lógica de programação.4 Descrição O curso será realizado na modalidade Educação a Distância e utilizará a Plataforma Moodle como ferramenta de aprendizagem. e estará disponível ao longo do curso. 2.1 Objetivo Qualificar técnicos e programadores na linguagem de programação AJAX. glossários. evitando dificuldades advindas do "desconhecimento"sobre o mesmo.Capítulo 2 Plano de ensino 2. para que você conheça o produto de Ensino a Distância. As lições poderão ser acessadas quantas vezes forem necessárias. O material didático está disponível on-line de acordo com as datas pré-estabelecidas em cada tópico. Ao final de cada semana do curso será disponibilizada a prova referente ao módulo estudado anteriormente que também conterá perguntas sobre os textos indicados. 22 .3 Pré-requisitos Os usuários deverão ser. fóruns.

Elas poderão ser acessadas quantas vezes forem neces- sárias. Diariamente os monitores darão respostas e esclarecimentos. Aconselhamos a leitura da "Ambientação do Moodle"para que você conheça a plataforma de En- sino a Distância. Qualquer dúvida deverá ser enviada no fórum. 23 .5 Metodologia O curso está dividido da seguinte maneira: 2. 2. Caso sua nota numa determinada lição for menor do que 6. Aspectos a serem considerados na avaliação: • Iniciativa e autonomia no processo de aprendizagem e de produção de conhecimento. Os instrutores estarão a sua disposição ao longo de todo curso. evitando dificuldades advindas do "desconhecimento"sobre a mesma. sugerimos que você faça novamente esta lição. Todos os módulos ficarão visíveis para que possam ser consultados durante a avaliação final. pois elas serão consideradas na sua nota final.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF 2.8 Avaliação Toda a avaliação será feita on-line. Tanto as notas das lições quanto a da avaliação serão consideradas para a nota final.0. Responda com atenção às perguntas de cada lição. você receberá uma nota de acordo com o seu desempenho.7 Programa O curso de Ajax oferecerá o seguinte conteúdo: • Introdução • Inicio • Objeto XMLHttpRequest e Aplicação II • Aplicação AJAX + Javascript • Código Final 2.6 Cronograma • Introdução • Inicio • Objeto XMLHttpRequest e Aplicação II • Aplicação AJAX + Javascript • Código Final As lições contém o contéudo principal. desde que esteja dentro da semana programada. Ao final de uma lição. Ao final do curso será disponibilizada a avaliação referente ao curso.

w3schools. Instrumentos de avaliação: • Participação ativa nas atividades programadas.com 24 . Para a aprovação e obtenção do certificado o participante deverá obter nota final maior ou igual a 6. • O participante fará várias avaliações referente ao conteúdo do curso. • Avaliação ao final do curso.9 Bibliografia • Site official: www.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF • Capacidade de pesquisa e abordagem criativa na solução dos problemas apresentados.0 de acordo com a fórmula abaixo: • Nota Final = ((ML x 7) + (AF x 3)) / 10 = Média aritmética das lições • AF = Avaliações 2.

O Ajax entra em cena para quebrar esta barreira e abrir as portas de novas possibilidades para as aplicações Web [GARRET. Google Suggest e Google Maps.que anteriormente. * usa XML XSLT para troca e manipulação de dados. Não só o Google como a Adaptive Path. Para isso. nem muito menos a Adaptive Path. ao contrário do que parece ser. pioneiro nessa nova maneira de aplicação web. * usa DOM (Modelo de Objeto de Documento) para dinamismo e interatividade na interface gráfica. Nem mesmo o Google. eram impossíveis de ser implementadas na web. tais como: GMail. Não se trata de uma nova tecnologia. que na verdade não possui nenhum proprietário. trata-se de uma forma de juntar as tecnologias já existentes. a téc- nica por trás do Ajax ganhou força por todo o mundo e graças a isso. Logo depois do artigo de James Garret e os diversos exemplos passados pelo Google a res- peito da junção de novas tecnologias. para a junção de novas tecnologias para facilitar a troca de informações entre seus amigos e clientes desenvolvedores. o Ajax utiliza dos seguintes procedimentos: * usa XHTML e CSS (Cascading Style Sheets) para camada de apresentação personalizada. 2005]. empresa americana.2 Como funciona Uma aplicação Desktop possui uma riqueza de interfaces e tempos de resposta que estavam fora do alcance de uma aplicação Web. pela sua própria natureza de funcionamento. um "apelido". James Garret também não criou o Ajax. 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 Aproximação para Aplicações Web) em 18 de Fevereiro de 2005. essa forma de juntar as tecnologias já utilizadas veio antes mesmo da criação do termo AJAX. inventaram o Ajax.1 Inicio AJAX é uma abreviação para Asynchronous JavaScript and XML (JavaScript e XML Assín- crono). 25 . Esse termo é considerado o caminho inicial para quem pretende ingressar nos conhecimentos sobre AJAX. especializada em Web e em ferramentas e consultorias para tornar a experiência do usuário ao acessar um site ou aplicação Web mais agradável. Tal forma já era utilizada pelo Google.Capítulo 3 Inicio 3. apenas criou uma abreviação. vemos novas aplicações. No entanto. 3.

o servidor retorna para o cliente uma resposta em HTML.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF * usa o objeto XMLHttpRequest para recuperação assíncrona de dados. Já no assíncrono (papel do ajax) as atividades podem ser executadas enquanto a primeira ainda está sendo processada. Com isso uma requisição é enviada do HTTP de volta para o servidor web. ocorre a execução. funciona da seguinte maneira: * o usuário realiza uma ação na interface (como exemplo. existe a espera do término de uma atividade para iniciar outra. por parte do servidor. o usuário não pode fazer nada além de esperar pela resposta. O AJAX faz o processamento assíncrono. No processamento síncrono. O que ocorre normalmente é que enquanto o servidor está processando as informações. a qual é interpretada pelo browser. 26 . Normalmente. o modelo clássico de uma aplicação web. * com isso. tal como uma consulta a uma base de dados ou até mesmo um cálculo. o clique em um botão). diminuindo esse tempo de resposta entre servidor e usuário. * após essa execução. * usa Javascript para juntar todas as partes.

o desenvolvedor pode atualizar a página. Com o servidor retornando uma nova página cada vez que o usuário utiliza o "Submit".0+. em um código de Javascript. se você quer alguma informação de uma base de dados ou até mesmo de um arquivo de algum servidor.2. Para que seja feito isso. como dito anteriormente. Com o AJAX. o usuário terá que clicar no botão "Submit"para enviar ou pegar a informação. com dados do servidor. faz com que. uma página ser carregada com os resultados desejados pelo usuário. Exemplos em AJAX Para entendermos como o AJAX funciona. Essa ferramenta do Google. seu Javascript comunica-se direto com o servidor através do objeto do próprio Javascript XMLHttpRequest. JAVASCRIPT e um pouco de PHP. essas que são usadas há muito tempo por vários desenvolvedores.Capítulo 4 Inicio Antes de aprender o ajax.0 / Firefox. mesmo depois dela ter sido carregada. esperar o sevidor responder para só então.1 Pedidos do HTTP do AJAX Normalmente. 4.2 O Objeto XMLHttpRequest Com o XMLHttpRequest. Safari 1. Opera 8+. O objeto XMLHttpRequest é suportado na Internet Explorer 5. tornando o processo não muito amigável com o usuário. O usuário permanecerá na mesma página. o AJAX usa tecnologias já existentes. Com o pedido HTTP. é necessário que você tenha o conhecimento básico de: HTML/XHTML. o Javascript envia o que foi escrito para um servidor e o servidor retorna uma lista de sugestões. você terá que utilizar um GET ou POST do HTML. and Netscape 7. AJAX ficou popular com o Google em 2005 com o Google Suggest. Mozilla 1. 27 . Não há nada de novo para aprender. a página web pode fazer um pedido e obter a resposta do servidor web sem mesmo recarregar a pagina. 4. vamos criar uma pequena aplicação AJAX. usa o XMLHttpRequest para criar uma interface web muito dinâmica da seguinte forma: quando você começa a escrever na caixa de busca do Google. tradicionais aplicações web execute a ação lentamente. Tecnologias.

No entanto.0+. em acordo com os diferentes browsers. diferentes browsers utilizam dife- rentes métodos para cria-lo. salve o arquivo criado como "Ajax.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF Primeiro vamos fazer um formulário HMTL padrão com dois campos: Nome e Hora. objeto este presente no Javascript. } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2. Para isso. Para criar esse objeto. try { // Opera 8.htm". vamos dá uma melhorada no arquivo "Ajax.Firefox xmlHttp=new XMLHttpRequest(). Ex. vamos utilizar o "try and cash"do Javascript.htm"criado anterior- mente. Ex. Feito isso. 28 . Já os demais browsers utilizam o XMLHttpRequest.1: <html> <body> <form name = "Formulario"> Nome: <input type = "text" name = "NomeUsuario" /> Hora: <input type = "text" name = "hora" /> </form> </body> </hmtl> 4. A Internet Explorer utiliza o ActiveXObject. Safari.3 Seu browser suporta AJAX? A chave do AJAX é o objeto XMLHttpRequest.XMLHTTP").2: <html> <body> <script type="text/javascript"> function FuncaoAjax() { var xmlHttp.

ainda depois de todas essas tentativas. basta utilizar esse mesmo código utilizando o "copiar e colar"toda vez que você quiser criar esse objeto. tentamos criar na Internet Explorer com "xmlHttp=new ActiveXObject("Msxml2. se utilizarmos o Explorer 5. } } } } </script> <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 código: -em primeiro lugar. Safari ou Firefox. ele será usado diversas vezes quando você quiser criar o objeto XMLHttpRequest. utilizamos o xmlHttp=new ActiveXObject("Microsoft. Opera. Firefox e Safari. Caso haja alguma falha para criar esse objeto nesses browsers. Obs2: Esse codigo."dificilmente será mostrada. Logo. -Se. Se mesmo assim falhar a tentativa da criação. mostra-se uma mensagem de erro. não der certo.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") que dará certo. Logo. é porque o usuário utiliza um browser muito ultrapassado. -depois disso.5+.0+. pode parecer longo e complexo. 29 . no entanto. tais como: Internet Explorer.XMLHTTP").XMLHTTP")"que será compatível com a Internet Explorer 6. pois esse código será compatível com qualquer browser popular. Obs1: É claro que os browser modernos utilizados atualmente su- portam essa tecnologia fazendo com que a parte do código "alert("Seu browser não suporta AJAX!"). tentamos criar o objeto "xmlHttp = new XMLHttpRequest()"para os browsers: Opera 8. return false. } catch (e) { alert("Seu browser não suporta AJAX!").0+. falando que o browser não suporta o AJAX. em cada "try"atribuímos à variável xmlHttp criada para armazenar o objeto XMLHttpRequest.

Listaremos agora alguns valores que podem ser usado nessa propriedade: Estado ’0’ => O pedido não é 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. ocorre a execução da propriedade onreadystatechange.1 Objeto XMLHttpRequest Cont. utilizando o mesmo. Cada vez que essa pro- priedade muda.: Veja que a propriedade "readyState"está sendo usada em conjunto com a onreadystate- change.onreadystatechange=function() { // Algum codigo } Segunda propriedade A propriedade "readyState"segura o status da resposta do servidor. Primeira propriedade Depois de pedir ao servidor. Terceira propriedade 30 . você tem que saber três propriedades do XMLHttpRequest. Ex.readyState==4) { // Apanha o dado da resposta do servidor } } Obs. A propriedade "onreadystatechange"armazena a funcão que irá proces- sar a resposta vinda do servidor.: xmlHttp. para saber se o dado vindo do servidor é completo. será necessário uma função que possa receber um dado que é retornado pelo servidor.onreadystatechange=function() { if(xmlHttp.Capítulo 5 Objeto XMLHttpRequest e Aplicação II 5. Antes de continuarmos a falar sobre esse objeto e de enviar determinados dados.

O primeiro método recebe três argumentos. xmlHttp.send(null). O segundo argumento especifica a URL da parte do programa do servidor. O método "send()"envia o pedido para o servidor. O primeiro argumento define qual método devemos usar quando formos enviar o pedido (GET ou POST).onreadystatechange=function() { if(xmlHttp. ou seja. Deixaremos essa função rodando "por trás da cena"no momento que o usuário estiver digitando no campo nome do nosso código criado no início do curso.asp". Obs: Suponha que o arquivo HTML e ASP esteja no mesmo diretório.open("GET". No código feito no início da lição. é necessário saber quando vamos utilizar a função AJAX. vamos escolher um valor para o campo "sobrenome"igual a "responseText".formulario.(Código melhorado!) : <html> <body> <script type="text/javascript"> function FuncaoAjax() { var xmlHttp. Agora. Ex.hora."hora. } } Enviar um pedido para o servidor Para enviarmos um pedido para o servidor. vamos dá um "upgrade"no nosso código criado no inicio do curso." name="nome" /> Hora: <input type="text" name="hora" /> </form> Feito isso. E o terceiro argumento especifica que o pedido deve ser assíncrono.true).: xmlHttp. Ex.value=xmlHttp. quando ela será executada.responseText. agora.readyState==4) { document.(Parte do código) : <form name="Formulario"> Nome: <input type="text" onkeyup="FuncaoAjax(). Ex.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF Os dados enviados para o servidor pode ser recuperado utilizando a propriedade "response- Text". try 31 . O código para esses métodos seria o seguinte: xmlHttp. é necessário que utilizemos dois métodos: open() e o send().

onreadystatechange=function() { if(xmlHttp. explicada anteriormente irá armazenar os dados enviados pelo servidor.XMLHTTP").hora. return false.asp". } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.Firefox xmlHttp=new XMLHttpRequest(). } } xmlHttp.true).XMLHTTP"). } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2."hora." name="nome" /> Hora: <input type="text" name="hora" /> </form> </body> </html> Criaremos agora um script que mostrará a hora atual do sevidor.open("GET". A propriedadade responseText. } } } } xmlHttp.formulario.asp seria esse: 32 .readyState==4) { document.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF { // Opera 8.responseText. </script> <form name="Formulario"> Nome: <input type="text" onkeyup="FuncaoAjax().send(null). Vamos mostrar agora o tempo atual.value=xmlHttp.0+. } catch (e) { alert("Seu browser não suporta AJAX!"). Safari. xmlHttp. O código hora.

expires=-1 indica que a página nunca será arma- zenada. 33 . a próxima lição será a montagem de algum código mais complexo.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF <% response. response.write(hora) %> Obs. Se um usuário retorna para uma mesma página antes de expirá-la.expires=-1 response. Basicamente é isso que precisamos saber sobre o Ajax.: A propriedade expires define quanto tempo uma página será armazenada em um na- vegador antes da expiração. utilizando como exemplo o Javascript. a versão armazenada é mostrada.

getElementById("txtHint"). trata-se de um código html com um campo de entrada chamado "txt1". a função "MostraOpcao"é executada. Começaremos com a função: "MostraOpcao()". Esse span é utilizado para guardar dados recuperados do servidor web.innerHTML="".value)"> </form> <p> Opções: <span id="txthint"></span></p> Como pode ser observado. function MostraOpcao(str) { if (str. onde o lugar dela é na tag «head></head>"do html. Antes de prosseguirmos com a lição. a função "MostraOpcao"é chamada. usaremos nome de música. O usuário digitará uma letra no campo "Banda"e embaixo será listado algumas opções. vamos mostrar algumas funções que serão úteis para a aplicação de Ajax em um código de Javascript. Com isso ele terá como resposta algumas sugestões do que ele esteja querendo.1 Aplicação Ajax + Javacript O que faremos a seguir é o seguinte: Pediremos para o usuário digitar alguma letra em um campo. } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { 34 . Agora veja como é o código dessa função: <form> Banda: <input type="text" id="txt1" onkeyup="MostraOpcao(this. Quando o usuário insere um dado. No Exemplo. A execução dessa função é provocada pelo evento onkeyup. return.length==0) { document. Tal função é em Javascript. toda vez que o usuário escreve alguma coisa no campo "Banda". Isto é.Capítulo 6 Aplicação AJAX + Javascript 6. O parágrafo (<p> </p>) abaixo é um span chamado "txthint".

e diz para o objeto executar uma função chamada stateChan- ged quando uma mudança é provocada.2 Código da função GetXmlHttpObject() function GetXmlHttpObject() { var xmlHttp=null. executa assíncrono.url. neste caso é o GET. Safari xmlHttp=new XMLHttpRequest(). } var url="Opcao.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF alert ("Seu Browser não suporta AJAX!"). Como já foi mencionado.método: indica se a passagem de parâmetros para a URL será via POST ou GET.open("GET". Opera 8.random(). 6. //6) } A função é executada toda vez que uma letra (caractere) é escrito no campo "Banda:". Caso o campo for vazio (str == 0) a função simplesmente limpa o índice guardado dos dados recuperados do servidor web do txtHint.assíncrono: se verdadeiro. esta função possui três parâmetros: .0+.php". //2) url=url+"&sid="+Math.URL: endereço que será acessado. . não espera pelo retorno da URL para continuar executando o script. try { // Firefox. .true). • 4) cria um objeto XMLHTTP. mostraremos agora o que a função faz: • 1) define a url que será enviada para o servidor. //3) xmlHttp. //5) xmlHttp. a função "GetXmlHttpObject()"é utilizada para testar se o Objeto xmlHttp poderá ser criado em diferentes browsers. //4) xmlHttp. } catch (e) { // Internet Explorer 35 . ou seja.onreadystatechange=stateChanged. Seguindo a condição imposta para que ocorra a execução da função (str > 0). //1) url=url+"?q="+str.send(null). • 6) envia uma resposta HTTP para o servidor. • 3) adiciona um número aleatório para impedir que o usuário use um arquivo fechado. • 5) abre uma URL. return. Se falso o browser ficará ?travado? enquanto o script é executado. • 2) adiciona um parâmetro "q"para a url com o índice do campo de entrada.

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF try { xmlHttp=new ActiveXObject("Msxml2.readyState==4) { document. } } Obs: Quando o estado muda para quatro (Pedido completo) o índice do que está armazenado é preenchido pela propriedade responseText. tem como função recuperar os dados enviados para o servidor.getElementById("txtHint"). que como foi mecionado na lição anterior. sua utilização se dá quando ocorre alguma mudança no estado do objeto xmlhttp e o código dela é esse: function stateChanged() { if (xmlHttp. } A função stateChange() também está presente nesse código. 36 .XMLHTTP"). } } return xmlHttp.innerHTML=xmlHttp.responseText. } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP").

js"></script> </head> <body> <form> Banda: <input type="text" id="txt1" onkeyup="MostraOpcao(this.getElementById("txtHint").js"é dessa forma: var xmlHttp function showHint(str) { if (str. return. simplesmente reunimos os códigos feitos anteriormente e demos uma otimizada nele. <html> <head> <script src="NomeBanda.length==0) { document.value)"> </form> <p> Opções: <span id="txthint"></span></p> </body> </html> O código que está salvo como "NomeBanda. } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { 37 . Não haverá coisas muito novas nessa lição.Capítulo 7 Código Final 7. é em html e contém um link para um código javascript que será mostrado logo mais.innerHTML="".1 Página Ajax HTML O código abaixo.

readyState==4) { document. } } return xmlHttp.getElementById("txtHint").innerHTML=xmlHttp.php). 38 . return.open("GET". } Com isso encerramos a junção das outras funções feitas anteriormente. Opera 8.0+.XMLHTTP"). xmlHttp. Logo abaixo está o código da url que será enviada para o servidor (Opcao.responseText.true).random().onreadystatechange=stateChanged. xmlHttp. } } function GetXmlHttpObject() { var xmlHttp=null. } var url="Opcao.url.XMLHTTP"). url=url+"&sid="+Math.send(null).php". <?php $a[]="Aerosmith". } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2. } function stateChanged() { if (xmlHttp. url=url+"?q="+str. try { // Firefox. Safari xmlHttp=new XMLHttpRequest(). } catch (e) { xmlHttp=new ActiveXObject("Microsoft. xmlHttp.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF alert ("Se browser não suporta AJAX!").

$a[]="Dead fish". $a[]="Nazareth". $a[]="Deftones". $a[]="Vagabanda".$a[$i]. $a[]="ACDC". $a[]="Incubus". $a[]="Paralamas". //pegando o parametro "q" da url $q=$_GET["q"]. $a[]="Pitty". $a[]="Pink". $a[]="Detonautas".strlen($q)))) { if ($opcao=="") { $opcao=$a[$i].0. $a[]="Inimigos da HP". $a[]="Legião Urbana". $a[]="Fagner". //ve se as opções do array tem tamanho q>0 if (strlen($q) > 0) { $opcao="". $a[]="Natiruts". $a[]="Capital Inicial". $a[]="Greenday". $i<cont($a). $a[]="Nirvana". $a[]="JorgeBen". $a[]="Biquini Cavadao". $a[]="Engenheiros". $a[]="PinkFloyd". $a[]="Pantera". $a[]="Araketu". for($i=0. $a[]="Catedral"." . $i++) { if (strtolower($q)==strtolower(substr($a[$i]. ". } else { $opcao=$opcao. $a[]="Metallica".CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF $a[]="Angra". $a[]="Pisirico". $a[]="REM". 39 . $a[]="Vinny".

Aprofunde mais utilizando PHP. entre outras linguagens para aplicação web. ?> Com isso encerramos o curso de AJAX. } else { $OpcaoEscolhida=$opcao.CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF } } } } // Se nenhuma opção for encontrada ou algo foi digitado de forma incorreta // Ocorrerá a mensagem "sem sugestões". } //saida da resposta echo $OpcaoEscolhida. if ($hint == "") { $response="Sem sugestões!". Agora basta usar a criatividade e criar diversas pági- nas otimizidas e com rápida resposta. CSS. ASP. 40 .