O documento descreve o que é AJAX e como ele funciona, permitindo que aplicações da web sejam mais dinâmicas e interativas ao carregar dados de forma assíncrona sem recarregar a página. Ele também fornece um exemplo básico de como fazer uma solicitação assíncrona para carregar um arquivo de texto.

1. AJAX - Tutorial
Anselmo Luiz Éden Battisti, Christiano Julio Pilger de Brito
Universidade Estadual do Oeste do Paraná
Reitoria - DRI
Cascavel - Paraná - Brasil
anselmobattisti@yahoo.com.br, chrisjulio@gmail.com
18 de agosto de 2006
1 AJAX - Sem Mistérios
eteˆ @—™rónimo em língu— ingles— de Asyncronous Javascript And XMLA é o uso sisteE
máti™o de t—v—s™ript e ˆwv @e deriv—dosA p—r— torn—r o n—veg—dor m—is inter—tivo ™om
o usuárioD utiliz—ndoEse de soli™it—ções —ssín™ron—s de inform—çõesF eteˆ não é somente
um novo modeloD é t—m˜ém um— ini™i—tiv— n— ™onstrução de —pli™—ções web m—is dinâmiE
™—s e ™ri—tiv—sF eteˆ não é um— te™nologi—D são re—lmente vári—s te™nologi—s tr—˜—lh—ndo
junt—sD ™—d— um— f—zendo su— p—rteD ofere™endo nov—s fun™ion—lid—desF eteˆ in™orpor—
em seu modeloX
• epresent—ção ˜—se—d— em p—drõesD us—ndo ˆr„wv e gƒƒY
• ixposição e inter—ção dinâmi™— us—ndo o hywY
• snter™âm˜io e m—nipul—ção de d—dos us—ndo ˆwv e ˆƒv„Y
• ‚e™uper—ção —ssín™ron— de d—dos us—ndo o o˜jeto ˆwvrttp‚equestY
• Javascript unindo tod—s el—s em ™onjuntoF
y modelo ™lássi™o de —pli™—ção web tr—˜—lh— —ssimX e m—iori— d—s —ções do usuário
n— interf—™e disp—r— um— soli™it—ção r„„€ p—r— o servidor webF y servidor pro™ess— —lgo
re™uper—ndo d—dosD m—stig—ndo númerosD ™onvers—ndo ™om vários sistem—s leg—dos e
então retorn— um— págin— r„wv p—r— o ™lienteF É um modelo —d—pt—do do uso origin—l
d— web ™omo um —gente de hipertextoD porém o que f—z — web ˜o— p—r— hipertexto não
ne™ess—ri—mente f—z el— ˜o— p—r— —pli™—ções de softw—reF
ist— —proxim—ção possui muito dos sentidos té™ni™osD m—s não f—z tudo que um usuário
experiente poderi— f—zerF inqu—nto o servidor está f—zendo seu tr—˜—lhoD o que o usuário
est—rá f—zendoc y que é ™ertoD esper—ndoF i — ™—d— et—p— em um— t—ref—D o usuário
—gu—rd— m—is um— vezF
I

2. y˜vi—menteD se nós estivéssemos projet—ndo — web do n—d— p—r— —pli™—çõesD não f—E
rí—mos ™om que os usuários esper—ssem em vãoF …m— vez que — interf—™e está ™—rreg—d—D
por que — inter—ção do usuário deveri— p—r—r — ™—d— vez que — —pli™—ção pre™is—sse de —lgo
do servidorc x— re—lid—deD por que o usuário deveri— ver — —pli™—ção ir —o servidor tod—
vezc
e m—ior v—nt—gem d—s —pli™—ções eteˆ é que el—s rod—m no próprio n—veg—dor webF
intãoD p—r— est—r há˜il — exe™ut—r —pli™—ções eteˆD ˜—st—r possuir —lgum dos n—veg—dores
modernosD ou sej—D l—nç—dos —pós PHHIF ƒão elesX wozill— pirefoxD snternet ixplorer SCD
yper—D uonqueror e ƒ—f—riF
pigur— IX hi—gr—m— de requisições —o servidor
2 A Classe Assíncrona
€—r— se f—zer um pedido r„„€ —o servidor us—ndo t—v—s™riptD vo™ê pre™is— de um o˜jeto
que disponi˜iliz— ess— fun™ion—lid—deF „—l ™l—sse foi primeiro introduzid— no snternet ixE
plorer so˜ — form— de um o˜jeto e™tiveˆ ™h—m—do ˆwvr„„€F intão o wozill—D o ƒ—f—ri
e outros ˜rowsers seguir—mEseD implement—ndo um— ™l—sse de nome ˆwvrttp‚equest que
suport—v— os métodos e —s propried—des do o˜jeto e™tiveˆ origin—l d— wi™rosoftF
y ™ódigo —˜—ixo mostr— — form— genéri™— de inst—n™i—r um o˜jeto que proverá os
me™—nismos p—r— pedidos —ssín™ronosF
gódigo IX 9—j—xsnitFjs9
f u n c t i o n a j a x I n i t ( ) {
v a r x m l h t t p ;
5 t r y {
x m l h t t p = new XMLHttpRequest ( ) ;
} c a t c h ( e e ) {
t r y {
x m l h t t p = new A c t i v e X O b j e c t ( "Msxml2.XMLHTTP" ) ;
10 } c a t c h ( e ) {
t r y {
x m l h t t p = new A c t i v e X O b j e c t ( "Microsoft.XMLHTTP" ) ;
} c a t c h (E) {
x m l h t t p = f a l s e ;
15 }
}
}
return x m l h t t p ;
20 }
ys métodos e —tri˜utos p—drões estão des™ritos —˜—ixoF
2.1 Atributos
ƒegue —˜—ixo —lguns dos —tri˜utos do o˜jeto de ™onexão —ssín™ron—F
P

3. readyState X ™ódigo que diz o st—tus d— soli™it—ção —ssín™ron—D ele v—ri— de H —té S
• H @uniniti—lizedAY
• I @— ™—rreg—rAY
• P @™—rreg—doAY
• Q @inter—tivoAY
• R @™ompletoAF
status X ƒt—tus do retorno do r„wvD são os ™ódigos p—drões do r„wv PHH okD RHH
no found
responseText X retorn— — ™—dei— de ™—r—™teres que o servidor enviouF
responseXml X retorn— o ˆwv o servidor enviouF
onreadystatechange X de(ne qu—l função será ™h—m—d— p—r— f—zer — m—nipul—ção
dos d—dos —ssim que houver um retornoF
http•requestFonre—dyst—te™h—nge a n—meyf„hepun™tionY
†—mos — ver o que é que est— função deve f—zerF €rimeiroD — função pre™is— de veri(™—r
o est—do do pedidoF ƒe o est—do possui o v—lor RD isso signi(™— que — tot—lid—de d— respost—
do servidor foi re™e˜id— e que pode ™ontinu—r — pro™essáEl— à vont—deF
e próxim— ™ois— — veri(™—r é o ™ódigo do est—do d— respost— r„„€ do servidorF €—r—
os nossos o˜jetivos só est—mos interess—dos n— respost— PHH yuF
if (http_request.readyState == 4) {
if (http_request.status == 200) {
// deu certo
} else {}
}
2.2 Métodos
ƒegue —˜—ixo —lguns dos métodos do o˜jeto de ™onexão —ssín™ron—F
open(mode, url, boolean)
• modeX „ipo d— requisiçãoD qi„ ou €yƒ„
• urlX …rl do o˜jeto soli™it—do no modo —ssín™ronoD pro questões de segur—nç— o pirefox
não permite que — …‚v estej— em um servidor diferente d— págin— que est— f—zendo
— soli™it—çãoF
• ˜oole—nX true @—ssín™ronoA ou false @sín™ronoAF
send() É o método ƒixh que —tiv— — ™onexão e f—z — requisição de inform—ções —o
do™umento —˜erto pelo método y€ixF iste método possui somente um p—râmetro que
serve p—r— envi—rmos d—dos extr—s —o do™umento que est—mos —™ess—ndoF …s—mos este
p—râmetro qu—ndoD por exemploD no método y€ixD —™ess—mos o do™umento ™om €yƒ„
—o invés de qi„D neste ™—so os d—dos do €yƒ„ são p—ss—dos neste p—râmetro de ƒixhF
Q

4. 3 Exemplo 1 Solicitando um arquivo de texto
xo exemplo I iremos tr—˜—lh—r ™om os elementos ˜ási™os vistos —té —gor—
gódigo PX 9ixemplo I9
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
< t i t l e >Exemplo 1 − C a r r e g a r A r q u i v o do S e r v i d o r </ t i t l e >
5 < s c r i p t t y p e="text/javascript" s r c="ajaxInit.js"></ s c r i p t >
< s c r i p t t y p e="text/javascript">
f u n c t i o n c a r r e g a r ( ) {
a j a x = a j a x I n i t ( ) ;
document . g e t E l e m e n t B y I d ( "texto" ) . innerHTML = "Carregando ..." ;
10 if ( a j a x ) {
a j a x . open ( 'GET' , 'http ://200.201.81.38/ anselmo/ciclo/texto.txt' , t r u e ) ;
a j a x . o n r e a d y s t a t e c h a n g e = f u n c t i o n ( ) {
if ( a j a x . r e a d y S t a t e == 4 ) {
if( a j a x . s t a t u s == 2 0 0 ) {
15 document . g e t E l e m e n t B y I d ( "texto" ) . innerHTML = a j a x . r e s p o n s e T e x t ;
}
}
}
}
20 a j a x . s e n d ( n u l l ) ;
}
</ s c r i p t >
</head>
<body>
25 <d i v i d="texto"></d i v >
<i n p u t t y p e="button" v a l u e="Carregar" o n C l i c k=" carregar () "/>
</body>
</html>
x— linh— V o™orre — ™h—m—d— p—r— — função ajaxInit() que est— dentro do —rquivo
referen™i—do n— linh— SF e linh— W getElementByid('texto') 1
e innerHTML2
inserem o
texto g—rreg—ndo dentro do hs† ™om o id igu—l — textoF
x—s linh—s IID IP e IQ são veri(™—dos o status do pedidoD status do retorno e efetiv—
inserção do ™onteúdo do —rquivo textoFtxt no hs†D respe™tiv—menteF
xeste primeiro exemplo não houve nenhum pro™ess—mento por p—rte de um— lingu—gem
de progr—m—ção no servidorD porém no mundo re—l ger—lmente um— ™h—m—d— no modo
—ssín™rono se ™omuni™— ™om um script @€r€D tƒ€D eƒ€D ‚u˜yD gqsD €i‚v FFFAD que f—z
um pro™ess—mento so˜re os d—dos — ele envi—dos e por (m retorn— o result—doD nosso
próximo exemplo mostr—rá ex—t—mente istoF
4 Exemplo 2 Criando uma calculadora
im nosso segundo exemplo iremos introduzir o uso de um— lingu—gem server-side re—E
liz—ndo um pro™ess—mento so˜re os d—dos envi—dos no modo —ssín™ronoD isto será feito
™ri—ndo um— ™—l™ul—dor—F
1Comando em Javascript para selecionar o elemento cujo id é igual a texto.
2Comando em Javascript para inserir uma string em um elemento de modo que esta seja interpretada
como código HTML.
R

5. xoss— ™—l™ul—dor— será ™ompost— de P ™—ix—s de texto p—r— — entr—d— dos v—lores e
um— l—˜el p—r— exi˜ição dos result—dosD — úni™— oper—ção que el— re—liz— é — som—F
gódigo QX 9g—l™ul—dor— r„wv9
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
< t i t l e >Exemplo 2 − C a l c u l a d o r a </ t i t l e >
5 < s c r i p t t y p e="text/javascript" s r c="ajaxInit.js"></ s c r i p t >
< s c r i p t t y p e="text/javascript">
f u n c t i o n c a l c u l a r ( ) {
a j a x = a j a x I n i t ( ) ;
document . g e t E l e m e n t B y I d ( "resultado" ) . innerHTML = "Calculando ..." ;
10 if ( a j a x ) {
a j a x . o n r e a d y s t a t e c h a n g e = r e s u l t a d o ;
v1 = document . g e t E l e m e n t B y I d ( "v1" ) . v a l u e ;
v2 = document . g e t E l e m e n t B y I d ( "v2" ) . v a l u e ;
u r l = 'http ://200.201.81.38/ anselmo/ciclo/calcular.php?v1='+v1+'&v2='+v2 ;
15 a j a x . open ( 'GET' , u r l , t r u e ) ;
a j a x . s e n d ( n u l l ) ;
}
}
20 f u n c t i o n r e s u l t a d o ( ) {
if ( a j a x . r e a d y S t a t e == 4 ) {
if( a j a x . s t a t u s == 2 0 0 ) {
document . g e t E l e m e n t B y I d ( "resultado" ) . innerHTML = a j a x . r e s p o n s e T e x t ;
}
25 }
}
</ s c r i p t >
</head>
<body>
30 <form name="calculadora">
<i n p u t t y p e="text" name="v1" i d="v1" s i z e="3"/> + <i n p u t t y p e="text" name="v2"
i d="v2" s i z e="3"/> =
< l a b e l i d="resultado"></ l a b e l > <b r/>
<i n p u t t y p e="button" v a l u e="Carregar" o n C l i c k="calcular ()"/>
</form>
35 </body>
</html>
gódigo RX 9g—l™ul—dor— €r€9
<?
e c h o $_GET [ 'v1' ] + $_GET [ 'v2' ] ;
?>
x— linh— II o método onreadystatechange —ssume um— função extern— — função que
™ri— o o˜jeto —j—xF
e linh— IP e IQ ™ri— du—s v—riáveis que —rm—zen—m os v—lores dos ™—mpos que estão
no formulárioD este d—do são pegos —tr—vés do value 3
F
e v—riável url d— linh— IR irá ™onter o endereço e —s v—riáveis que serão us—d—s pelo
€r€ p—r— ™—l™ul—r — som— dos result—dosF
y —rquivo €r€ que re—liz— o ™ál™ulo d— som— é re—lmente simplesD ele peg— —s du—s
v—riáveis v1 e v2 do array $_GET do €r€D som— seus v—lores e es™reve o result—doF
3Propiedade de alguns objetos em Javascript que retorna o conteúdo do mesmo
S

6. eté o momento o result—do de noss—s ™h—m—d—s —ssín™ron—s er—m es™ritos de form—
diret— —tr—vés do método innerHTMLD o uso deste método é des—™onselh—do pelo ‡Qg
pel—s seguinte r—zõesF
• É um— propried—de desenvolvid— pel— MicrosoftD por est— r—zão proprietári—D porém
— m—ior p—rte dos n—veg—dores in™orporouE—F
• €or não ser p—drão est— sendo —˜olid— d—s nov—s versões destes n—veg—dores
• y result—do é um string —o p—sso que o hyw é um— estrutur— hierárqui™— em
ˆr„wv
ys próximos dois exemplo são idênti™osD diferen™i—ndo —pen— — form— ™omo os d—dos
são p—ss—dos do servidor p—r— o ™lienteD o primeiro us—ndo texto norm—l e o outro será
us—do um— string no form—to JSON e hyw p—r— exi˜ir o result—do de um— requisiçãoF
5 Exemplo 3 Preenchimento um SELECT a partir de
outro SELECT
…m exemplo ™lássi™o do preen™himento de um SELECT — p—rtir de outro é — es™olh— d—s
™id—des de um determin—do est—doF iste re™urso é um— d—s m—iores 9pedr—s no s—p—to9
dos progr—m—dores de sistem— webD pois qu—ndo o usuário sele™ion— o est—do tod— — págin—
deve ser re™—rreg—d—D in™lusive os v—lores dos dem—is ™—mpos já preen™hidosD p—r— que o
SELECT ™om —s ™id—des sej— exi˜idoF
gom eteˆ est— t—ref— (™— ˜em m—is fá™il pois ˜—st— que sej— feit— um— ™onsult— d—s
™id—des do est—do que est— no primeiro SELECT e inserir —s ™id—des no segundo SELECTF
5.1 Usando InnerHTML
gódigo SX 9gid—des r„wv9
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional //EN"
"http ://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd">
<html xmlns="http ://www.w3.org /1999/ xhtml" xml : l a n g="pt -br"
l a n g="pt -br">
5 <head>
< t i t l e >Exemplo 3 − E s c o l h a a Cidade </ t i t l e >
< s c r i p t t y p e="text/javascript" s r c="ajaxInit.js"></ s c r i p t >
< s c r i p t t y p e="text/javascript">
f u n c t i o n s e l e c i o n a C i d a d e ( e s t a d o ) {
10 a j a x = a j a x I n i t ( ) ;
if ( a j a x ) {
a j a x . o n r e a d y s t a t e c h a n g e = e s c r e v e C i d a d e s ;
u r l = 'http ://200.201.81.38/ anselmo/ciclo/cidades.php?estado='+e s t a d o ;
a j a x . open ( 'GET' , u r l , t r u e ) ;
15 a j a x . s e n d ( n u l l ) ;
}
}
f u n c t i o n e s c r e v e C i d a d e s ( ) {
T

7. 20 if ( a j a x . r e a d y S t a t e == 4 ) {
if( a j a x . s t a t u s == 2 0 0 ) {
document . g e t E l e m e n t B y I d ( "cidade" ) . innerHTML = a j a x . r e s p o n s e T e x t ;
}
}
25 }
f u n c t i o n s e l e c i o n a C i d a d e J s o n ( e s t a d o ) {
a j a x = a j a x I n i t ( ) ;
if ( a j a x ) {
30 a j a x . o n r e a d y s t a t e c h a n g e = e s c r e v e C i d a d e s J s o n ;
u r l = 'http ://200.201.81.38/ anselmo/ciclo/cidadesJson.php?estado='+e s t a d o ;
a j a x . open ( 'GET' , u r l , t r u e ) ;
a j a x . s e n d ( n u l l ) ;
}
35 }
f u n c t i o n e s c r e v e C i d a d e s J s o n ( ) {
if ( a j a x . r e a d y S t a t e == 4 ) {
if( a j a x . s t a t u s == 2 0 0 ) {
40 v a r x = 0 ;
v a r j s o n = e v a l ( "("+a j a x . r e s p o n s e T e x t+")" ) ;
l i m p a r D e s t i n o ( "cidade2" ) ;
45 for( x =0; x<=j s o n . c i d a d e s . l e n g t h ; x++){
o p t i o n = document . c r e a t e E l e m e n t ( "option" ) ;
o p t i o n . s e t A t t r i b u t e ( "value" , j s o n . c i d a d e s [ x ] . cdg ) ;
50
o p t i o n . a p p e n d C h i l d ( document . c r e a t e T e x t N o d e ( j s o n . c i d a d e s [ x ] . nm) ) ;
document . g e t E l e m e n t B y I d ( document . c r e a t e T e x t N o d e ( j s o n . c i d a d e s [ x ] . nm) ) ;
55 document . g e t E l e m e n t B y I d ( "cidade2" ) . a p p e n d C h i l d ( o p t i o n ) ;
}
}
}
}
60
/∗
Remove todos os elementos f i l h o s de um elemento
∗/
f u n c t i o n l i m p a r D e s t i n o ( d e s t i n o ) {
65 o b j = document . g e t E l e m e n t B y I d ( d e s t i n o ) ;
while( o b j . f i r s t C h i l d )
o b j . r e m o v e C h i l d ( o b j . f i r s t C h i l d ) ;
}
70 </ s c r i p t >
</head>
<body>
<form name="selecioneCidade">
< l a b e l for="estado" a c c e s s k e y="e"><u>E</u>s t a d o : </ l a b e l >
75 < s e l e c t name="estado" i d="estado" onChange="if (this.options[this.selectedIndex
].value){selecionaCidade(this.options[this.selectedIndex ].value)}">
<o p t i o n v a l u e="-">−−−</o p t i o n >
<o p t i o n v a l u e="pr">PR</o p t i o n >
<o p t i o n v a l u e="sp">SP</o p t i o n >
</ s e l e c t ><b r/>
80
< l a b e l for="cidade" a c c e s s k e y="c"><u>C</u>i d a d e : </ l a b e l >
< s e l e c t name="cidade" i d="cidade">
</ s e l e c t >
U

8. 85 <hr>
< l a b e l for="estado" a c c e s s k e y="e"><u>E</u>s t a d o : </ l a b e l >
< s e l e c t name="estado" i d="estado" onChange="if (this.options[this.selectedIndex
].value){selecionaCidadeJson(this.options[this.selectedIndex ].value)}">
<o p t i o n v a l u e="-">−−−</o p t i o n >
<o p t i o n v a l u e="pr">PR</o p t i o n >
90 <o p t i o n v a l u e="sp">SP</o p t i o n >
</ s e l e c t ><b r/>
< l a b e l for="cidade" a c c e s s k e y="c"><u>C</u>i d a d e : </ l a b e l >
< s e l e c t name="cidade" i d="cidade2">
95 <i n p u t t y p e="button" o n C l i c k="alert(eval('fred =999; wilma =777; document.write(
fred + wilma);'))"/>
</ s e l e c t >
</form>
</body>
</html>
gódigo TX 9gid—des €r€9
<?
h e a d e r ( "Content -Type: text/html; charset=iso -8859 -1" ) ;
$ e s t a d o = $_GET [ 'estado ' ] ;
5 $ c i d a d e s = "" ;
if ( $ e s t a d o=="pr" ) {
$ c i d a d e s .= "<option value ="1" > Tupãssi </option >" ;
$ c i d a d e s .= "<option value ="2" > Toledo </option >" ;
$ c i d a d e s .= "<option value ="3" > Cascavel </option >" ;
10 $ c i d a d e s .= "<option value ="4" > Pato Branco </option >" ;
}
if ( $ e s t a d o=="sp" ) {
$ c i d a d e s .= "<option value ="5" >Mogi </option >" ;
15 $ c i d a d e s .= "<option value ="6" > Palmeiras </option >" ;
$ c i d a d e s .= "<option value ="7" > Santos </option >" ;
}
e c h o $ c i d a d e s ;
20 ?>
y —rquivo gid—desFphp ger— os elementos options que serão inseridos dentro do SE-
LECT d—s ™id—desF ist— —˜ord—gem não é muito inteligente pois — qu—ntid—de de inforE
m—ção tr—nsmitid—s do servidor p—r— o ™liente em su— m—iori— foi desne™essári—F h— ™id—de
—pen—s o ™ódigo e o nome deveri—m ser tr—nsmitidosD —s dem—is inform—ções são repetid—s
e podem ser ger—d—s pelo n—veg—dorF
x— linh— QI do ™ódigo fonte S é feit— — veri(™—ção se um dos elementos do SELECT
est—do foi sele™ion—doD se sim então envie o v—lor p—r— — função selecionaCidadeF
y ™ódigo fonte T — v—riável est—do é re™e˜id— e de —™ordo ™om el— é p—ss—do —o n—veE
g—dor —s opções do SELECT ™id—deF
5.2 Usando JSON
tƒyx @™om — mesm— pronun™i— do nome 4t—son4em inglêsAD um —™rônimo p—r— Javascript
Object NotationD é um form—to leve p—r— inter™âm˜io de d—dos ™omput—™ion—isF tƒyx é
V

9. um su˜™onjunto d— not—ção de o˜jeto de t—v—s™riptD m—s seu uso não requer t—v—s™ript
ex™lusiv—menteF
e simpli™id—de de tƒyx tem result—do em seu uso difundidoD espe™i—lmente ™omo um—
—ltern—tiv— p—r— ˆwv em eteˆF …m— d—s v—nt—gens reivindi™—d—s de tƒyx so˜re ˆwv
™omo um form—to p—r— inter™âm˜io de d—dos neste ™ontextoD é o f—to de ser muito m—is
fá™il es™rever um —n—lis—dor tƒyxF im t—v—s™ript mesmoD tƒyx pode ser —n—lis—do triviE
—lmente us—ndo — função ev—l@AF ssto foi import—nte p—r— — —™eit—ção de tƒyx dentro d—
™omunid—de eteˆ devido — presenç— deste re™urso de t—v—s™ript em todos os n—veg—dores
web —tu—isF
x— práti™—D os —rgumentos — respeito d— f—™ilid—de de desenvolvimento e perform—n™e
do —n—lis—dor são r—r—mente relev—dos devido —os interesses de segur—nç— no uso de ev—l@A
e — ™res™ente integr—ção de pro™ess—mento ˆwv nos n—veg—dores web modernosF €or est—
r—zão tƒyx é tipi™—mente us—do em —m˜ientes onde o t—m—nho do )uxo de d—dos entre o
™liente e o servidor é de supr— importân™i— @d—í seu uso por qoogleD ‰—hooD et™FD os qu—is
servem milhões de usuáriosAD onde — fonte dos d—dos pode ser expli™it—mente ™on(ávelD e
onde — perd— dos re™ursos de pro™ess—mento ˆƒv„ no l—do ™liente p—r— m—nipul—ção de
d—dos ou ger—ção d— interf—™eD não é um— ™onsider—çãoF
inqu—nto tƒyx é freqüentemente posi™ion—do 4em ™onfronto4™om ˆwvD não é in™oE
mum ver t—nto tƒyx ™omo ˆwv sendo us—dos n— mesm— —pli™—çãoF €or exemploD um—
—pli™—ção no l—do ™liente — qu—l integr— d—dos do qoogle w—ps ™om d—dos —tmosféri™os
—tr—vés de ƒye€D requer suporte p—r— —m˜os form—tos de d—dosF
pigur— PX eutom—to que ger— — lingu—gem tƒyx
e (gur— P ilustr— em form— de um —utôm—to (nito — gr—máti™— d— lingu—gem JSONF
e string —˜—ixo mostr— um retorno d—s ™id—des do est—do do €—r—náF
{
'cidades':[
{'cdg':'1','nm':'Tupãssi'},
{'cdg':'2','nm':'Toledo'},
{'cdg':'3','nm':'Cascavel'},
{'cdg':'4','nm':'Pato Branco'}
]
}
…s—ndo — função eval4
do Javascript podemos tr—nsform—r est— string em um— estruE
tur— de o˜jetos f—™ilmente m—nipuláveisF
ƒe us—rmos — função eval no retorno d—s ™id—des poderi—mos por exemplo —™ess—r o
™ódigo d— ™id—de de €—to fr—n™o —tr—vés do seguinte ™om—ndoX
4Introduzida na especicação 1.0 do Javascript esta função interpreta uma string como uma expressão,
eval(fred=999; wilma=777; document.write(fred + wilma);) retorna 1776
W

10. json = eval((+ajax.responseText+));
json.cidades[3].cdg;
x— primeir— linh— é —pli™—d— — função eval e seu result—do é —rm—zen—do n— v—riável
jsonD n— linh— P é —™ess—do o —tri˜uto ™id—desD que é um vetorD n— posição Q no —tri˜uto
™dgF
€—r— um exemplo ™ompleto vej— os ™ódigos —˜—ixoF
gódigo UX 9gid—des r„wv9
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional //EN
http ://www.w3.org/TR/xhtml1/DTD/xhtml1 -transitional.dtd
html xmlns=http ://www.w3.org /1999/ xhtml xml : l a n g=pt -br
l a n g=pt -br
5 head
t i t l e Exemplo 3 − E s c o l h a a Cidade / t i t l e
s c r i p t t y p e=text/javascript s r c=ajaxInit.js/ s c r i p t
s c r i p t t y p e=text/javascript
10 f u n c t i o n s e l e c i o n a C i d a d e J s o n ( e s t a d o ) {
a j a x = a j a x I n i t ( ) ;
if ( a j a x ) {
a j a x . o n r e a d y s t a t e c h a n g e = e s c r e v e C i d a d e s J s o n ;
u r l = 'http ://200.201.81.38/ anselmo/ciclo/cidadesJson.php?estado='+e s t a d o ;
15 a j a x . open ( 'GET' , u r l , t r u e ) ;
a j a x . s e n d ( n u l l ) ;
}
}
20 f u n c t i o n e s c r e v e C i d a d e s J s o n ( ) {
if ( a j a x . r e a d y S t a t e == 4 ) {
if( a j a x . s t a t u s == 2 0 0 ) {
v a r x = 0 ;
v a r j s o n = e v a l ( (+a j a x . r e s p o n s e T e x t+) ) ;
25
l i m p a r D e s t i n o ( cidade2 ) ;
for( x =0; x=j s o n . c i d a d e s . l e n g t h ; x++){
30 o p t i o n = document . c r e a t e E l e m e n t ( option ) ;
o p t i o n . s e t A t t r i b u t e ( value , j s o n . c i d a d e s [ x ] . cdg ) ;
o p t i o n . a p p e n d C h i l d ( document . c r e a t e T e x t N o d e ( j s o n . c i d a d e s [ x ] . nm) ) ;
35
document . g e t E l e m e n t B y I d ( document . c r e a t e T e x t N o d e ( j s o n . c i d a d e s [ x ] . nm) ) ;
document . g e t E l e m e n t B y I d ( cidade2 ) . a p p e n d C h i l d ( o p t i o n ) ;
}
40 }
}
}
/∗
45 Remove todos os elementos f i l h o s de um elemento
∗/
f u n c t i o n l i m p a r D e s t i n o ( d e s t i n o ) {
o b j = document . g e t E l e m e n t B y I d ( d e s t i n o ) ;
while( o b j . f i r s t C h i l d )
50 o b j . r e m o v e C h i l d ( o b j . f i r s t C h i l d ) ;
}
/ s c r i p t
IH

11. /head
55 body
form name=selecioneCidade
l a b e l for=estado a c c e s s k e y=euE/us t a d o : / l a b e l
s e l e c t name=estado i d=estado onChange=if (this.options[this.selectedIndex
].value){selecionaCidadeJson(this.options[this.selectedIndex ].value)}
o p t i o n v a l u e=-−−−/o p t i o n
60 o p t i o n v a l u e=prPR/o p t i o n
o p t i o n v a l u e=spSP/o p t i o n
/ s e l e c t b r/
l a b e l for=cidade a c c e s s k e y=cuC/ui d a d e : / l a b e l
65 s e l e c t name=cidade i d=cidade2
/ s e l e c t
/form
/body
/html
gódigo VX 9gid—des €r€9
?
h e a d e r ( Content -Type: text/html; charset=iso -8859 -1 ) ;
$ e s t a d o = $_GET [ 'estado ' ] ;
5 $ c i d a d e s = {'cidades ':[ ;
if ( $ e s t a d o==pr ) {
$ c i d a d e s .= {'cdg ':'1','nm ':'Tupãssi '},
{'cdg ':'2','nm ':'Toledo '},
{'cdg ':'3','nm ':'Cascavel '},
10 {'cdg ':'4','nm ':'Pato Branco '}]} ;
}
if ( $ e s t a d o==sp ) {
$ c i d a d e s .= {'cdg ':'5','nm ':'Mogi '},
15 {'cdg ':'6','nm ':'Palmeiras '},
{'cdg ':'7','nm ':'Santos '}]} ;
}
e c h o $ c i d a d e s ;
20 ?
‚evis—ndo o gódigo V podemos ver que — linh— P ™h—m— — função headerD nel— é p—ss—do
o ™om—ndo charset=iso88591D isto é muito import—nte pois diz — ™odi(™—ção do texto que
est— sendo retorn—doD evit—ndo —ssim que o n—veg—dor do usuário exi˜— de form— in™orret—
os —™entos e outros ™—r—™teres espe™i—isF
gom os exemplos —™im— pudemos ter um— ˜o— noção de ™omo utiliz—r o —j—x em noss—s
—pli™—ções webD m—sD queremos ™ois—s m—is dinâmi™—s e ™om efeitos por isso v—mos f—zer
um pequeno Google Sugest
6 Sugerindo um Conteúdo
xosso próximo exemplo ™onsistirá em um ™—mpo de texto que — ™—d— te™l— pression—d— irá
—o servidor e tr—rá um— list— de p—l—vr—s que ™ome™em ™om o que já foi es™ritoF ssto será
exi˜ido em um— hs†F u—ndo ™li™—rmos em um— d—s p—l—vr—s que vier—m do servidor —
hs† irá sumir e o texto irá p—r— dentro d— ™—ix— de textoF
II

12. iste sistem— é utiliz—do por exemplo no serviço de eEm—il do YahooD neleD qu—ndo
digit—Ese o nome do ™ont—to ele já v—i (ltr—ndo os que ™omeç—m ™om —s letr—s já digit—d—sF
gódigo WX 9euto gomplet—r r„wv9
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 3.2 Final//EN
html
head
t i t l e Auto Completar / t i t l e
5 s c r i p t t y p e=text/javascript s r c=ajaxInit.js/ s c r i p t
s c r i p t t y p e=text/javascript
f u n c t i o n s u g e r i r ( s ) {
a j a x = a j a x I n i t ( ) ;
document . g e t E l e m e n t B y I d ( resultado ) . innerHTML = Calculando ... ;
10 if ( a j a x ) {
a j a x . o n r e a d y s t a t e c h a n g e = r e s u l t a d o ;
u r l = 'http ://200.201.81.38/ anselmo/ciclo/autoCompletar.php?s='+s ;
a j a x . open ( 'GET' , u r l , t r u e ) ;
a j a x . s e n d ( n u l l ) ;
15 }
}
f u n c t i o n r e s u l t a d o ( ) {
if ( a j a x . r e a d y S t a t e == 4 ) {
20 if( a j a x . s t a t u s == 2 0 0 ) {
j s o n = e v a l ( (+a j a x . r e s p o n s e T e x t+) ) ;
v a r x = 0 ;
l i m p a r D e s t i n o ( resultado ) ;
document . g e t E l e m e n t B y I d ( 'resultado ') . s t y l e . v i s i b i l i t y ='visible ' ;
25 for ( x =0; x j s o n . p a l . l e n g t h ; x++) {
P = document . c r e a t e E l e m e n t ( p ) ;
P . a p p e n d C h i l d ( document . c r e a t e T e x t N o d e ( j s o n . p a l [ x ] ) ) ;
P . s e t A t t r i b u t e ( onClick , document.getElementById('pal ').value='+
j s o n . p a l [ x ]+ '; document.
getElementById('resultado ').style.visibility='hidden ' ) ;
document . g e t E l e m e n t B y I d ( resultado ) . a p p e n d C h i l d (P) ;
30 }
}
}
}
35 /∗
Remove todos os elementos f i l h o s de um elemento
∗/
f u n c t i o n l i m p a r D e s t i n o ( d e s t i n o ) {
o b j = document . g e t E l e m e n t B y I d ( d e s t i n o ) ;
40 while( o b j . f i r s t C h i l d )
o b j . r e m o v e C h i l d ( o b j . f i r s t C h i l d ) ;
}
/ s c r i p t
s t y l e t y p e=text/css
45 #r e s u l t a d o {
background−c o l o r : #e 5 e 5 e 5 ;
b o r d e r : 1 px s o l i d #000;
w id th : 150 px ;
p a d d i n g : 0 px ;
50 margin : 0 px ;
p o s i t i o n : r e l a t i v e ;
margin−l e f t : 45 px ;
margin−t o p : 0 px ;
}
55 p {
l i n e −h e i g h t : 15 px ;
margin : 0 px ;
f o n t : 18 px Arial , s a n s −s e r i f ;
IP

13. p a d d i n g : 5 px ;
60 }
p : h o v e r {
background−c o l o r : #c d c d c d ;
c u r s o r : p o i n t e r ;
}
65 / s t y l e
/head
body
form name=auto
l a b e l for=pal a c c e s s k e y=palP a l a v r a / l a b e l
70 i n p u t t y p e=text i d=pal name=pal onKeyUp=sugerir(document.getElementById
('pal ').value)/
d i v i d=resultado s t y l e=visibility : hidden/d i v
/form
/body
/html
gódigo IHX 9euto gomplet—r €r€9
?
$p [ 0 ] = abacate ;
$p [ 1 ] = abobora ;
$p [ 2 ] = banana ;
5 $p [ 3 ] = beco ;
$p [ 4 ] = cabo ;
$p [ 5 ] = cebo ;
$p [ 6 ] = dedo ;
$p [ 7 ] = dado ;
10 $p [ 8 ] = elefante ;
$p [ 9 ] = faca ;
$p [ 1 0 ] = gato ;
$p [ 1 1 ] = porta ;
15 $ s e a r c h = $_GET [ 's' ] ;
$x = 0 ;
$ r e s = {'pal ':[ ;
for ( $x = 0 ; $x 11; $x++){
if( $ s e a r c h==s u b s t r ( $p [ $x ] , 0 , s t r l e n ( $ s e a r c h ) ) ) {
20 $ r e s .= ' . $p [ $x ] . ', ;
}
}
$ r e s = s u b s t r ( $ r e s , 0 , ( s t r l e n ( $ r e s ) −1) ) ;
$ r e s .= ]} ;
25 e c h o $ r e s ;
?
†—mos —n—lis—r o gódigo WD n— linh— PR é ™h—m—d— — função style5
Fvisibility6
de(ne
que o result—do est— o™ultoF
x— linh— PV du—s funções são —di™ion—d—s —o p—rágr—fo ™om o texto que veio do servidorD
— primeir— função ™olo™— — p—l—vr— dentro d— ™—ix— de texto e — segund— função es™onde
o hs† result—doF
egor— v—mos ver o gódigo IH em €r€D existe um vetor ™h—m—do 6p ™om IP p—l—vr—sD
— linh— IU e PH mont—m — string no form—to jsonD — linh— PQ remove — virgul— d— últim—
p—l—vr—F
5Acessa os estilos em CSS em um objeto
6Atributo que dene se o objeto esta visível 'visible' ou oculto 'hidden'
IQ

14. 6.1 Ligando a um Banco de Dados
e integr—ção de eteˆ ™om ˜—n™os de d—dos não difere em n—d— do que foi feito —té —gor—D
pois —o (m do uso do ˜—n™o de d—dos pelo ™liente o servidor envi— um— string de volt—F
xosso exemplo us—rá o mesmo —rquivo r„wv do ™ódigo —nteriorD —pen—s modi(™—reE
mos o —rquivo Fphp que será ™h—m—do por eleF
gódigo IIX 9gonexão ™om o f—n™o9
?php
# FileName=Connection_php_mysql.htm
# Type=MYSQL
# HTTP=true
5 $hostname_conexao = localhost ;
$ d a t a b a s e _ c o n e x a o = test ;
$username_conexao = aluno ;
$password_conexao = aluno ;
$ c o n e x a o = mysql_pconnect ( $hostname_conexao , $username_conexao , $password_conexao ) o r d i e
( m y s q l _ e r r o r ( ) ) ;
10 m y s q l _ s e l e c t _ d b ( $ d a t a b a s e _ c o n e x a o , $ c o n e x a o ) ;
?
gódigo IPX 9euto gomplet—r …s—ndo f—n™o de h—dos9
?
i n c l u d e ( conexao.php ) ;
$ s e a r c h = $_GET [ 's' ] ;
5
$ s q l= SELECT * FROM municipio WHERE mnc_descricao like ' . $ s e a r c h . %' ;
$ c o n s u l t a = mysql_query ( $ s q l , $ c o n e x a o ) ;
$ l i n h a s = m y s q l _ f e t c h _ a r r a y ( $ c o n s u l t a ) ;
10
$ r e s = {'pal ':[ ;
do {
$ r e s .= ' . s t r _ r e p l a c e ( ' , , $ l i n h a s [ 'mnc_descricao ' ] ) . ', ;
} while ( $ l i n h a s = m y s q l _ f e t c h _ a r r a y ( $ c o n s u l t a ) ) ;
15
$ r e s = s u b s t r ( $ r e s , 0 , ( s t r l e n ( $ r e s ) −1) ) ;
$ r e s .= ]} ;
e c h o $ r e s ;
?
y ™ódigo II ™ri— um— ™onexão ™om o ˜—n™o de d—dosD — linh— W ™one™t— ™om o servidor
us—ndo o usuário e senh— e — linh— IH ini™i— o uso do ˜—n™o de d—dos –textF
y ™ódigo IP f—z — pesquis— dos muni™ípios no ˜—n™o de d—dosD n— linh— P é in™luíd— o
—rquivo que f—z — ™onexãoD n— linh— R — v—riável 6se—r™h re™e˜e — p—l—vr— que foi digit—d—
n— ™—ix— de textoD n— linh— IQ o ™om—ndo str_replace7
foi utiliz—do p—r— evit—r pro˜lem—s
™om p—l—vr—s que por ventur— ™ontenh—m —sp—s simples ™omo por exemplo ¤d9—gu—¤D se este
tr—t—mento não for feito n— hor— de ™h—m—r — função eval o™orreri— um erroF
7 Vantagens no uso do Ajax
elguns ˜enefí™ios que temos —o us—r eteˆ sãoX
7Substitui todas as ocorrências da string procurada na string de retorno
IR

15. • „orn— possível utiliz—r um— —pli™—ção ˜—se—d— n— web ™om re™urso e fun™ion—lid—des
p—re™idos ™om os que possuímos hoje em nossos sistem—s DesktopF ssto torn— o uso
dos —pli™—tivos web re—lmente usáveisY
• gomo — modi(™—ção d—s inform—ções d— tel— são p—r™i—is um— gr—nde qu—ntid—de
de inform—ções deix— de tr—feg—r inutimente pel— redeY
• y servidor que rod— — —pli™—ção (™— menor ™—rreg—do pois existe um— divisão de
t—ref—s ™om o ™lienteY
• eteˆ não é um— te™nologi— por isto não é ne™essário p—g—r p—r— — utiliz—rF
€orém ™omo já dizi— o poet— 4nem tudo são )ores 4D temos queX
• eteˆ não é — solução mil—gros— p—r— todos os m—les e se us—do de form— in—dequ—d—
pode pior—r um— situ—ção que já er— fei—Y
• ys x—veg—dores us—m diferentes métodos por isso temos que est—r —tentos qu—nto —
eles p—r— não impossi˜ilit—r o uso de nossos sistem—s por t—is n—veg—doresY
• gomo existe um— divisão de pro™ess—mente entre o ™liente e o servidorD temos que
minimiz—r este pro™ess—mento pois os x—veg—dor em ger—l não suport— um— ™—rg—
muito pes—d— de scriptsY
• ys ˜otão volt—rD —v—nç— e históri™o não fun™ion—m muito ˜em ™om eteˆF
Referências
‘I“ irko fridee de elmeid— g—˜rer—F AJAX Visão ConceitualF €ort—l t—v—D PHHSF
‘P“ ƒteve q—nzF Alternatives to innerHTMLF ƒl—yery0™eD PHHTF
‘Q“ tesse t—mes q—rrettF ej—xX e new —ppro—™h to we˜ —ppli™—tionsD
httpXGG—d—ptivep—thF™omGpu˜li™—tionsGess—ysG—r™hivesGHHHQVSFphpF PHHSF
7.1 Para Saber Mais
• ertigo muito ˜om so˜re eteˆ
httpXGG—d—ptivep—thF™omGpu˜li™—tionsGess—ysG—r™hivesGHHHQVSFphp
• …s—ndo €yƒ„ ™om eteˆ
httpXGGwwwFdotpixF™omF˜rG wendelGprojetosG—j—xGpostˆwvrttp‚equestGsumqetFhtml
IS

16. • xão use innerr„wv
httpXGGsl—yero0™eF™omG—rti™lesGinnerr„wv•—ltern—tivesG5intro
• €ágin— o(™i—l do tƒyx
httpXGGwwwFjsonForgG
• hr„wv
httpXGGwwwFquirksmodeForgGjsG™ross•dhtmlFhtml
• ixemplos em ej—x
httpXGGwwwFj—psFet™F˜rG—j—xG
• w—teri—l so˜re gss
httpXGGwwwFm—ujorF™om
• hyw ˆr„wv e r„wv
httpXGGwwwF—mte™hsF™omGwQ™Gintrodu™tionFhtml
IT