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

AJAX - Sem Mistrios

ete @rnimo em lngu ingles de Asyncronous Javascript And XMLA o uso sisteE mtio de tvsript e wv @e derivdosA pr tornr o nvegdor mis intertivo om o usurioD utilizndoEse de soliites ssnrons de informesF ete no somente um novo modeloD tmm um iniitiv n onstruo de plies web mis dinmiE s e ritivsF ete no um tenologiD so relmente vris tenologis trlhndo juntsD d um fzendo su prteD ofereendo novs funionliddesF ete inorpor em seu modeloX

epresento sed em pdresD usndo rwv e gY ixposio e intero dinmi usndo o hywY sntermio e mnipulo de ddos usndo wv e vY eupero ssnron de ddos usndo o ojeto wvrttpequestY Javascript unindo tods els em onjuntoF
y modelo lssio de plio web trlh ssimX e miori ds es do usurio n interfe dispr um soliito r pr o servidor webF y servidor proess lgo reuperndo ddosD mstigndo nmerosD onversndo om vrios sistems legdos e ento retorn um pgin rwv pr o lienteF um modelo dptdo do uso originl d web omo um gente de hipertextoD porm o que fz web o pr hipertexto no neessrimente fz el o pr plies de softwreF ist proximo possui muito dos sentidos tniosD ms no fz tudo que um usurio experiente poderi fzerF inqunto o servidor est fzendo seu trlhoD o que o usurio estr fzendoc y que ertoD esperndoF i d etp em um trefD o usurio gurd mis um vezF I

yvimenteD se ns estivssemos projetndo web do nd pr pliesD no fE rmos om que os usurios esperssem em voF m vez que interfe est rregdD por que intero do usurio deveri prr d vez que plio preissse de lgo do servidorc x reliddeD por que o usurio deveri ver plio ir o servidor tod vezc e mior vntgem ds plies ete que els rodm no prprio nvegdor webF intoD pr estr hil exeutr plies eteD str possuir lgum dos nvegdores modernosD ou sejD lndos ps PHHIF o elesX wozill pirefoxD snternet ixplorer SCD yperD uonqueror e friF pigur IX higrm de requisies o servidor

A Classe Assncrona

r se fzer um pedido r o servidor usndo tvsriptD vo preis de um ojeto que disponiiliz ess funionliddeF l lsse foi primeiro introduzid no snternet ixE plorer so form de um ojeto etive hmdo wvrF into o wozillD o fri e outros rowsers seguirmEseD implementndo um lsse de nome wvrttpequest que suportv os mtodos e s proprieddes do ojeto etive originl d wirosoftF y digo ixo mostr form genri de instnir um ojeto que prover os menismos pr pedidos ssnronosF gdigo IX 9jxsnitFjs9
function ajaxInit () { var xmlhttp ;

try

{ xmlhttp = new { XMLHttpRequest ( ) ;

catch ( ee ) try {

xmlhttp

= new {

ActiveXObject (

10

" Msxml2 . XMLHTTP " ) ; " Microsoft . XMLHTTP " ) ;

catch ( e ) try {

xmlhttp } c a t c h (E) xmlhttp

= new { =

ActiveXObject (

false ;

15
} }

20

return

xmlhttp ;

ys mtodos e triutos pdres esto desritos ixoF

2.1 Atributos

egue ixo lguns dos triutos do ojeto de onexo ssnronF P

readyState X digo que diz o sttus d soliito ssnronD ele vri de H t S

H @uninitilizedAY I @ rregrAY P @rregdoAY Q @intertivoAY R @ompletoAF

no found
status X ttus do retorno do rwvD so os digos pdres do rwv PHH okD RHH responseText X retorn dei de rteres que o servidor enviouF responseXml X retorn o wv o servidor enviouF onreadystatechange X de(ne qul funo ser hmd pr fzer mnipulo

dos ddos ssim que houver um retornoF httprequestFonredysttehnge a nmeyfhepuntionY mos ver o que que est funo deve fzerF rimeiroD funo preis de veri(r o estdo do pedidoF e o estdo possui o vlor RD isso signi( que totlidde d respost do servidor foi reeid e que pode ontinur proessEl vontdeF e prxim ois veri(r o digo do estdo d respost r do servidorF r os nossos ojetivos s estmos interessdos n respost PHH yuF

if (http_request.readyState == 4) { if (http_request.status == 200) { // deu certo } else {} }

2.2 Mtodos

egue ixo lguns dos mtodos do ojeto de onexo ssnronF

open(mode, url, boolean)

modeX ipo d requisioD qi ou y urlX rl do ojeto soliitdo no modo ssnronoD pro questes de segurn o pirefox no permite que v estej em um servidor diferente d pgin que est fzendo soliitoF oolenX true @ssnronoA ou false @snronoAF
send() o mtodo ixh que tiv onexo e fz requisio de informes o doumento erto pelo mtodo yixF iste mtodo possui somente um prmetro que serve pr envirmos ddos extrs o doumento que estmos essndoF smos este prmetro qundoD por exemploD no mtodo yixD essmos o doumento om y o invs de qiD neste so os ddos do y so pssdos neste prmetro de ixhF

Exemplo 1

Solicitando um arquivo de texto

xo exemplo I iremos trlhr om os elementos sios vistos t gor gdigo PX 9ixemplo I9

<!D C O TY E H M P T L PUBLIC <h t m l> <h e a d> < t i t l e >Exemplo 1

" -// W3C // DTD HTML 3.2 Final // EN ">

Carregar Arquivo

<s c r i p t <s c r i p t function ajax

" text / javascript " s r c=" ajaxInit . js "></ s c r i p t > t y p e=" text / javascript ">
t y p e= carregar () { ajaxInit () ;

do

S e r v i d o r </ t i t l e >

document . g e t E l e m e n t B y I d (

10

if

" texto " ) . innerHTML

= function () 4) { {

" Carregando ... " ;

( ajax )

a j a x . open (

' GET ' , ' http ://200.201.81.38/ anselmo / ciclo / texto . txt ' , t r u e ) ;
= = = = 200) {

ajax . onreadystatechange ( ajax . readyState ( ajax . status

if

15
} } }

if

document . g e t E l e m e n t B y I d (

" texto " ) . innerHTML

ajax . responseText ;

20
}

ajax . send ( n u l l ) ;

</ s c r i p t > </h e a d> <body>

25

<d i v

i d=

<i n p u t </body> </h t m l>

t y p e=

" texto "></d i v > " button " v a l u e=" Carregar "

o n C l i c k=

" carregar () " />

x linh V oorre hmd pr funo ajaxInit() que est dentro do rquivo referenido n linh SF e linh W getElementByid('texto') 1 e innerHTML2 inserem o texto grregndo dentro do hs om o id igul textoF xs linhs IID IP e IQ so veri(dos o status do pedidoD status do retorno e efetiv insero do ontedo do rquivo textoFtxt no hsD respetivmenteF xeste primeiro exemplo no houve nenhum proessmento por prte de um lingugem de progrmo no servidorD porm no mundo rel gerlmente um hmd no modo ssnrono se omuni om um script @rD tD eD uyD gqsD iv FFFAD que fz um proessmento sore os ddos ele envidos e por (m retorn o resultdoD nosso prximo exemplo mostrr extmente istoF

Exemplo 2

Criando uma calculadora

im nosso segundo exemplo iremos introduzir o uso de um lingugem server-side reE lizndo um proessmento sore os ddos envidos no modo ssnronoD isto ser feito rindo um luldorF
em Javascript para selecionar o elemento cujo id igual a texto. em Javascript para inserir uma string em um elemento de modo que esta seja interpretada como cdigo HTML.
2 Comando 1 Comando

xoss luldor ser ompost de P ixs de texto pr entrd dos vlores e um lel pr exiio dos resultdosD ni opero que el reliz somF gdigo QX 9gluldor rwv9
<!D C O TY E H M P T L PUBLIC <h t m l> <h e a d> < t i t l e >Exemplo

" -// W3C // DTD HTML 3.2 Final // EN ">

2

<s c r i p t <s c r i p t function ajax

" text / javascript " s r c=" ajaxInit . js "></ s c r i p t > t y p e=" text / javascript ">
t y p e= calcular () { ajaxInit () ;

Calculadora

</ t i t l e >

document . g e t E l e m e n t B y I d (

10

if

" resultado " ) . innerHTML

= resultado ;

" Calculando

... " ;

( ajax )

ajax . onreadystatechange v1 =

v2

15
} }

" v1 " ) . v a l u e ; " v2 " ) . v a l u e ; u r l = ' http ://200.201.81.38/ anselmo / ciclo / calcular . php ? v1 = '+v 1+'& v2 = '+v 2 ; a j a x . o p e n ( ' GET ' , u r l , t r u e ) ;
document . g e t E l e m e n t B y I d ( = document . g e t E l e m e n t B y I d ( ajax . send ( n u l l ) ;

20

function

if

resultado ()

{ = = 4) {

( ajax . readyState ( ajax . status

if

= =

200) {

document . g e t E l e m e n t B y I d (

" resultado " ) . innerHTML

ajax . responseText ;

25
}

</ s c r i p t > </h e a d> <body>

30

<f o r m

<i n p u t

" calculadora "> " text " name=" v1 " i d=" v1 " s i z e ="3" /> + <i n p u t t y p e=" text " 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 () " />
name= t y p e=

name=

" v2 "

</f o r m>

35

</body> </h t m l>

gdigo RX 9gluldor r9
<? echo ?> $_GET [

'v1 ' ]

+ $_GET [

'v2 ' ] ;

x linh II o mtodo onreadystatechange ssume um funo extern funo que ri o ojeto jxF e linh IP e IQ ri dus vriveis que rmzenm os vlores dos mpos que esto no formulrioD este ddo so pegos trvs do value 3 F e vrivel url d linh IR ir onter o endereo e s vriveis que sero usds pelo r pr lulr som dos resultdosF y rquivo r que reliz o lulo d som relmente simplesD ele peg s dus vriveis v1 e v2 do array $_GET do rD som seus vlores e esreve o resultdoF
3 Propiedade

de alguns objetos em Javascript que retorna o contedo do mesmo

et o momento o resultdo de nosss hmds ssnrons erm esritos de form diret trvs do mtodo innerHTMLD o uso deste mtodo desonselhdo pelo Qg pels seguinte rzesF

um propriedde desenvolvid pel MicrosoftD por est rzo proprietriD porm mior prte dos nvegdores inorporouEF or no ser pdro est sendo olid ds novs verses destes nvegdores y resultdo um string o psso que o hyw um estrutur hierrqui em rwv
ys prximos dois exemplo so idntiosD diferenindo pen form omo os ddos so pssdos do servidor pr o lienteD o primeiro usndo texto norml e o outro ser usdo um string no formto JSON e hyw pr exiir o resultdo de um requisioF

Exemplo 3 Preenchimento um outro

SELECT

SELECT a partir de

m exemplo lssio do preenhimento de um SELECT prtir de outro esolh ds iddes de um determindo estdoF iste reurso um ds miores 9pedrs no spto9 dos progrmdores de sistem webD pois qundo o usurio seleion o estdo tod pgin deve ser rerregdD inlusive os vlores dos demis mpos j preenhidosD pr que o SELECT om s iddes sej exiidoF gom ete est tref ( em mis fil pois st que sej feit um onsult ds iddes do estdo que est no primeiro SELECT e inserir s iddes no segundo SELECTF
5.1 Usando

InnerHTML
gdigo SX 9giddes rwv9

" -// W3C // DTD XHTML 1.0 Transitional // EN " " http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - transitional . dtd "> <h t m l x m l n s=" http :// www . w3 . org /1999/ xhtml " xml : l a n g="pt - br " l a n g="pt - br ">
<!D C O TY E P html PUBLIC <h e a d> < t i t l e >Exemplo <s c r i p t <s c r i p t function t y p e=

" text / javascript " s r c=" ajaxInit . js "></ s c r i p t > t y p e=" text / javascript ">
selecionaCidade ( estado ) { ajaxInit () ; { = escreveCidades ;

Escolha

C i d a d e </ t i t l e >

10

ajax

if

( ajax )

ajax . onreadystatechange url =

15
} }

' http ://200.201.81.38/ anselmo / ciclo / cidades . php ? estado = '+e s t a d o ; a j a x . o p e n ( ' GET ' , u r l , t r u e ) ;
ajax . send ( n u l l ) ;

function

escreveCidades ()

20

if
} }

( ajax . readyState ( ajax . status

if

= =

4)

= =

200) {

document . g e t E l e m e n t B y I d (

" cidade " ) . innerHTML

ajax . responseText ;

25

function ajax

selecionaCidadeJson ( estado ) = ajaxInit () ; { =

30

if

( ajax )

' http ://200.201.81.38/ anselmo / ciclo / cidadesJson . php ? estado = '+e s t a d o ; a j a x . o p e n ( ' GET ' , u r l , t r u e ) ;
url = ajax . send ( n u l l ) ; } }

ajax . onreadystatechange

escreveCidadesJson ;

35

function

if

escreveCidadesJson () = = 4) {

( ajax . readyState ( ajax . status var var x = json 0; =

40

if

= =

200) {

eval (

"("+a j a x . r e s p o n s e T e x t+")" ) ;

limparDestino (

" cidade2 " ) ;

45

for

( x = 0 ; x< =j s o n . c i d a d e s . l e n g t h ; x++){

option

document . c r e a t e E l e m e n t (

" option " ) ;

option . setAttribute (

50

" value " , j s o n . c i d a d e s [ x ] . c d g ) ;

o p t i o n . a p p e n d C h i l d ( d o c u m e n t . 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) ) ;

d o c u m e n t . g e t E l e m e n t B y I d ( d o c u m e n t . 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 t o d o s os e l e m e n t o s f i l h o s de um elemento
limparDestino ( destino ) {

function

65

while
obj } </h e a d> <body>

document . g e t E l e m e n t B y I d ( d e s t i n o ) ; ( obj . f i r s t C h i l d ) obj . removeChild ( obj . f i r s t C h i l d ) ;

70

</ s c r i p t >

<f o r m

75

" selecioneCidade "> =" 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 ){ 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 >
name= <l a b e l

for

</ s e l e c t > <b r />

80
<l a b e l <s e l e c t

for

name=

" cidade " a c c e s s k e y="c"><u>C</u>i d a d e " cidade " i d=" cidade ">

: </ l a b e l >

</ s e l e c t >

85

<h r>

<l a b e l

<s e l e c t

90

" estado " a c c e s s k e y="e"><u>E</u>s t a d o : </ l a b e l > " 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 > < o p t i o n v a l u e=" sp ">SP</ o p t i o n >
= name=

for

</ s e l e c t > <b r />

95

" cidade " a c c e s s k e y="c"><u>C</u>i d a d e : </ l a b e l > " cidade " i d=" cidade2 "> <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 ) ; ') ) " />
<l a b e l = <s e l e c t name= </ s e l e c t > </f o r m> </body> </h t m l>

for

gdigo TX 9giddes r9
<? header (

" Content - Type : text / html ; charset = iso -8859 -1 " ) ;

= $_GET [ =

$estado

$cidades

if

10
}

' estado ' ] ; "" ; ( $ e s t a d o= " pr " ) { = $ c i d a d e s .= " < option value =\"1\" > Tupssi </ 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 >" ; $ c i d a d e s .= " < option value =\"4\" > Pato Branco </ option >" ;
( $ e s t a d o= = $cidades $cidades $cidades

if
15
}

" sp " ) { " < option value =\"5\" > Mogi </ option >" ; .= " < option value =\"6\" > Palmeiras </ option >" ; .= " < option value =\"7\" > Santos </ option >" ;
.=

echo

$cidades ;

20

?>

y rquivo giddesFphp ger os elementos options que sero inseridos dentro do SELECT ds iddesF ist ordgem no muito inteligente pois quntidde de inforE mo trnsmitids do servidor pr o liente em su miori foi desneessriF h idde pens o digo e o nome deverim ser trnsmitidosD s demis informes so repetids e podem ser gerds pelo nvegdorF x linh QI do digo fonte S feit veri(o se um dos elementos do SELECT estdo foi seleiondoD se sim ento envie o vlor pr funo selecionaCidadeF y digo fonte T vrivel estdo reeid e de ordo om el pssdo o nveE gdor s opes do SELECT iddeF
5.2 Usando

JSON

tyx @om mesm pronuni do nome 4tson4em inglsAD um rnimo pr Javascript Object NotationD um formto leve pr intermio de ddos omputionisF tyx

um suonjunto d noto de ojeto de tvsriptD ms seu uso no requer tvsript exlusivmenteF e simpliidde de tyx tem resultdo em seu uso difundidoD espeilmente omo um lterntiv pr wv em eteF m ds vntgens reivindids de tyx sore wv omo um formto pr intermio de ddos neste ontextoD o fto de ser muito mis fil esrever um nlisdor tyxF im tvsript mesmoD tyx pode ser nlisdo triviE lmente usndo funo evl@AF ssto foi importnte pr eito de tyx dentro d omunidde ete devido presen deste reurso de tvsript em todos os nvegdores web tuisF x prtiD os rgumentos respeito d filidde de desenvolvimento e performne do nlisdor so rrmente relevdos devido os interesses de segurn no uso de evl@A e resente integro de proessmento wv nos nvegdores web modernosF or est rzo tyx tipimente usdo em mientes onde o tmnho do )uxo de ddos entre o liente e o servidor de supr importni @d seu uso por qoogleD hooD etFD os quis servem milhes de usuriosAD onde fonte dos ddos pode ser expliitmente on(velD e onde perd dos reursos de proessmento v no ldo liente pr mnipulo de ddos ou gero d interfeD no um onsideroF inqunto tyx freqentemente posiiondo 4em onfronto4om wvD no inoE mum ver tnto tyx omo wv sendo usdos n mesm plioF or exemploD um plio no ldo liente qul integr ddos do qoogle wps om ddos tmosfrios trvs de yeD requer suporte pr mos formtos de ddosF pigur PX eutomto que ger lingugem tyx e (gur P ilustr em form de um utmto (nito grmti d lingugem JSONF e string ixo mostr um retorno ds iddes do estdo do rnF

{ 'cidades':[ {'cdg':'1','nm':'Tupssi'}, {'cdg':'2','nm':'Toledo'}, {'cdg':'3','nm':'Cascavel'}, {'cdg':'4','nm':'Pato Branco'} ] }

sndo funo eval 4 do Javascript podemos trnsformr est string em um estruE tur de ojetos filmente mnipulveisF e usrmos funo eval no retorno ds iddes poderimos por exemplo essr o digo d idde de to frno trvs do seguinte omndoX
na especicao 1.0 do Javascript esta funo interpreta uma string como uma expresso, eval("fred=999; wilma=777; document.write(fred + wilma);") retorna 1776
4 Introduzida

json = eval("("+ajax.responseText+")"); json.cidades[3].cdg;

x primeir linh plid funo eval e seu resultdo rmzendo n vrivel jsonD n linh P essdo o triuto iddesD que um vetorD n posio Q no triuto dgF r um exemplo ompleto vej os digos ixoF gdigo UX 9giddes rwv9
" -// W3C // DTD XHTML 1.0 Transitional // EN " " http :// www . w3 . org / TR / xhtml1 / DTD / xhtml1 - transitional . dtd "> <h t m l x m l n s=" http :// www . w3 . org /1999/ xhtml " xml : l a n g="pt - br " l a n g="pt - br ">
<!D C O TY E P html PUBLIC <h e a d> < t i t l e >Exemplo <s c r i p t <s c r i p t t y p e=

" text / javascript " s r c=" ajaxInit . js "></ s c r i p t > t y p e=" text / javascript ">
selecionaCidadeJson ( estado ) { ajaxInit () ; { = escreveCidadesJson ;

Escolha

C i d a d e </ t i t l e >

10

function ajax

if

( ajax )

15
} }

' http ://200.201.81.38/ anselmo / ciclo / cidadesJson . php ? estado = '+e s t a d o ; a j a x . o p e n ( ' GET ' , u r l , t r u e ) ;
url = ajax . send ( n u l l ) ;

ajax . onreadystatechange

20

function

if

escreveCidadesJson () = = 4) {

( ajax . readyState ( ajax . status var var x = json 0; =

if

= =

200) {

eval (

25
limparDestino (

"("+a j a x . r e s p o n s e T e x t+")" ) ;

" cidade2 " ) ;

for
30

( x = 0 ; x< =j s o n . c i d a d e s . l e n g t h ; x++){

option

document . c r e a t e E l e m e n t (

" option " ) ;

option . setAttribute (

" value " , j s o n . c i d a d e s [ x ] . c d g ) ;

o p t i o n . a p p e n d C h i l d ( d o c u m e n t . 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
d o c u m e n t . g e t E l e m e n t B y I d ( d o c u m e n t . 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 t o d o s os e l e m e n t o s f i l h o s de um elemento
limparDestino ( destino ) {

function

50
}

while
obj

document . g e t E l e m e n t B y I d ( d e s t i n o ) ; ( obj . f i r s t C h i l d ) obj . removeChild ( obj . f i r s t C h i l d ) ;

</ s c r i p t >

IH

</h e a d>

55

<body>

<f o r m

60

" selecioneCidade "> =" 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 > < o p t i o n v a l u e=" sp ">SP</ o p t i o n >
name= <l a b e l

for

</ s e l e c t > <b r />

<l a b e l

65

<s e l e c t

for

name=

" cidade " a c c e s s k e y="c"><u>C</u>i d a d e " cidade " i d=" cidade2 ">

: </ l a b e l >

</ s e l e c t > </f o r m> </body> </h t m l>

gdigo VX 9giddes r9
<? header (

" Content - Type : text / html ; charset = iso -8859 -1 " ) ;

= $_GET [ =

$estado

$cidades

if

10
}

' estado ' ] ; "{' cidades ':[ " ; ( $ e s t a d o= " pr " ) { = $ c i d a d e s .= "{' cdg ': '1 ' , ' nm ':' Tupssi '}, {' cdg ': '2 ' , ' nm ':' Toledo '} , {' cdg ': '3 ' , ' nm ':' Cascavel '}, {' cdg ': '4 ' , ' nm ':' Pato Branco '}]} " ;
( $ e s t a d o= = $cidades

if
15
}

.=

" sp " ) { "{' cdg ': '5 ' , ' nm ':' Mogi '}, {' cdg ': '6 ' , ' nm ':' Palmeiras '}, {' cdg ': '7 ' , ' nm ':' Santos '}]} " ;

echo

$cidades ;

20

?>

evisndo o gdigo V podemos ver que linh P hm funo headerD nel pssdo o omndo charset=iso88591D isto muito importnte pois diz odi(o do texto que est sendo retorndoD evitndo ssim que o nvegdor do usurio exi de form inorret os entos e outros rteres espeiisF gom os exemplos im pudemos ter um o noo de omo utilizr o jx em nosss plies webD msD queremos oiss mis dinmis e om efeitos por isso vmos fzer um pequeno Google Sugest

Sugerindo um Contedo

xosso prximo exemplo onsistir em um mpo de texto que d tel pressiond ir o servidor e trr um list de plvrs que omeem om o que j foi esritoF ssto ser exiido em um hsF undo lirmos em um ds plvrs que vierm do servidor hs ir sumir e o texto ir pr dentro d ix de textoF

II

iste sistem utilizdo por exemplo no servio de eEmil do YahooD neleD qundo digitEse o nome do ontto ele j vi (ltrndo os que omem om s letrs j digitdsF gdigo WX 9euto gompletr rwv9
<!D C O TY E H M P T L PUBLIC <h t m l> <h e a d> < t i t l e >Auto C o m p l e t a r </ t i t l e >

" -// W3C // DTD HTML 3.2 Final // EN ">

<s c r i p t <s c r i p t

t y p e= t y p e=

" text / javascript " s r c=" ajaxInit . js "></ s c r i p t > " text / javascript ">
{ ajaxInit () ;

function ajax =

sugerir ( s )

document . g e t E l e m e n t B y I d (

10

if

" resultado " ) . innerHTML

= resultado ;

" Calculando

... " ;

( ajax )

' http ://200.201.81.38/ anselmo / ciclo / autoCompletar . php ?s= '+s ; a j a x . o p e n ( ' GET ' , u r l , t r u e ) ;
url = ajax . send ( n u l l ) ;

ajax . onreadystatechange

15
}

function

20

if

resultado ()

{ = = 4) {

( ajax . readyState ( ajax . status json var = x =

if

= =

eval ( 0;

"("+a j a x . r e s p o n s e T e x t+")" ) ; " resultado " ) ; ' resultado ' ) .

j s o n . p a l . l e n g t h ; x++) s t y l e . v i s i b i l i t y=

200) {

limparDestino (

document . g e t E l e m e n t B y I d (

25

for

' visible ' ;

( x =0; P =

x <

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. setAttribute (

30
} } }

" onClick " , " document . getElementById ( ' pal '). value ='"+ " '; document . getElementById (' resultado '). style . visibility =' hidden '" ) ; d o c u m e n t . 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 ) ;
j s o n . p a l [ x ]+

35

/
/

Remove t o d o s os e l e m e n t o s f i l h o s de um elemento
limparDestino ( destino ) { obj

function =

40
}

while

document . g e t E l e m e n t B y I d ( d e s t i n o ) ; ( obj . f i r s t C h i l d )

obj . removeChild ( obj . 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=

45

" text / css ">

{

#r e s u l t a d o

background border width padding

c o l o r

: : : : : : : :

#e 5 e 5 e 5 ; 1 px solid #000;

1 5 0 px ; 0 px ; 0 px ; relative ; 4 5 px ; 0 px ;

50

margin position

l e f t m a r g i n t o p
margin }

55

{ line

h e i g h t

: : :

1 5 px ; 0 px ; 1 8 px

margin font

" Arial " , s a n s s e r i f

IP

padding

5 px ;

60

} p : hover {

background cursor }

c o l o r

: :

#c d c d c d ; pointer ;

65

</ s t y l e > </h e a d> <body>

<f o r m

<l a b e l

70

" auto "> =" pal " a c c e s s k e y=" pal ">P a l a v r a </ l a b e l > <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 >
name=

for

</f o r m> </body> </h t m l>

gdigo IHX 9euto gompletr r9

<? $p [ 0 ] $p [ 1 ] $p [ 2 ] = = = = = = = = = = = =

$p [ 3 ] $p [ 4 ] $p [ 5 ] $p [ 6 ] $p [ 7 ]

10

$p [ 8 ] $p [ 9 ] $p [ 1 0 ] $p [ 1 1 ]

" abacate " ; " abobora " ; " banana " ; " beco " ; " cabo " ; " cebo " ; " dedo " ; " dado " ; " elefante " ; " faca " ; " gato " ; " porta " ; 's ' ] ;

15

$search $x = 0; = ( $x

= $_GET [

for
20
}

$res

"{' pal ':[ " ;

= 0 ; $x < 1 1 ; $ x++){ ( $ 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 ) ) ) { $res .=

if

" '" . $p [ $ x ] . " '," ;

$res $res

= .=

substr ( $res , 0 , ( s t r l e n ( $res )

25
?>

" ]} " ;

1) ) ;

echo

$res ;

mos nlisr o gdigo WD n linh PR hmd funo style 5 Fvisibility 6 de(ne que o resultdo est oultoF x linh PV dus funes so diionds o prgrfo om o texto que veio do servidorD primeir funo olo plvr dentro d ix de texto e segund funo esonde o hs resultdoF egor vmos ver o gdigo IH em rD existe um vetor hmdo 6p om IP plvrsD linh IU e PH montm string no formto jsonD linh PQ remove virgul d ltim plvrF
5 Acessa 6 Atributo

os estilos em CSS em um objeto que dene se o objeto esta visvel 'visible' ou oculto 'hidden'

IQ

6.1

Ligando a um Banco de Dados

e integro de ete om nos de ddos no difere em nd do que foi feito t gorD pois o (m do uso do no de ddos pelo liente o servidor envi um string de voltF xosso exemplo usr o mesmo rquivo rwv do digo nteriorD pens modi(reE mos o rquivo Fphp que ser hmdo por eleF gdigo IIX 9gonexo om o fno9

# # #

<?php

" Connection_php_mysql . htm " " MYSQL " HTTP " true " = $ h o s t n a m e _ c o n e x a o = " localhost " ; $ d a t a b a s e _ c o n e x a o = " test " ; $ u s e r n a m e _ c o n e x a o = " aluno " ; $ p a s s w o r d _ c o n e x a o = " aluno " ;
F i l e N a m e= Type= $conexao = mysql_pconnect ( $hostname_conexao , $username_conexao , $password_conexao ) or die ( mysql_error ( ) ) ; mysql_select_db ( $database_conexao , $conexao ) ;

10

?>

gdigo IPX 9euto gompletr sndo fno de hdos9

<? include (

" conexao . php " ) ;

= $_GET [

$search

5
$ s q l=

's ' ] ;

" SELECT * FROM municipio WHERE mnc_descricao like '" . $ s e a r c h . "%' " ;
= = mysql_query ( $ s q l , $ c o n e x a o ) ; mysql_fetch_array ( $ c o n s u l t a ) ;

$consulta $linhas

10

do
}

$res {

"{' pal ':[ " ;

$res .=

15

while
=

" '" . s t r _ r e p l a c e ( " '" , " " , $ l i n h a s [ ' mnc_descricao ' ] ) . " '," ;
= mysql_fetch_array ( $ c o n s u l t a ) ) ;

( $linhas

$res $res echo ?>

substr ( $res , 0 , ( s t r l e n ( $res )

.=

" ]} " ;

1) ) ;

$res ;

y digo II ri um onexo om o no de ddosD linh W onet om o servidor usndo o usurio e senh e linh IH inii o uso do no de ddos textF y digo IP fz pesquis dos munipios no no de ddosD n linh P inlud o rquivo que fz onexoD n linh R vrivel 6serh reee plvr que foi digitd n ix de textoD n linh IQ o omndo str_replace 7 foi utilizdo pr evitr prolems om plvrs que por ventur ontenhm sps simples omo por exemplo d9gu se este D trtmento no for feito n hor de hmr funo eval oorreri um erroF

Vantagens no uso do Ajax

elguns enefios que temos o usr ete soX

7 Substitui

todas as ocorrncias da string procurada na string de retorno

IR

 orn possvel utilizr um plio sed n web om reurso e funionliddes preidos om os que possumos hoje em nossos sistems DesktopF ssto torn o uso dos plitivos web relmente usveisY gomo modi(o ds informes d tel so priis um grnde quntidde de informes deix de trfegr inutimente pel redeY y servidor que rod plio ( menor rregdo pois existe um diviso de trefs om o lienteY ete no um tenologi por isto no neessrio pgr pr utilizrF
orm omo j dizi o poet 4nem tudo so )ores 4D temos queX

ete no soluo milgros pr todos os mles e se usdo de form indequd pode piorr um situo que j er feiY ys xvegdores usm diferentes mtodos por isso temos que estr tentos qunto eles pr no impossiilitr o uso de nossos sistems por tis nvegdoresY gomo existe um diviso de proessmente entre o liente e o servidorD temos que minimizr este proessmento pois os xvegdor em gerl no suport um rg muito pesd de scripts Y ys oto voltrD vn e histrio no funionm muito em om eteF

Referncias
I irko fridee de elmeid grerF AJAX Viso ConceitualF ortl tvD PHHSF P teve qnzF Alternatives to innerHTMLF lyery0eD PHHTF Q tesse tmes qrrettF ejxX e new pproh to we pplitionsD httpXGGdptivepthFomGpulitionsGessysGrhivesGHHHQVSFphpF PHHSF
7.1 Para Saber Mais

ertigo muito om sore ete httpXGGdptivepthFomGpulitionsGessysGrhivesGHHHQVSFphp sndo y om ete httpXGGwwwFdotpixFomFrG wendelGprojetosGjxGpostwvrttpequestGsumqetFhtml

IS

 xo use innerrwv httpXGGslyero0eFomGrtilesGinnerrwvlterntivesG5intro gin o(il do tyx httpXGGwwwFjsonForgG hrwv httpXGGwwwFquirksmodeForgGjsGrossdhtmlFhtml ixemplos em ejx httpXGGwwwFjpsFetFrGjxG wteril sore gss httpXGGwwwFmujorFom hyw rwv e rwv httpXGGwwwFmtehsFomGwQGintrodutionFhtml

IT