Escolar Documentos
Profissional Documentos
Cultura Documentos
Ajax
Ajax
Verso 1.0.0
Sumrio
I
II Informaes Bsicas
11
IV
ajax
20
1 Introduco
21
2 Plano de ensino
2.1 Objetivo . . .
2.2 Pblico Alvo .
2.3 Pr-requisitos
2.4 Descrio . .
2.5 Metodologia .
2.6 Cronograma
2.7 Programa . .
2.8 Avaliao . .
2.9 Bibliografia .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
22
22
22
22
22
23
23
23
23
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 Aplicao II
30
5.1 Objeto XMLHttpRequest Cont. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
6 Aplicao AJAX + Javascript
34
6.1 Aplicao Ajax + Javacript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
6.2 Cdigo da funo GetXmlHttpObject() . . . . . . . . . . . . . . . . . . . . . . . . . . 35
CDTC
Brasil/DF
7 Cdigo Final
37
7.1 Pgina Ajax HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Parte I
CDTC
Brasil/DF
Contedo
O contedo dessa apostila fruto da compilao de diversos materiais livres publicados na internet, disponveis em diversos sites ou originalmente produzido no CDTC em http://www.cdtc.org.br.
O formato original deste material bem como sua atualizao est disponvel dentro da licena
GNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seo de
mesmo nome, tendo inclusive uma verso traduzida (no oficial).
A reviso e alterao vem sendo realizada pelo CDTC (suporte@cdtc.org.br), desde outubro
de 2006. Criticas e sugestes construtivas so bem-vindas a qualquer tempo.
Autores
A autoria deste contedo, atividades e avaliaes de responsabilidade de Diego de Aquino
Soares (diego@cdtc.org.br)
.
O texto original faz parte do projeto Centro de Difuso de Tecnolgia e Conhecimento, que vem
sendo realizado pelo ITI em conjunto com outros parceiros institucionais, atuando em conjunto
com as universidades federais brasileiras que tem produzido e utilizado Software Livre, apoiando
inclusive a comunidade Free Software junto a outras entidades no pas.
Informaes adicionais podem ser obtidas atrves do email ouvidoria@cdtc.org.br, ou da
home page da entidade, atrves da URL http://www.cdtc.org.br.
Garantias
O material contido nesta apostila isento de garantias e o seu uso de inteira responsabilidade do usurio/leitor. Os autores, bem como o ITI e seus parceiros, no se responsabilizam
direta ou indiretamente por qualquer prejuzo oriundo da utilizao do material aqui contido.
Licena
Copyright 2006,Diego de Aquino Soares (diego@cdtc.org.br)
.
Permission is granted to copy, distribute and/or modify this document under the terms
of the GNU Free Documentation License, Version 1.1 or any later version published by
the Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOSTILA. A copy of the license is included in the section entitled GNU Free Documentation
License.
CDTC
Brasil/DF
Parte II
Informaes Bsicas
CDTC
Brasil/DF
Sobre o CDTC
Objetivo Geral
O Projeto CDTC visa a promoo e o desenvolvimento de aes que incentivem a disseminao de solues que utilizem padres abertos e no proprietrios de tecnologia, em proveito do
desenvolvimento social, cultural, poltico, tecnolgico e econmico da sociedade brasileira.
Objetivo Especfico
Auxiliar o Governo Federal na implantao do plano nacional de software no-proprietrio e
de cdigo fonte aberto, identificando e mobilizando grupos de formadores de opinio dentre os
servidores pblicos e agentes polticos da Unio Federal, estimulando e incentivando o mercado
nacional a adotar novos modelos de negcio da tecnologia da informao e de novos negcios
de comunicao com base em software no-proprietrio e de cdigo fonte aberto, oferecendo
treinamento especfico para tcnicos, profissionais de suporte e funcionrios pblicos usurios,
criando grupos de funcionrios pblicos que iro treinar outros funcionrios pblicos e atuar como
incentivadores e defensores de produtos de software no proprietrios e cdigo fonte aberto, oferecendo contedo tcnico on-line para servios de suporte, ferramentas para desenvolvimento de
produtos de software no proprietrios e de seu cdigo fonte livre, articulando redes de terceiros
(dentro e fora do governo) fornecedoras de educao, pesquisa, desenvolvimento e teste de produtos de software livre.
Guia do aluno
Neste guia, voc ter reunidas uma srie de informaes importantes para que voc comece
seu curso. So elas:
Licenas para cpia de material disponvel
Os 10 mandamentos do aluno de Educao a Distncia
Como participar dos foruns e da wikipdia
Primeiros passos
muito importante que voc entre em contato com TODAS estas informaes, seguindo o
roteiro acima.
Licena
Copyright 2006, Diego de Aquino Soares (diego@cdtc.org.br)
.
7
CDTC
Brasil/DF
dada permisso para copiar, distribuir e/ou modificar este documento sob os termos
da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior
pblicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSA
APOSTILA. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU".
CDTC
Brasil/DF
todos participantes. Assim, se o monitor ou algum outro participante tiver uma informao que
interesse ao grupo, favor post-la aqui.
Porm, se o que voc deseja resolver alguma dvida ou discutir algum tpico especfico do
curso. recomendado que voc faa uso do Forum de dvidas gerais que lhe d recursos mais
efetivos para esta prtica.
. O frum de dvidas gerais tem por objetivo disponibilizar um meio fcil, rpido e interativo
para solucionar suas dvidas e trocar experincias. As mensagens postadas nele so enviadas
a todos participantes do curso. Assim, fica muito mais fcil obter respostas, j que todos podem
ajudar.
Se voc receber uma mensagem com algum tpico que saiba responder, no se preocupe com a
formalizao ou a gramtica. Responda! E no se esquea de que antes de abrir um novo tpico
recomendvel ver se a sua pergunta j foi feita por outro participante.
A segunda forma se d pelas Wikis:
. Uma wiki uma pgina web que pode ser editada colaborativamente, ou seja, qualquer participante pode inserir, editar, apagar textos. As verses antigas vo sendo arquivadas e podem
ser recuperadas a qualquer momento que um dos participantes o desejar. Assim, ela oferece um
timo suporte a processos de aprendizagem colaborativa. A maior wiki na web o site "Wikipdia", uma experincia grandiosa de construo de uma enciclopdia de forma colaborativa, por
pessoas de todas as partes do mundo. Acesse-a em portugus pelos links:
Pgina principal da Wiki - http://pt.wikipedia.org/wiki/
Agradecemos antecipadamente a sua colaborao com a aprendizagem do grupo!
Primeiros Passos
Para uma melhor aprendizagem recomendvel que voc siga os seguintes passos:
Ler o Plano de Ensino e entender a que seu curso se dispe a ensinar;
Ler a Ambientao do Moodle para aprender a navegar neste ambiente e se utilizar das
ferramentas bsicas do mesmo;
Entrar nas lies seguindo a seqncia descrita no Plano de Ensino;
Qualquer dvida, reporte ao Frum de Dvidas Gerais.
Perfil do Tutor
Segue-se uma descrio do tutor ideal, baseada no feedback de alunos e de tutores.
O tutor ideal um modelo de excelncia: consistente, justo e profissional nos respectivos
valores e atitudes, incentiva mas honesto, imparcial, amvel, positivo, respeitador, aceita as
idias dos estudantes, paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.
9
CDTC
Brasil/DF
A classificao por um tutor desta natureza proporciona o melhor feedback possvel, crucial, e,
para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem. Este tutor
ou instrutor:
fornece explicaes claras acerca do que ele espera, e do estilo de classificao que ir
utilizar;
gosta que lhe faam perguntas adicionais;
identifica as nossas falhas, mas corrige-as amavelmente, diz um estudante, e explica porque motivo a classificao foi ou no foi atribuda;
tece comentrios completos e construtivos, mas de forma agradvel (em contraste com um
reparo de um estudante: os comentrios deixam-nos com uma sensao de crtica, de
ameaa e de nervossismo)
d uma ajuda complementar para encorajar um estudante em dificuldade;
esclarece pontos que no foram entendidos, ou corretamente aprendidos anteriormente;
ajuda o estudante a alcanar os seus objetivos;
flexvel quando necessrio;
mostra um interesse genuno em motivar os alunos (mesmo os principiantes e, por isso,
talvez numa fase menos interessante para o tutor);
escreve todas as correes de forma legvel e com um nvel de pormenorizao adequado;
acima de tudo, devolve os trabalhos rapidamente;
10
Parte III
11
CDTC
Brasil/DF
INTRODUO
O propsito desta Licena deixar um manual, livro-texto ou outro documento escrito "livre"no
sentido de liberdade: assegurar a qualquer um a efetiva liberdade de copi-lo ou redistribui-lo,
com ou sem modificaes, comercialmente ou no. Secundariamente, esta Licena mantm
para o autor e editor uma forma de ter crdito por seu trabalho, sem ser considerado responsvel
pelas modificaes feitas por terceiros.
Esta Licena um tipo de "copyleft"("direitos revertidos"), o que significa que derivaes do
documento precisam ser livres no mesmo sentido. Ela complementa a GNU Licena Pblica Geral (GNU GPL), que um copyleft para software livre.
Ns fizemos esta Licena para que seja usada em manuais de software livre, por que software
livre precisa de documentao livre: um programa livre deve ser acompanhado de manuais que
provenham as mesmas liberdades que o software possui. Mas esta Licena no est restrita a
manuais de software; ela pode ser usada para qualquer trabalho em texto, independentemente
do assunto ou se ele publicado como um livro impresso. Ns recomendamos esta Licena principalmente para trabalhos cujo propsito seja de introduo ou referncia.
APLICABILIDADE E DEFINIES
Esta Licena se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelo
detentor dos direitos autorais dizendo que ele pode ser distribudo sob os termos desta Licena.
O "Documento"abaixo se refere a qualquer manual ou texto. Qualquer pessoa do pblico um
12
CDTC
Brasil/DF
13
CDTC
Brasil/DF
14
CDTC
Brasil/DF
MODIFICAES
Voc pode copiar e distribuir uma Verso Modificada do Documento sob as condies das sees 2 e 3 acima, desde que voc publique a Verso Modificada estritamente sob esta Licena,
com a Verso Modificada tomando o papel do Documento, de forma a licenciar a distribuio
e modificao da Verso Modificada para quem quer que possua uma cpia da mesma. Alm
disso, voc precisa fazer o seguinte na verso modificada:
A. Usar na Pgina de Ttulo (e nas capas, se houver alguma) um ttulo distinto daquele do Documento, e daqueles de verses anteriores (que deveriam, se houvesse algum, estarem listados
na seo "Histrico do Documento"). Voc pode usar o mesmo ttulo de uma verso anterior se
o editor original daquela verso lhe der permisso;
B. Listar na Pgina de Ttulo, como autores, uma ou mais das pessoas ou entidades responsveis pela autoria das modificaes na Verso Modificada, conjuntamente com pelo menos cinco
dos autores principais do Documento (todos os seus autores principais, se ele tiver menos que
cinco);
C. Colocar na Pgina de Ttulo o nome do editor da Verso Modificada, como o editor;
D. Preservar todas as notas de copyright do Documento;
E. Adicionar uma nota de copyright apropriada para suas prprias modificaes adjacente s
outras notas de copyright;
F. Incluir, imediatamente depois das notas de copyright, uma nota de licena dando ao pblico
o direito de usar a Verso Modificada sob os termos desta Licena, na forma mostrada no tpico
abaixo;
G. Preservar nessa nota de licena as listas completas das Sees Invariantes e os Textos de
Capa requeridos dados na nota de licena do Documento;
H. Incluir uma cpia inalterada desta Licena;
I. Preservar a seo entitulada "Histrico", e seu ttulo, e adicionar mesma um item dizendo
pelo menos o ttulo, ano, novos autores e editor da Verso Modificada como dados na Pgina de
Ttulo. Se no houver uma sesso denominada "Histrico"no Documento, criar uma dizendo o
ttulo, ano, autores, e editor do Documento como dados em sua Pgina de Ttulo, ento adicionar
um item descrevendo a Verso Modificada, tal como descrito na sentena anterior;
J. Preservar o endereo de rede, se algum, dado no Documento para acesso pblico a uma
cpia Transparente do Documento, e da mesma forma, as localizaes de rede dadas no Documento para as verses anteriores em que ele foi baseado. Elas podem ser colocadas na seo
"Histrico". Voc pode omitir uma localizao na rede para um trabalho que tenha sido publicado
pelo menos quatro anos antes do Documento, ou se o editor original da verso a que ela se refira
der sua permisso;
K. Em qualquer seo entitulada "Agradecimentos"ou "Dedicatrias", preservar o ttulo da
15
CDTC
Brasil/DF
seo e preservar a seo em toda substncia e fim de cada um dos agradecimentos de contribuidores e/ou dedicatrias dados;
L. Preservar todas as Sees Invariantes do Documento, inalteradas em seus textos ou em
seus ttulos. Nmeros de seo ou equivalentes no so considerados parte dos ttulos da seo;
M. Apagar qualquer seo entitulada "Endossos". Tal sesso no pode ser includa na Verso
Modificada;
N. No reentitular qualquer seo existente com o ttulo "Endossos"ou com qualquer outro
ttulo dado a uma Seo Invariante.
Se a Verso Modificada incluir novas sees iniciais ou apndices que se qualifiquem como
Sees Secundrias e no contenham nenhum material copiado do Documento, voc pode optar
por designar alguma ou todas aquelas sees como invariantes. Para fazer isso, adicione seus
ttulos lista de Sees Invariantes na nota de licena da Verso Modificada. Esses ttulos precisam ser diferentes de qualquer outro ttulo de seo.
Voc pode adicionar uma seo entitulada "Endossos", desde que ela no contenha qualquer coisa alm de endossos da sua Verso Modificada por vrias pessoas ou entidades - por
exemplo, declaraes de revisores ou de que o texto foi aprovado por uma organizao como a
definio oficial de um padro.
Voc pode adicionar uma passagem de at cinco palavras como um Texto de Capa da Frente
, e uma passagem de at 25 palavras como um Texto de Quarta Capa, ao final da lista de Textos
de Capa na Verso Modificada. Somente uma passagem de Texto da Capa da Frente e uma de
Texto da Quarta Capa podem ser adicionados por (ou por acordos feitos por) qualquer entidade.
Se o Documento j incluir um texto de capa para a mesma capa, adicionado previamente por
voc ou por acordo feito com alguma entidade para a qual voc esteja agindo, voc no pode
adicionar um outro; mas voc pode trocar o antigo, com permisso explcita do editor anterior que
adicionou a passagem antiga.
O(s) autor(es) e editor(es) do Documento no do permisso por esta Licena para que seus
nomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquer
Verso Modificada.
COMBINANDO DOCUMENTOS
Voc pode combinar o Documento com outros documentos publicados sob esta Licena, sob
os termos definidos na seo 4 acima para verses modificadas, desde que voc inclua na combinao todas as Sees Invariantes de todos os documentos originais, sem modificaes, e liste
todas elas como Sees Invariantes de seu trabalho combinado em sua nota de licena.
O trabalho combinado precisa conter apenas uma cpia desta Licena, e Sees Invariantes
Idnticas com multiplas ocorrncias podem ser substitudas por apenas uma cpia. Se houver
mltiplas Sees Invariantes com o mesmo nome mas com contedos distintos, faa o ttulo de
16
CDTC
Brasil/DF
cada seo nico adicionando ao final do mesmo, em parnteses, o nome do autor ou editor
origianl daquela seo, se for conhecido, ou um nmero que seja nico. Faa o mesmo ajuste
nos ttulos de seo na lista de Sees Invariantes nota de licena do trabalho combinado.
Na combinao, voc precisa combinar quaisquer sees entituladas "Histrico"dos diversos documentos originais, formando uma seo entitulada "Histrico"; da mesma forma combine
quaisquer sees entituladas "Agradecimentos", ou "Dedicatrias". Voc precisa apagar todas as
sees entituladas como "Endosso".
COLETNEAS DE DOCUMENTOS
Voc pode fazer uma coletnea consitindo do Documento e outros documentos publicados
sob esta Licena, e substituir as cpias individuais desta Licena nos vrios documentos com
uma nica cpia incluida na coletnea, desde que voc siga as regras desta Licena para cpia
exata de cada um dos Documentos em todos os outros aspectos.
Voc pode extrair um nico documento de tal coletnea, e distribu-lo individualmente sob
esta Licena, desde que voc insira uma cpia desta Licena no documento extrado, e siga esta
Licena em todos os outros aspectos relacionados cpia exata daquele documento.
TRADUO
Traduo considerada como um tipo de modificao, ento voc pode distribuir tradues
do Documento sob os termos da seo 4. A substituio de Sees Invariantes por tradues
requer uma permisso especial dos detentores do copyright das mesmas, mas voc pode incluir
tradues de algumas ou de todas as Sees Invariantes em adio s verses orignais dessas
Sees Invariantes. Voc pode incluir uma traduo desta Licena desde que voc tambm inclua a verso original em Ingls desta Licena. No caso de discordncia entre a traduo e a
17
CDTC
Brasil/DF
TRMINO
Voc no pode copiar, modificar, sublicenciar, ou distribuir o Documento exceto como expressamente especificado sob esta Licena. Qualquer outra tentativa de copiar, modificar, sublicenciar, ou distribuir o Documento nula, e resultar automaticamente no trmino de seus direitos
sob esta Licena. Entretanto, terceiros que tenham recebido cpias, ou direitos de voc sob esta
Licena no tero suas licenas terminadas, tanto quanto esses terceiros permaneam em total
acordo com esta Licena.
18
CDTC
tal como a GNU General Public License, para permitir o seu uso em software livre.
19
Brasil/DF
Parte IV
ajax
20
Captulo 1
Introduco
Este um curso bsico sobre AJAX. Nele mostraremos algumas funes do Javascript, que
tero o tempo de execuo mais rpido, graas ao Ajax. necessrio ter conhecimentos de
Javascript e HTML e o conhecimento de XML e PHP se voc quizer deixar sua pgina mais
complexa.
21
Captulo 2
Plano de ensino
2.1 Objetivo
Qualificar tcnicos e programadores na linguagem de programao AJAX.
2.3 Pr-requisitos
Os usurios devero ser, necessariamente, indicados por empresas pblicas e ter conhecimento bsico acerca da lgica de programao.
2.4 Descrio
O curso ser realizado na modalidade Educao a Distncia e utilizar a Plataforma Moodle
como ferramenta de aprendizagem. Ele ser dividido em tpicos e cada um deles composto
por um conjunto de atividades (lies, fruns, glossrios, questionrios e outros) que devero ser
executadas de acordo com as instrues fornecidas. O material didtico est disponvel on-line
de acordo com as datas pr-estabelecidas em cada tpico.
Todo o material est no formato de lies, e estar disponvel ao longo do curso. As lies
podero ser acessadas quantas vezes forem necessrias. Aconselhamos a leitura de "Ambientao do Moodle", para que voc conhea o produto de Ensino a Distncia, evitando dificuldades
advindas do "desconhecimento"sobre o mesmo.
Ao final de cada semana do curso ser disponibilizada a prova referente ao mdulo estudado
anteriormente que tambm conter perguntas sobre os textos indicados. Utilize o material de
cada semana e os exemplos disponibilizados para se preparar para prova.
Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida deve ser
disponibilizada no frum ou enviada por e-mail. Diariamente os monitores daro respostas e
esclarecimentos.
22
CDTC
Brasil/DF
2.5 Metodologia
O curso est dividido da seguinte maneira:
2.6 Cronograma
Introduo
Inicio
Objeto XMLHttpRequest e Aplicao II
Aplicao AJAX + Javascript
Cdigo Final
As lies contm o contudo principal. Elas podero ser acessadas quantas vezes forem necessrias, desde que esteja dentro da semana programada. Ao final de uma lio, voc receber
uma nota de acordo com o seu desempenho. Responda com ateno s perguntas de cada lio,
pois elas sero consideradas na sua nota final. Caso sua nota numa determinada lio for menor
do que 6.0, sugerimos que voc faa novamente esta lio.
Ao final do curso ser disponibilizada a avaliao referente ao curso. Tanto as notas das lies
quanto a da avaliao sero consideradas para a nota final. Todos os mdulos ficaro visveis
para que possam ser consultados durante a avaliao final.
Aconselhamos a leitura da "Ambientao do Moodle"para que voc conhea a plataforma de Ensino a Distncia, evitando dificuldades advindas do "desconhecimento"sobre a mesma.
Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida dever ser
enviada no frum. Diariamente os monitores daro respostas e esclarecimentos.
2.7 Programa
O curso de Ajax oferecer o seguinte contedo:
Introduo
Inicio
Objeto XMLHttpRequest e Aplicao II
Aplicao AJAX + Javascript
Cdigo Final
2.8 Avaliao
Toda a avaliao ser feita on-line.
Aspectos a serem considerados na avaliao:
Iniciativa e autonomia no processo de aprendizagem e de produo de conhecimento;
23
CDTC
Brasil/DF
2.9 Bibliografia
Site official: www.w3schools.com
24
Captulo 3
Inicio
3.1 Inicio
AJAX uma abreviao para Asynchronous JavaScript and XML (JavaScript e XML Assncrono). No se trata de uma nova tecnologia, ao contrrio do que parece ser, trata-se de uma
forma de juntar as tecnologias j existentes.
O termo AJAX foi utilizado pela primeira vez por Jesse James Garrett em seu artigo AJAX:
A New Approach to Web Applications (Ajax: Uma nova Aproximao para Aplicaes Web)
em 18 de Fevereiro de 2005. Esse termo considerado o caminho inicial para quem pretende
ingressar nos conhecimentos sobre AJAX.
No entanto, essa forma de juntar as tecnologias j utilizadas veio antes mesmo da criao do
termo AJAX. Tal forma j era utilizada pelo Google, pioneiro nessa nova maneira de aplicao
web. No s o Google como a Adaptive Path, empresa americana, especializada em Web e em
ferramentas e consultorias para tornar a experincia do usurio ao acessar um site ou aplicao
Web mais agradvel.
Nem mesmo o Google, nem muito menos a Adaptive Path, inventaram o Ajax, que na verdade
no possui nenhum proprietrio. James Garret tambm no criou o Ajax, apenas criou uma
abreviao, um "apelido", para a juno de novas tecnologias para facilitar a troca de informaes
entre seus amigos e clientes desenvolvedores.
Logo depois do artigo de James Garret e os diversos exemplos passados pelo Google a respeito da juno de novas tecnologias, tais como: GMail, Google Suggest e Google Maps, a tcnica por trs do Ajax ganhou fora por todo o mundo e graas a isso, vemos novas aplicaes,que
anteriormente, eram impossveis de ser implementadas na web.
CDTC
Brasil/DF
26
Captulo 4
Inicio
Antes de aprender o ajax, necessrio que voc tenha o conhecimento bsico de:
HTML/XHTML, JAVASCRIPT e um pouco de PHP.
No h nada de novo para aprender, o AJAX usa tecnologias j existentes. Tecnologias, essas
que so usadas h muito tempo por vrios desenvolvedores, como dito anteriormente.
27
CDTC
Brasil/DF
Primeiro vamos fazer um formulrio HMTL padro com dois campos: Nome e Hora. Feito
isso, salve o arquivo criado como "Ajax.htm".
Ex.1:
<html>
<body>
<form name = "Formulario">
Nome: <input type = "text" name = "NomeUsuario" />
Hora: <input type = "text" name = "hora" />
</form>
</body>
</hmtl>
<html>
<body>
<script type="text/javascript">
function FuncaoAjax()
{
var xmlHttp;
try
{
// Opera 8.0+, Safari,Firefox
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
28
CDTC
Brasil/DF
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Seu browser no 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 cdigo:
-em primeiro lugar, em cada "try"atribumos varivel xmlHttp criada para armazenar o objeto
XMLHttpRequest;
-depois disso, tentamos criar o objeto "xmlHttp = new XMLHttpRequest()"para os browsers:
Opera 8.0+, Safari ou Firefox. Caso haja alguma falha para criar esse objeto nesses browsers,
tentamos criar na Internet Explorer com "xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")"que
ser compatvel com a Internet Explorer 6.0+. Se mesmo assim falhar a tentativa da criao,
utilizamos o xmlHttp=new ActiveXObject("Microsoft.XMLHTTP") que dar certo, se utilizarmos o
Explorer 5.5+;
-Se, ainda depois de todas essas tentativas, no der certo, porque o usurio utiliza um
browser muito ultrapassado. Logo, mostra-se uma mensagem de erro, falando que o browser
no suporta o AJAX.
Obs1: claro que os browser modernos utilizados atualmente suportam essa tecnologia fazendo com que a parte do cdigo "alert("Seu browser no suporta
AJAX!");"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 cdigo utilizando o "copiar e colar"toda vez que voc quiser criar
esse objeto, pois esse cdigo ser compatvel com qualquer browser popular, tais como: Internet
Explorer, Opera, Firefox e Safari.
29
Captulo 5
xmlHttp.onreadystatechange=function()
{
// Algum codigo
}
Segunda propriedade
A propriedade "readyState"segura o status da resposta do servidor. Cada vez que essa propriedade muda, ocorre a execuo da propriedade onreadystatechange.
Listaremos agora
alguns valores que podem ser usado nessa propriedade:
Estado 0 => O pedido no inicializado Estado 1 => Houve um set up do pedido Estado 2
=> O pedido foi enviado Estado 3 => O pedido est em processo Estado 4 => O pedido est
completo
Exemplo dessa propriedade:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Apanha o dado da resposta do servidor
}
}
Obs.: Veja que a propriedade "readyState"est sendo usada em conjunto com a onreadystatechange, para saber se o dado vindo do servidor completo.
Terceira propriedade
30
CDTC
Brasil/DF
Os dados enviados para o servidor pode ser recuperado utilizando a propriedade "responseText". No cdigo feito no incio da lio, vamos escolher um valor para o campo "sobrenome"igual
a "responseText".
Ex.:
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.formulario.hora.value=xmlHttp.responseText;
}
}
Enviar um pedido para o servidor
Para enviarmos um pedido para o servidor, necessrio que utilizemos dois mtodos: open()
e o send(). O primeiro mtodo recebe trs argumentos.
O primeiro argumento define qual mtodo devemos usar quando formos enviar o pedido (GET
ou POST). O segundo argumento especifica a URL da parte do programa do servidor. E o terceiro
argumento especifica que o pedido deve ser assncrono.
O mtodo "send()"envia o pedido para o servidor.
O cdigo para esses mtodos seria o seguinte:
xmlHttp.open("GET","hora.asp",true);
xmlHttp.send(null);
Obs: Suponha que o arquivo HTML e ASP esteja no mesmo diretrio.
Agora, necessrio
saber quando vamos utilizar a funo AJAX, ou seja, quando ela ser executada. Deixaremos
essa funo rodando "por trs da cena"no momento que o usurio estiver digitando no campo
nome do nosso cdigo criado no incio do curso.
Ex.(Parte do cdigo) :
<form name="Formulario">
Nome: <input type="text" onkeyup="FuncaoAjax();" name="nome" />
Hora: <input type="text" name="hora" />
</form>
Feito isso, agora, vamos d um "upgrade"no nosso cdigo criado no inicio do curso.
Ex.(Cdigo melhorado!) :
<html>
<body>
<script type="text/javascript">
function FuncaoAjax()
{
var xmlHttp;
try
31
CDTC
Brasil/DF
{
// Opera 8.0+, Safari,Firefox
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Seu browser no suporta AJAX!");
return false;
}
}
}
}
xmlHttp.onreadystatechange=function()
{
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 o
tempo atual. O cdigo hora.asp seria esse:
32
CDTC
Brasil/DF
<%
response.expires=-1
response.write(hora)
%>
Obs.: A propriedade expires define quanto tempo uma pgina ser armazenada em um navegador antes da expirao. Se um usurio retorna para uma mesma pgina antes de expir-la,
a verso armazenada mostrada. response.expires=-1 indica que a pgina nunca ser armazenada.
Basicamente isso que precisamos saber sobre o Ajax, a prxima lio ser a
montagem de algum cdigo mais complexo, utilizando como exemplo o Javascript.
33
Captulo 6
<form>
Banda: <input type="text" id="txt1" onkeyup="MostraOpcao(this.value)">
</form>
<p> Opes: <span id="txthint"></span></p>
Como pode ser observado, trata-se de um cdigo html com um campo de entrada chamado
"txt1". O pargrafo (<p> </p>) abaixo um span chamado "txthint". Esse span utilizado para
guardar dados recuperados do servidor web.
Quando o usurio insere um dado, a funo
"MostraOpcao" executada. A execuo dessa funo provocada pelo evento onkeyup. Isto
, toda vez que o usurio escreve alguma coisa no campo "Banda", a funo "MostraOpcao"
chamada.
function MostraOpcao(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
34
CDTC
Brasil/DF
CDTC
Brasil/DF
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
A funo stateChange() tambm est presente nesse cdigo, sua utilizao se d quando
ocorre alguma mudana no estado do objeto xmlhttp e o cdigo dela esse:
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
Obs: Quando o estado muda para quatro (Pedido completo) o ndice do que est armazenado
preenchido pela propriedade responseText, que como foi mecionado na lio anterior, tem como
funo recuperar os dados enviados para o servidor.
36
Captulo 7
Cdigo Final
7.1 Pgina Ajax HTML
O cdigo abaixo, em html e contm um link para um cdigo javascript que ser mostrado
logo mais.
No haver coisas muito novas nessa lio, simplesmente reunimos os cdigos
feitos anteriormente e demos uma otimizada nele.
<html>
<head>
<script src="NomeBanda.js"></script>
</head>
<body>
<form>
Banda: <input type="text" id="txt1" onkeyup="MostraOpcao(this.value)">
</form>
<p> Opes: <span id="txthint"></span></p>
</body>
</html>
O cdigo que est salvo como "NomeBanda.js" dessa forma:
var xmlHttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
37
CDTC
<?php
$a[]="Aerosmith";
38
Brasil/DF
CDTC
$a[]="Angra";
$a[]="Araketu";
$a[]="Dead fish";
$a[]="Detonautas";
$a[]="Deftones";
$a[]="Incubus";
$a[]="Inimigos da HP";
$a[]="Natiruts";
$a[]="Biquini Cavadao";
$a[]="Pitty";
$a[]="JorgeBen";
$a[]="Engenheiros";
$a[]="Legio Urbana";
$a[]="Capital Inicial";
$a[]="Paralamas";
$a[]="REM";
$a[]="Metallica";
$a[]="Greenday";
$a[]="ACDC";
$a[]="Nazareth";
$a[]="PinkFloyd";
$a[]="Pink";
$a[]="Fagner";
$a[]="Nirvana";
$a[]="Pantera";
$a[]="Pisirico";
$a[]="Vagabanda";
$a[]="Vinny";
$a[]="Catedral";
//pegando o parametro "q" da url
$q=$_GET["q"];
//ve se as opes do array tem tamanho q>0
if (strlen($q) > 0)
{
$opcao="";
for($i=0; $i<cont($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($opcao=="")
{
$opcao=$a[$i];
}
else
{
$opcao=$opcao." , ".$a[$i];
39
Brasil/DF
CDTC
Brasil/DF
40