Ajax

AjaxVersã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 222.1 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.2 Público Alvo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.3 Pré-requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.4 Descrição . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.5 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.6 Cronograma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.7 Programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.8 Avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.9 Bibliografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3 Inicio 253.1 Inicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253.2 Como funciona . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

4 Inicio 274.1 Pedidos do HTTP do AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.2 O Objeto XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.3 Seu browser suporta AJAX? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

5 Objeto XMLHttpRequest e Aplicação II 305.1 Objeto XMLHttpRequest Cont. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

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

1

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

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

2

Parte I

Sobre essa apostila

3


Conteúdo

O conteúdo dessa apostila é fruto da compilação de diversos materiais livres publicados na in-ternet, disponíveis em diversos sites ou originalmente produzido no CDTC em http://www.cdtc.org.br.

O formato original deste material bem como sua atualização está disponível dentro da licençaGNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seção demesmo nome, tendo inclusive uma versão traduzida (não oficial).

A revisão e alteração vem sendo realizada pelo CDTC ([email protected]), desde outubrode 2006. Criticas e sugestões construtivas são bem-vindas a qualquer tempo.

Autores

A autoria deste conteúdo, atividades e avaliações é de responsabilidade de Diego de AquinoSoares ([email protected])

.

O texto original faz parte do projeto Centro de Difusão de Tecnolgia e Conhecimento, que vemsendo realizado pelo ITI em conjunto com outros parceiros institucionais, atuando em conjuntocom as universidades federais brasileiras que tem produzido e utilizado Software Livre, apoiandoinclusive a comunidade Free Software junto a outras entidades no país.

Informações adicionais podem ser obtidas atráves do email [email protected], ou dahome page da entidade, atráves da URL http://www.cdtc.org.br.

Garantias

O material contido nesta apostila é isento de garantias e o seu uso é de inteira responsabi-lidade do usuário/leitor. Os autores, bem como o ITI e seus parceiros, não se responsabilizamdireta ou indiretamente por qualquer prejuízo oriundo da utilização do material aqui contido.

Licença

Copyright ©2006,Diego de Aquino Soares ([email protected]).

Permission is granted to copy, distribute and/or modify this document under the termsof the GNU Free Documentation License, Version 1.1 or any later version published bythe Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOS-TILA. A copy of the license is included in the section entitled GNU Free DocumentationLicense.

4


5

Parte II

Informações Básicas

6


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, em proveito dodesenvolvimento social, cultural, político, tecnológico e econômico da sociedade brasileira.

Objetivo Específico

Auxiliar o Governo Federal na implantação do plano nacional de software não-proprietário ede código fonte aberto, identificando e mobilizando grupos de formadores de opinião dentre osservidores públicos e agentes políticos da União Federal, estimulando e incentivando o mercadonacional a adotar novos modelos de negócio da tecnologia da informação e de novos negóciosde comunicação com base em software não-proprietário e de código fonte aberto, oferecendotreinamento específico para técnicos, profissionais de suporte e funcionários públicos usuários,criando grupos de funcionários públicos que irão treinar outros funcionários públicos e atuar comoincentivadores e defensores de produtos de software não proprietários e código fonte aberto, ofe-recendo conteúdo técnico on-line para serviços de suporte, ferramentas para desenvolvimento deprodutos de software não proprietários e de seu código fonte livre, articulando redes de terceiros(dentro e fora do governo) fornecedoras de educação, pesquisa, desenvolvimento e teste de pro-dutos de software livre.

Guia do aluno

Neste guia, você terá reunidas uma série de informações importantes para que você comeceseu curso. 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, seguindo oroteiro acima.

Licença

Copyright ©2006, Diego de Aquino Soares ([email protected]).

7


É dada permissão para copiar, distribuir e/ou modificar este documento sob os termosda Licença de Documentação Livre GNU, Versão 1.1 ou qualquer versão posteriorpúblicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSAAPOSTILA. Uma cópia da licença está inclusa na seção entitulada "Licença de Docu-mentação Livre GNU".

Os 10 mandamentos do aluno de educação online

• 1. Acesso à Internet: ter endereço eletrônico, um provedor e um equipamento adequado épré-requisito para a participação nos cursos a distância.

• 2. Habilidade e disposição para operar programas: ter conhecimentos básicos de Informá-tica é necessário para poder executar as tarefas.

• 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distân-cia conta muitos pontos, pois irá colaborar para o processo ensino-aprendizagem pessoal,dos colegas e dos professores.

• 4. Comportamentos compatíveis com a etiqueta: mostrar-se interessado em conhecer seuscolegas de turma respeitando-os e fazendo ser respeitado pelo mesmo.

• 5. Organização pessoal: planejar e organizar tudo é fundamental para facilitar a sua revisãoe a sua recuperação de materiais.

• 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigações erealizá-las em tempo real.

• 7. Curiosidade e abertura para inovações: aceitar novas idéias e inovar sempre.

• 8. Flexibilidade e adaptação: requisitos necessário à mudança tecnológica, aprendizagense descobertas.

• 9. Objetividade em sua comunicação: comunicar-se de forma clara, breve e transparente éponto - chave na comunicação pela Internet.

• 10. Responsabilidade: ser responsável por seu próprio aprendizado. O ambiente virtual nãocontrola a sua dedicação, mas reflete os resultados do seu esforço e da sua colaboração.

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:

. O fórum de notícias tem por objetivo disponibilizar um meio de acesso rápido a informaçõesque sejam pertinentes ao curso (avisos, notícias). As mensagens postadas nele são enviadas a

8


todos participantes. Assim, se o monitor ou algum outro participante tiver uma informação queinteresse ao grupo, favor postá-la aqui.Porém, se o que você deseja é resolver alguma dúvida ou discutir algum tópico específico docurso. É recomendado que você faça uso do Forum de dúvidas gerais que lhe dá recursos maisefetivos para esta prática.

. O fórum de dúvidas gerais tem por objetivo disponibilizar um meio fácil, rápido e interativopara solucionar suas dúvidas e trocar experiências. As mensagens postadas nele são enviadasa todos participantes do curso. Assim, fica muito mais fácil obter respostas, já que todos podemajudar.Se você receber uma mensagem com algum tópico que saiba responder, não se preocupe com aformalização ou a gramática. 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.

A segunda forma se dá pelas Wikis:

. Uma wiki é uma página web que pode ser editada colaborativamente, ou seja, qualquer par-ticipante pode inserir, editar, apagar textos. As versões antigas vão sendo arquivadas e podemser 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 "Wikipé-dia", uma experiência grandiosa de construção de uma enciclopédia de forma colaborativa, porpessoas de todas as partes do mundo. Acesse-a em português pelos links:

• Página principal da Wiki - http://pt.wikipedia.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;

• Ler a Ambientação do Moodle para aprender a navegar neste ambiente e se utilizar dasferramentas básicas do mesmo;

• Entrar nas lições seguindo a seqüência descrita no Plano de Ensino;

• Qualquer dúvida, reporte ao Fórum de Dúvidas Gerais.

Perfil do Tutor

Segue-se uma descrição do tutor ideal, baseada no feedback de alunos e de tutores.

O tutor ideal é um modelo de excelência: é consistente, justo e profissional nos respectivosvalores e atitudes, incentiva mas é honesto, imparcial, amável, positivo, respeitador, aceita asidéias dos estudantes, é paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.

9


A classificação por um tutor desta natureza proporciona o melhor feedback possível, é crucial, e,para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem.’ Este tutorou instrutor:

• fornece explicações claras acerca do que ele espera, e do estilo de classificação que iráutilizar;

• gosta que lhe façam perguntas adicionais;

• identifica as nossas falhas, mas corrige-as amavelmente’, diz um estudante, ’e explica por-que motivo a classificação foi ou não foi atribuída’;

• tece comentários completos e construtivos, mas de forma agradável (em contraste com umreparo de um estudante: ’os comentários deixam-nos com uma sensação de crítica, deameaça e de nervossismo’)

• dá uma ajuda complementar para encorajar um estudante em dificuldade;

• esclarece pontos que não foram entendidos, ou corretamente aprendidos anteriormente;

• ajuda o estudante a alcançar os seus objetivos;

• é flexível quando necessário;

• mostra um interesse genuíno em motivar os alunos (mesmo os principiantes e, por isso,talvez numa fase menos interessante para o tutor);

• escreve todas as correções de forma legível e com um nível de pormenorização adequado;

• acima de tudo, devolve os trabalhos rapidamente;

10

Parte III

GNU Free Documentation License

11


(Traduzido pelo João S. O. 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. Ela não é publicada pela Free Software Foundation, e não se aplica legalmente a distribuiçãode textos que usem a GFDL - apenas o texto original em Inglês da GNU FDL faz isso. Entretanto,nós esperamos que esta tradução ajude falantes de português a entenderem melhor a GFDL.

This is an unofficial translation of the GNU General Documentation License into Brazilian Por-tuguese. It was not published by the Free Software Foundation, and does not legally state thedistribution terms for software that uses the GFDL–only the original English text of the GFDL doesthat. However, we hope that this translation will help Portuguese speakers understand the GFDLbetter.

Licença de Documentação Livre GNU Versão 1.1, Março 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 cópias exatas deste documento de licença, masnão é permitido alterá-lo.

INTRODUÇÃO

O propósito desta Licença é deixar um manual, livro-texto ou outro documento escrito "livre"nosentido de liberdade: assegurar a qualquer um a efetiva liberdade de copiá-lo ou redistribui-lo,com ou sem modificações, comercialmente ou não. Secundariamente, esta Licença mantémpara o autor e editor uma forma de ter crédito por seu trabalho, sem ser considerado responsávelpelas modificações feitas por terceiros.

Esta Licença é um tipo de "copyleft"("direitos revertidos"), o que significa que derivações dodocumento precisam ser livres no mesmo sentido. Ela complementa a GNU Licença Pública Ge-ral (GNU GPL), que é um copyleft para software livre.

Nós fizemos esta Licença para que seja usada em manuais de software livre, por que softwarelivre precisa de documentação livre: um programa livre deve ser acompanhado de manuais queprovenham as mesmas liberdades que o software possui. Mas esta Licença não está restrita amanuais de software; ela pode ser usada para qualquer trabalho em texto, independentementedo assunto ou se ele é publicado como um livro impresso. Nós recomendamos esta Licença prin-cipalmente para trabalhos cujo propósito seja de introdução ou referência.

APLICABILIDADE E DEFINIÇÕES

Esta Licença se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelodetentor dos direitos autorais dizendo que ele pode ser distribuído sob os termos desta Licença.O "Documento"abaixo se refere a qualquer manual ou texto. Qualquer pessoa do público é um

12


licenciado e é referida como "você".

Uma "Versão Modificada"do Documento se refere a qualquer trabalho contendo o documentoou uma parte dele, quer copiada exatamente, quer com modificações e/ou traduzida em outralíngua.

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 doDocumento (ou assuntos relacionados) e não contém nada que poderia ser incluído diretamentenesse assunto geral (Por exemplo, se o Documento é em parte um livro texto de matemática, aSeção Secundária pode não explicar nada de matemática).

Essa relação poderia ser uma questão de ligação histórica com o assunto, ou matérias relaci-onadas, ou de posições legais, comerciais, filosóficas, éticas ou políticas relacionadas ao mesmo.

As "Seções Invariantes"são certas Seções Secundárias cujos títulos são designados, comosendo de Seções Invariantes, na nota que diz que o Documento é publicado sob esta Licença.

Os "Textos de Capa"são certos trechos curtos de texto que são listados, como Textos de CapaFrontal ou Textos da Quarta Capa, na nota que diz que o texto é publicado sob esta Licença.

Uma cópia "Transparente"do Documento significa uma cópia que pode ser lida automatica-mente, representada num formato cuja especificação esteja disponível ao público geral, cujosconteúdos possam ser vistos e editados diretamente e sem mecanismos especiais com editoresde 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 que seja passível deservir como entrada a formatadores de texto ou para tradução automática para uma variedadede formatos que sirvam de entrada para formatadores de texto. Uma cópia feita em um formatode arquivo outrossim Transparente cuja constituição tenha sido projetada para atrapalhar ou de-sencorajar modificações subsequentes pelos leitores não é Transparente. Uma cópia que não é"Transparente"é chamada de "Opaca".

Exemplos de formatos que podem ser usados para cópias Transparentes incluem ASCII sim-ples sem marcações, formato de entrada do Texinfo, formato de entrada do LaTex, SGML ou XMLusando uma DTD disponibilizada publicamente, e HTML simples, compatível com os padrões, eprojetado para ser modificado por pessoas. Formatos opacos incluem PostScript, PDF, formatosproprietários que podem ser lidos e editados apenas com processadores de texto proprietários,SGML ou XML para os quais a DTD e/ou ferramentas de processamento e edição não estejamdisponíveis para o público, e HTML gerado automaticamente por alguns editores de texto comfinalidade apenas de saída.

A "Página do Título"significa, para um livro impresso, a página do título propriamente dita,mais quaisquer páginas subsequentes quantas forem necessárias para conter, de forma legível,o material que esta Licença requer que apareça na página do título. Para trabalhos que nãotenham uma página do título, "Página do Título"significa o texto próximo da aparição mais proe-minente do título do trabalho, precedendo o início do corpo do texto.

13


FAZENDO CÓPIAS EXATAS

Você pode copiar e distribuir o Documento em qualquer meio, de forma comercial ou nãocomercial, desde que esta Licença, as notas de copyright, e a nota de licença dizendo que estaLicença se aplica ao documento estejam reproduzidas em todas as cópias, e que você não acres-cente nenhuma outra condição, quaisquer que sejam, às desta Licença.

Você não pode usar medidas técnicas para obstruir ou controlar a leitura ou confecção decópias subsequentes das cópias que você fizer ou distribuir. Entretanto, você pode aceitar com-pensação em troca de cópias. Se você distribuir uma quantidade grande o suficiente de cópias,você também precisa respeitar as condições da seção 3.

Você também pode emprestar cópias, sob as mesmas condições colocadas acima, e tambémpode exibir cópias publicamente.

FAZENDO CÓPIAS EM QUANTIDADE

Se você publicar cópias do Documento em número maior que 100, e a nota de licença doDocumento obrigar Textos de Capa, você precisará incluir as cópias em capas que tragam, clarae legivelmente, todos esses Textos de Capa: Textos de Capa da Frente na capa da frente, eTextos da Quarta Capa na capa de trás. Ambas as capas também precisam identificar clara elegivelmente você como o editor dessas cópias. A capa da frente precisa apresentar o título com-pleto com todas as palavras do título igualmente proeminentes e visíveis. Você pode adicionaroutros materiais às capas. Fazer cópias com modificações limitadas às capas, tanto quanto estaspreservem o título do documento e satisfaçam a essas condições, pode ser tratado como cópiaexata em outros aspectos.

Se os textos requeridos em qualquer das capas for muito volumoso para caber de formalegível, você deve colocar os primeiros (tantos quantos couberem de forma razoável) na capaverdadeira, e continuar os outros nas páginas adjacentes.

Se você publicar ou distribuir cópias Opacas do Documento em número maior que 100, vocêprecisa ou incluir uma cópia Transparente que possa ser lida automaticamente com cada cópiaOpaca, ou informar, em ou com, cada cópia Opaca a localização de uma cópia Transparentecompleta do Documento acessível publicamente em uma rede de computadores, à qual o públicousuário de redes tenha acesso a download gratuito e anônimo utilizando padrões públicos deprotocolos de rede. Se você utilizar o segundo método, você precisará tomar cuidados razoavel-mente prudentes, quando iniciar a distribuição de cópias Opacas em quantidade, para assegurarque esta cópia Transparente vai permanecer acessível desta forma na localização especificadapor 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.

É pedido, mas não é obrigatório, que você contate os autores do Documento bem antes deredistribuir qualquer grande número de cópias, para lhes dar uma oportunidade de prover vocêcom uma versão atualizada do Documento.

14


MODIFICAÇÕES

Você pode copiar e distribuir uma Versão Modificada do Documento sob as condições das se-ções 2 e 3 acima, desde que você publique a Versão Modificada estritamente sob esta Licença,com a Versão Modificada tomando o papel do Documento, de forma a licenciar a distribuiçãoe modificação da Versão Modificada para quem quer que possua uma cópia da mesma. Alémdisso, você precisa fazer o seguinte na versão modificada:

A. Usar na Página de Título (e nas capas, se houver alguma) um título distinto daquele do Do-cumento, e daqueles de versões anteriores (que deveriam, se houvesse algum, estarem listadosna seção "Histórico do Documento"). Você pode usar o mesmo título de uma versão anterior seo editor original daquela versão lhe der permissão;

B. Listar na Página de Título, como autores, uma ou mais das pessoas ou entidades responsá-veis pela autoria das modificações na Versão Modificada, conjuntamente com pelo menos cincodos autores principais do Documento (todos os seus autores principais, se ele tiver menos quecinco);

C. Colocar na Página de Título o nome do editor da Versão Modificada, como o editor;

D. Preservar todas as notas de copyright do Documento;

E. Adicionar uma nota de copyright apropriada para suas próprias modificações adjacente àsoutras notas de copyright;

F. Incluir, imediatamente depois das notas de copyright, uma nota de licença dando ao públicoo direito de usar a Versão Modificada sob os termos desta Licença, na forma mostrada no tópicoabaixo;

G. Preservar nessa nota de licença as listas completas das Seções Invariantes e os Textos deCapa requeridos dados na nota de licença do Documento;

H. Incluir uma cópia inalterada desta Licença;

I. Preservar a seção entitulada "Histórico", e seu título, e adicionar à mesma um item dizendopelo menos o título, ano, novos autores e editor da Versão Modificada como dados na Página deTítulo. Se não houver uma sessão denominada "Histórico"no Documento, criar uma dizendo otítulo, ano, autores, e editor do Documento como dados em sua Página de Título, então adicionarum item descrevendo a Versão Modificada, tal como descrito na sentença anterior;

J. Preservar o endereço de rede, se algum, dado no Documento para acesso público a umacópia Transparente do Documento, e da mesma forma, as localizações de rede dadas no Docu-mento para as versões anteriores em que ele foi baseado. Elas podem ser colocadas na seção"Histórico". Você pode omitir uma localização na rede para um trabalho que tenha sido publicadopelo menos quatro anos antes do Documento, ou se o editor original da versão a que ela se refirader sua permissão;

K. Em qualquer seção entitulada "Agradecimentos"ou "Dedicatórias", preservar o título da

15


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;

L. Preservar todas as Seções Invariantes do Documento, inalteradas em seus textos ou emseus títulos. Números de seção ou equivalentes não são considerados parte dos títulos da seção;

M. Apagar qualquer seção entitulada "Endossos". Tal sessão não pode ser incluída na VersãoModificada;

N. Não reentitular qualquer seção existente com o título "Endossos"ou com qualquer outrotítulo dado a uma Seção Invariante.

Se a Versão Modificada incluir novas seções iniciais ou apêndices que se qualifiquem comoSeções Secundárias e não contenham nenhum material copiado do Documento, você pode optarpor designar alguma ou todas aquelas seções como invariantes. Para fazer isso, adicione seustítulos à lista de Seções Invariantes na nota de licença da Versão Modificada. Esses títulos preci-sam ser diferentes de qualquer outro título de seção.

Você pode adicionar uma seção entitulada "Endossos", desde que ela não contenha qual-quer coisa além de endossos da sua Versão Modificada por várias pessoas ou entidades - porexemplo, declarações de revisores ou de que o texto foi aprovado por uma organização como adefinição oficial de um padrão.

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 final da lista de Textosde Capa na Versão Modificada. Somente uma passagem de Texto da Capa da Frente e uma deTexto 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 porvocê ou por acordo feito com alguma entidade para a qual você esteja agindo, você não podeadicionar um outro; mas você pode trocar o antigo, com permissão explícita do editor anterior queadicionou a passagem antiga.

O(s) autor(es) e editor(es) do Documento não dão permissão por esta Licença para que seusnomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquerVersão Modificada.

COMBINANDO DOCUMENTOS

Você pode combinar o Documento com outros documentos publicados sob esta Licença, sobos termos definidos na seção 4 acima para versões modificadas, desde que você inclua na com-binação todas as Seções Invariantes de todos os documentos originais, sem modificações, e listetodas elas como Seções Invariantes de seu trabalho combinado em sua nota de licença.

O trabalho combinado precisa conter apenas uma cópia desta Licença, e Seções InvariantesIdênticas com multiplas ocorrências podem ser substituídas por apenas uma cópia. Se houvermúltiplas Seções Invariantes com o mesmo nome mas com conteúdos distintos, faça o título de

16


cada seção único adicionando ao final do mesmo, em parênteses, o nome do autor ou editororigianl daquela seção, se for conhecido, ou um número que seja único. Faça o mesmo ajustenos títulos de seção na lista de Seções Invariantes nota de licença do trabalho combinado.

Na combinação, você precisa combinar quaisquer seções entituladas "Histórico"dos diver-sos documentos originais, formando uma seção entitulada "Histórico"; da mesma forma combinequaisquer seções entituladas "Agradecimentos", ou "Dedicatórias". Você precisa apagar todas asseções entituladas como "Endosso".

COLETÂNEAS DE DOCUMENTOS

Você pode fazer uma coletânea consitindo do Documento e outros documentos publicadossob esta Licença, e substituir as cópias individuais desta Licença nos vários documentos comuma única cópia incluida na coletânea, desde que você siga as regras desta Licença para cópiaexata de cada um dos Documentos em todos os outros aspectos.

Você pode extrair um único documento de tal coletânea, e distribuí-lo individualmente sobesta Licença, desde que você insira uma cópia desta Licença no documento extraído, e siga estaLicença em todos os outros aspectos relacionados à cópia exata daquele documento.

AGREGAÇÃO COM TRABALHOS INDEPENDENTES

Uma compilação do Documento ou derivados dele com outros trabalhos ou documentos se-parados e independentes, em um volume ou mídia de distribuição, não conta como uma Ver-são Modificada do Documento, desde que nenhum copyright de compilação seja reclamado pelacompilação. Tal compilação é chamada um "agregado", e esta Licença não se aplica aos outrostrabalhos auto-contidos compilados junto com o Documento, só por conta de terem sido assimcompilados, e eles não são trabalhos derivados do Documento.

Se o requerido para o Texto de Capa na seção 3 for aplicável a essas cópias do Documento,então, se o Documento constituir menos de um quarto de todo o agregado, os Textos de Capado Documento podem ser colocados em capas adjacentes ao Documento dentro do agregado.Senão eles precisarão aparecer nas capas de todo o agregado.

TRADUÇÃO

Tradução é considerada como um tipo de modificação, então você pode distribuir traduçõesdo Documento sob os termos da seção 4. A substituição de Seções Invariantes por traduçõesrequer uma permissão especial dos detentores do copyright das mesmas, mas você pode incluirtraduções de algumas ou de todas as Seções Invariantes em adição às versões orignais dessasSeções Invariantes. 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. No caso de discordância entre a tradução e a

17


versão original em Inglês desta Licença, a versão original em Inglês prevalecerá.

TÉRMINO

Você não pode copiar, modificar, sublicenciar, ou distribuir o Documento exceto como expres-samente especificado sob esta Licença. Qualquer outra tentativa de copiar, modificar, sublicen-ciar, ou distribuir o Documento é nula, e resultará automaticamente no término de seus direitossob esta Licença. Entretanto, terceiros que tenham recebido cópias, ou direitos de você sob estaLicença não terão suas licenças terminadas, tanto quanto esses terceiros permaneçam em totalacordo com esta Licença.

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. Tais novas versões serão similares em espirito à versãopresente, mas podem diferir em detalhes ao abordarem novos porblemas e preocupações. Vejahttp://www.gnu.org/copyleft/.

A cada versão da Licença é dado um número de versão distinto. Se o Documento especificarque uma versão particular desta Licença "ou qualquer versão posterior"se aplica ao mesmo, vocêtem a opção de seguir os termos e condições daquela versão específica, ou de qualquer versãoposterior que tenha sido publicada (não como rascunho) pela Free Software Foundation. Se oDocumento não especificar um número de Versão desta Licença, você pode escolher qualquerversão já publicada (não como rascunho) pela Free Software Foundation.

ADENDO: Como usar esta Licença para seus documentos

Para usar esta Licença num documento que você escreveu, inclua uma cópia desta Licençano 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.É dada permissão para copiar, distribuir e/ou modificar este documento sob os termos da Licençade Documentação Livre GNU, Versão 1.1 ou qualquer versão posterior publicada pela Free Soft-ware Foundation; com as Seções Invariantes sendo LISTE SEUS TÍTULOS, com os Textos daCapa da Frente sendo LISTE, e com os Textos da Quarta-Capa sendo LISTE. Uma cópia da li-cença está inclusa na seção entitulada "Licença de Documentação Livre GNU".

Se você não tiver nenhuma Seção Invariante, escreva "sem Seções Invariantes"ao invés dedizer quais são invariantes. Se você não tiver Textos de Capa da Frente, escreva "sem Textos deCapa da Frente"ao invés de "com os Textos de Capa da Frente sendo LISTE"; o mesmo para osTextos da Quarta Capa.

Se o seu documento contiver exemplos não triviais de código de programas, nós recomenda-mos a publicação desses exemplos em paralelo sob a sua escolha de licença de software livre,

18


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

19

Parte IV

ajax

20

Capítulo 1

Introducão

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

21

Capítulo 2

Plano de ensino

2.1 Objetivo

Qualificar técnicos e programadores na linguagem de programação AJAX.

2.2 Público Alvo

Técnicos e Programadores que desejam trabalhar com AJAX.

2.3 Pré-requisitos

Os usuários deverão ser, necessariamente, indicados por empresas públicas e ter conheci-mento básico acerca da lógica de programação.

2.4 Descrição

O curso será realizado na modalidade Educação a Distância e utilizará a Plataforma Moodlecomo ferramenta de aprendizagem. Ele será dividido em tópicos e cada um deles é compostopor um conjunto de atividades (lições, fóruns, glossários, questionários e outros) que deverão serexecutadas de acordo com as instruções fornecidas. O material didático está disponível on-linede acordo com as datas pré-estabelecidas em cada tópico.

Todo o material está no formato de lições, e estará disponível ao longo do curso. As liçõespoderão ser acessadas quantas vezes forem necessárias. Aconselhamos a leitura de "Ambien-tação do Moodle", para que você conheça o produto de Ensino a Distância, evitando dificuldadesadvindas do "desconhecimento"sobre o mesmo.

Ao final de cada semana do curso será disponibilizada a prova referente ao módulo estudadoanteriormente que também conterá perguntas sobre os textos indicados. Utilize o material decada semana e os exemplos disponibilizados para se preparar para prova.

Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deve serdisponibilizada no fórum ou enviada por e-mail. Diariamente os monitores darão respostas eesclarecimentos.

22


2.5 Metodologia

O curso está dividido da seguinte maneira:

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. Elas poderão ser acessadas quantas vezes forem neces-sárias, desde que esteja dentro da semana programada. Ao final de uma lição, você receberáuma nota de acordo com o seu desempenho. Responda com atenção às perguntas de cada lição,pois elas serão consideradas na sua nota final. Caso sua nota numa determinada lição for menordo que 6.0, sugerimos que você faça novamente esta lição.Ao final do curso será disponibilizada a avaliação referente ao curso. Tanto as notas das liçõesquanto a da avaliação serão consideradas para a nota final. Todos os módulos ficarão visíveispara que possam ser consultados durante a avaliação final.Aconselhamos a leitura da "Ambientação do Moodle"para que você conheça a plataforma de En-sino a Distância, evitando dificuldades advindas do "desconhecimento"sobre a mesma.Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deverá serenviada no fórum. Diariamente os monitores darão respostas e esclarecimentos.

2.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.8 Avaliação

Toda a avaliação será feita on-line.Aspectos a serem considerados na avaliação:

• Iniciativa e autonomia no processo de aprendizagem e de produção de conhecimento;

23


• Capacidade de pesquisa e abordagem criativa na solução dos problemas apresentados.

Instrumentos de avaliação:

• Participação ativa nas atividades programadas.

• Avaliação ao final do curso.

• O participante fará várias avaliações referente ao conteúdo do curso. Para a aprovação eobtenção do certificado o participante deverá obter nota final maior ou igual a 6.0 de acordocom a fórmula abaixo:

• Nota Final = ((ML x 7) + (AF x 3)) / 10 = Média aritmética das lições

• AF = Avaliações

2.9 Bibliografia

• Site official: www.w3schools.com

24

Capítulo 3

Inicio

3.1 Inicio

AJAX é uma abreviação para Asynchronous JavaScript and XML (JavaScript e XML Assín-crono). Não se trata de uma nova tecnologia, ao contrário do que parece ser, trata-se de umaforma 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 Aproximação para Aplicações Web)em 18 de Fevereiro de 2005. Esse termo é considerado o caminho inicial para quem pretendeingressar nos conhecimentos sobre AJAX.

No entanto, essa forma de juntar as tecnologias já utilizadas veio antes mesmo da criação dotermo AJAX. Tal forma já era utilizada pelo Google, pioneiro nessa nova maneira de aplicaçãoweb. Não só o Google como a Adaptive Path, empresa americana, especializada em Web e emferramentas e consultorias para tornar a experiência do usuário ao acessar um site ou aplicaçãoWeb mais agradável.

Nem mesmo o Google, nem muito menos a Adaptive Path, inventaram o Ajax, que na verdadenão possui nenhum proprietário. James Garret também não criou o Ajax, apenas criou umaabreviação, um "apelido", para a junção de novas tecnologias para facilitar a troca de informaçõesentre seus amigos e clientes desenvolvedores.

Logo depois do artigo de James Garret e os diversos exemplos passados pelo Google a res-peito da junção de novas tecnologias, tais como: GMail, Google Suggest e Google Maps, a téc-nica por trás do Ajax ganhou força por todo o mundo e graças a isso, vemos novas aplicações,queanteriormente, eram impossíveis de ser implementadas na web.

3.2 Como funciona

Uma aplicação Desktop possui uma riqueza de interfaces e tempos de resposta que estavamfora do alcance de uma aplicação Web, pela sua própria natureza de funcionamento. O Ajax entraem cena para quebrar esta barreira e abrir as portas de novas possibilidades para as aplicaçõesWeb [GARRET, 2005].

Para isso, o Ajax utiliza dos seguintes procedimentos:* usa XHTML e CSS (Cascading Style Sheets) para camada de apresentação personalizada;* usa DOM (Modelo de Objeto de Documento) para dinamismo e interatividade na interface

gráfica;* usa XML XSLT para troca e manipulação de dados;

25


* usa o objeto XMLHttpRequest para recuperação assíncrona de dados;* usa Javascript para juntar todas as partes.Normalmente, o modelo clássico de uma aplicação web, funciona da seguinte maneira:* o usuário realiza uma ação na interface (como exemplo, o clique em um botão). Com isso

uma requisição é enviada do HTTP de volta para o servidor web;* com isso, ocorre a execução, por parte do servidor, tal como uma consulta a uma base de

dados ou até mesmo um cálculo;* após essa execução, 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 informações,

o usuário não pode fazer nada além de esperar pela resposta. O AJAX faz o processamentoassíncrono, diminuindo esse tempo de resposta entre servidor e usuário.

No processamento síncrono, existe a espera do término de uma atividade para iniciar outra.Já no assíncrono (papel do ajax) as atividades podem ser executadas enquanto a primeira aindaestá sendo processada.

26

Capítulo 4

Inicio

Antes de aprender o ajax, é necessário que você tenha o conhecimento básico de:HTML/XHTML, JAVASCRIPT e um pouco de PHP.

Não há nada de novo para aprender, o AJAX usa tecnologias já existentes. Tecnologias, essasque são usadas há muito tempo por vários desenvolvedores, como dito anteriormente.

4.1 Pedidos do HTTP do AJAX

Normalmente, em um código de Javascript, se você quer alguma informação de uma base dedados ou até mesmo de um arquivo de algum servidor, você terá que utilizar um GET ou POSTdo HTML. Para que seja feito isso, o usuário terá que clicar no botão "Submit"para enviar oupegar a informação, esperar o sevidor responder para só então, uma página ser carregada comos resultados desejados pelo usuário.

Com o servidor retornando uma nova página cada vez que o usuário utiliza o "Submit", fazcom que, tradicionais aplicações web execute a ação lentamente, tornando o processo não muitoamigável com o usuário.

Com o AJAX, seu Javascript comunica-se direto com o servidor através do objeto do próprioJavascript XMLHttpRequest. Com o pedido HTTP, a página web pode fazer um pedido e obter aresposta do servidor web sem mesmo recarregar a pagina. O usuário permanecerá na mesmapágina.

4.2 O Objeto XMLHttpRequest

Com o XMLHttpRequest, o desenvolvedor pode atualizar a página, com dados do servidor,mesmo depois dela ter sido carregada.

AJAX ficou popular com o Google em 2005 com o Google Suggest. Essa ferramenta doGoogle, 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, o Javascript envia o que foi escritopara um servidor e o servidor retorna uma lista de sugestões.

O objeto XMLHttpRequest é suportado na Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 /Firefox, Opera 8+, and Netscape 7.

Exemplos em AJAXPara entendermos como o AJAX funciona, vamos criar uma pequena aplicação AJAX.

27


Primeiro vamos fazer um formulário HMTL padrão com dois campos: Nome e Hora. Feitoisso, 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 dife-rentes métodos 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 andcash"do Javascript. Para isso, vamos dá uma melhorada no arquivo "Ajax.htm"criado anterior-mente.

Ex.2:

<html><body>

<script type="text/javascript">function FuncaoAjax(){var xmlHttp;try{// Opera 8.0+, Safari,FirefoxxmlHttp=new XMLHttpRequest();}

catch (e){// Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

28


}catch (e){try

{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}

catch (e){alert("Seu browser não suporta AJAX!");return false;}

}}

}</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, em cada "try"atribuímos à variável 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")"queserá compatível com a Internet Explorer 6.0+. Se mesmo assim falhar a tentativa da criação,utilizamos o xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") que dará certo, se utilizarmos oExplorer 5.5+;

-Se, ainda depois de todas essas tentativas, não der certo, é porque o usuário utiliza umbrowser muito ultrapassado. Logo, mostra-se uma mensagem de erro, falando que o browsernão suporta o AJAX. 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 suportaAJAX!");"dificilmente 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 código utilizando o "copiar e colar"toda vez que você quiser criaresse objeto, pois esse código será compatível com qualquer browser popular, tais como: InternetExplorer, Opera, Firefox e Safari.

29

Capítulo 5

Objeto XMLHttpRequest e Aplicação II

5.1 Objeto XMLHttpRequest Cont.

Antes de continuarmos a falar sobre esse objeto e de enviar determinados dados, utilizandoo mesmo, você tem que saber três propriedades do XMLHttpRequest. Primeira propriedade

Depois de pedir ao servidor, será necessário uma função que possa receber um dado que éretornado pelo servidor. A propriedade "onreadystatechange"armazena a funcão que irá proces-sar a resposta vinda do servidor. Ex.:

xmlHttp.onreadystatechange=function()

{

// Algum codigo

}

Segunda propriedadeA propriedade "readyState"segura o status da resposta do servidor. Cada vez que essa pro-

priedade muda, ocorre a execução da propriedade onreadystatechange. Listaremos agoraalguns 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.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 onreadystate-change, para saber se o dado vindo do servidor é completo.

Terceira propriedade

30


Os dados enviados para o servidor pode ser recuperado utilizando a propriedade "response-Text". No código feito no início da lição, vamos escolher um valor para o campo "sobrenome"iguala "responseText".

Ex.:

xmlHttp.onreadystatechange=function(){

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

}

Enviar um pedido para o servidorPara enviarmos um pedido para o servidor, é necessário que utilizemos dois métodos: open()

e o send(). O primeiro método recebe três argumentos.O primeiro argumento define qual método devemos usar quando formos enviar o pedido (GET

ou POST). O segundo argumento especifica a URL da parte do programa do servidor. E o terceiroargumento especifica que o pedido deve ser assíncrono.

O método "send()"envia o pedido para o servidor.O código para esses métodos seria o seguinte:

xmlHttp.open("GET","hora.asp",true);

xmlHttp.send(null);

Obs: Suponha que o arquivo HTML e ASP esteja no mesmo diretório. Agora, é necessáriosaber quando vamos utilizar a função AJAX, ou seja, quando ela será executada. Deixaremosessa função rodando "por trás da cena"no momento que o usuário estiver digitando no camponome do nosso código criado no início do curso. Ex.(Parte do código) :

<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 código criado no inicio do curso.Ex.(Código melhorado!) :

<html><body>

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

31


{// Opera 8.0+, Safari,FirefoxxmlHttp=new XMLHttpRequest();}

catch (e){// Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}

catch (e){try

{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}

catch (e){alert("Seu browser não suporta AJAX!");return false;}

}}

}xmlHttp.onreadystatechange=function()

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

}}

xmlHttp.open("GET","hora.asp",true);xmlHttp.send(null);</script>

<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 otempo atual. O código hora.asp seria esse:

32


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

Obs.: A propriedade expires define quanto tempo uma página será armazenada em um na-vegador antes da expiração. Se um usuário retorna para uma mesma página antes de expirá-la,a versão armazenada é mostrada. response.expires=-1 indica que a página nunca será arma-zenada. Basicamente é isso que precisamos saber sobre o Ajax, a próxima lição será amontagem de algum código mais complexo, utilizando como exemplo o Javascript.

33

Capítulo 6

Aplicação AJAX + Javascript

6.1 Aplicação Ajax + Javacript

O que faremos a seguir é o seguinte: Pediremos para o usuário digitar alguma letra em umcampo. Com isso ele terá como resposta algumas sugestões do que ele esteja querendo. NoExemplo, usaremos nome de música. O usuário digitará uma letra no campo "Banda"e embaixoserá listado algumas opções.

Antes de prosseguirmos com a lição, vamos mostrar algumas funções que serão úteis para aaplicação de Ajax em um código de Javascript.

Começaremos com a função: "MostraOpcao()". Tal função é em Javascript, onde o lugar delaé na tag «head></head>"do html.

Agora veja como é o código dessa função:

<form>Banda: <input type="text" id="txt1" onkeyup="MostraOpcao(this.value)"></form>

<p> Opções: <span id="txthint"></span></p>

Como pode ser observado, trata-se de um código html com um campo de entrada chamado"txt1". O parágrafo (<p> </p>) abaixo é um span chamado "txthint". Esse span é utilizado paraguardar dados recuperados do servidor web. Quando o usuário insere um dado, a função"MostraOpcao"é executada. A execução dessa função é provocada pelo evento onkeyup. Istoé, toda vez que o usuário escreve alguma coisa no campo "Banda", a função "MostraOpcao"échamada.

function MostraOpcao(str){if (str.length==0)

{document.getElementById("txtHint").innerHTML="";return;}

xmlHttp=GetXmlHttpObject()if (xmlHttp==null)

{

34


alert ("Seu Browser não 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 função é executada toda vez que uma letra (caractere) é escrito no campo "Banda:", Caso ocampo for vazio (str == 0) a função simplesmente limpa o índice guardado dos dados recuperadosdo servidor web do txtHint.

Seguindo a condição imposta para que ocorra a execução da função (str > 0), mostraremosagora o que a função faz:

• 1) define a url que será enviada para o servidor;

• 2) adiciona um parâmetro "q"para a url com o índice do campo de entrada;

• 3) adiciona um número aleatório para impedir que o usuário use um arquivo fechado;

• 4) cria um objeto XMLHTTP, e diz para o objeto executar uma função chamada stateChan-ged quando uma mudança é provocada;

• 5) abre uma URL, esta função possui três parâmetros: - método: indica se a passagem deparâmetros para a URL será via POST ou GET, neste caso é o GET; - URL: endereço queserá acessado; - assíncrono: se verdadeiro, executa assíncrono, ou seja, não espera peloretorno da URL para continuar executando o script. Se falso o browser ficará ?travado?enquanto o script é executado.

• 6) envia uma resposta HTTP para o servidor.

Como já foi mencionado, a função "GetXmlHttpObject()"é utilizada para testar se o Objeto xmlHttppoderá ser criado em diferentes browsers.

6.2 Código da função GetXmlHttpObject()

function GetXmlHttpObject(){var xmlHttp=null;try{// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();}

catch (e){// Internet Explorer

35


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

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

}return xmlHttp;

}

A função stateChange() também está presente nesse código, sua utilização se dá quandoocorre alguma mudança no estado do objeto xmlhttp e o código 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 lição anterior, tem comofunção recuperar os dados enviados para o servidor.

36

Capítulo 7

Código Final

7.1 Página Ajax HTML

O código abaixo, é em html e contém um link para um código javascript que será mostradologo mais. Não haverá coisas muito novas nessa lição, simplesmente reunimos os códigosfeitos 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> Opções: <span id="txthint"></span></p>

</body></html>

O código 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


alert ("Se browser não 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+, SafarixmlHttp=new XMLHttpRequest();}

catch (e){// Internet Explorertry{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}

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

}return xmlHttp;}

Com isso encerramos a junção das outras funções feitas anteriormente.

Logo abaixo está o código da url que será enviada para o servidor (Opcao.php).

<?php

$a[]="Aerosmith";

38


$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[]="Legião 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 opções do array tem tamanho q>0if (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


}}

}}

// Se nenhuma opção for encontrada ou algo foi digitado de forma incorreta// Ocorrerá a mensagem "sem sugestões".if ($hint == ""){$response="Sem sugestões!";}else{$OpcaoEscolhida=$opcao;}

//saida da respostaecho $OpcaoEscolhida;?>

Com isso encerramos o curso de AJAX. Agora basta usar a criatividade e criar diversas pági-nas otimizidas e com rápida resposta. Aprofunde mais utilizando PHP, ASP, CSS, entre outraslinguagens para aplicação web.

40

Ajax

Technology

Transcript of Ajax