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 Mistrios

AJAX (acrnimo em lngua inglesa de Asyncronous Javascript And XML) o uso sistemtico de Javascript e XML (e derivados) para tornar o navegador mais interativo com o usurio, utilizando-se de solicitaes assncronas de informaes. AJAX no somente um novo modelo, tambm uma iniciativa na construo de aplicaes web mais dinmicas e criativas. AJAX no uma tecnologia, so realmente vrias tecnologias trabalhando juntas, cada uma fazendo sua parte, oferecendo novas funcionalidades. AJAX incorpora em seu modelo:

Apresentao baseada em padres, usando XHTML e CSS; Exposio e interao dinmica usando o DOM; Intercmbio e manipulao de dados usando XML e XSLT; Recuperao assncrona de dados usando o objeto XMLHttpRequest; Javascript unindo todas elas em conjunto.
O modelo clssico de aplicao web trabalha assim: A maioria das aes do usurio na interface dispara uma solicitao HTTP para o servidor web. O servidor processa algo recuperando dados, mastigando nmeros, conversando com vrios sistemas legados e ento retorna uma pgina HTML para o cliente. um modelo adaptado do uso original da web como um agente de hipertexto, porm o que faz a web boa para hipertexto no necessariamente faz ela boa para aplicaes de software. Esta aproximao possui muito dos sentidos tcnicos, mas no faz tudo que um usurio experiente poderia fazer. Enquanto o servidor est fazendo seu trabalho, o que o usurio estar fazendo? O que certo, esperando. E a cada etapa em uma tarefa, o usurio aguarda mais uma vez. 1

Obviamente, se ns estivssemos projetando a web do nada para aplicaes, no faramos com que os usurios esperassem em vo. Uma vez que a interface est carregada, por que a interao do usurio deveria parar a cada vez que a aplicao precisasse de algo do servidor? Na realidade, por que o usurio deveria ver a aplicao ir ao servidor toda vez? A maior vantagem das aplicaes AJAX que elas rodam no prprio navegador web. Ento, para estar hbil a executar aplicaes AJAX, bastar possuir algum dos navegadores modernos, ou seja, lanados aps 2001, so eles: Mozilla Firefox, Internet Explorer 5+, Opera, Konqueror e Safari.

Figura 1: Diagrama de requisies ao servidor

2 A Classe Assncrona
Para se fazer um pedido HTTP ao servidor usando Javascript, voc precisa de um objeto que disponibiliza essa funcionalidade. Tal classe foi primeiro introduzida no Internet Ex2

plorer sob a forma de um objeto ActiveX chamado XMLHTTP, ento, o Mozilla, o Safari e outros browsers seguiram-se, implementando uma classe de nome XMLHttpRequest que suportava os mtodos e as propriedades do objeto ActiveX original da Microsoft. O cdigo abaixo mostra a forma genrica de instanciar um objeto que prover os mecanismos para pedidos assncronos. Cdigo 1: 'ajaxInit.js'
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function ajaxInit () { var xmlhttp ; try { xmlhttp = new XMLHttpRequest ( ) ; } catch ( ee ) { try { xmlhttp = new ActiveXObject ( " Msxml2 . XMLHTTP " ) ; } catch ( e ) { try { xmlhttp = new ActiveXObject ( " Microsoft . XMLHTTP " ) ; } c a t c h (E) { xmlhttp = f a l s e ; } } } }

return xmlhttp ;

Os mtodos e atributos padres esto descritos abaixo.

2.1 Atributos
Segue abaixo alguns dos atributos do objeto de conexo assncrona. readyState : Cdigo que diz o status da solicitao assncrona, ele varia de 0 at 5

0 (uninitialized); 1 (a carregar); 2 (carregado); 3 (interativo); 4 (completo).

no found

status : Status do retorno do HTML, so os cdigos padres do HTML 200 ok, 400

dos dados assim que houver um retorno. http_request.onreadystatechange = nameOfTheFunction; 3

responseText : Retorna a cadeia de caracteres que o servidor enviou. responseXml : Retorna o XML o servidor enviou. onreadystatechange : Dene qual funo ser chamada para fazer a manipulao

Vamos ver o que que esta funo deve fazer. Primeiro, a funo precisa de vericar o estado do pedido, se o estado possui o valor 4, isso signica que a totalidade da resposta do servidor foi recebida e que pode continuar a process-la vontade, a prxima coisa a vericar o cdigo do estado da resposta HTTP do servidor. Para os nossos objetivos s estamos interessados na resposta 200 OK.

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

2.2 Mtodos
Segue abaixo alguns dos mtodos do objeto de conexo assncrona.

open(mode, url, boolean)

mode: Tipo da requisio, GET ou POST url: URL do objeto solicitado no modo assncrono, pro questes de segurana. O Firefox no permite que a URL esteja em um servidor diferente da pgina que esta fazendo a solicitao. boolean: true (assncrono) ou false (sncrono).
documento aberto pelo mtodo OPEN. Este mtodo possui somente um parmetro que serve para enviarmos dados extras ao documento que estamos acessando. Usamos este parmetro quando, por exemplo, no mtodo OPEN, acessamos o documento com POST ao invs de GET, neste caso os dados do POST so passados neste parmetro de SEND.

send() o mtodo SEND que ativa a conexo e faz a requisio de informaes ao

3 Exemplo 1 Solicitando um arquivo de texto

No exemplo 1 iremos trabalhar com os elementos bsicos vistos at agora Cdigo 2: 'Exemplo 1'
1 2 3 4 5 6 7 8 9 10 11 12 13

<!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 Arquivo do S e r v i d o r </ t i t l e > < s c r i p t type=" text / javascript " s r c=" ajaxInit . js "></s c r i p t > < s c r i p t type=" text / javascript "> function carregar () { ajax = a j a x I n i t () ; document . getElementById ( " texto " ) . innerHTML = " Carregando ... " ; i f ( ajax ) { a j a x . open ( ' GET ' , ' http ://200.201.81.38/ anselmo / ciclo / texto . txt ' , t r u e ) ; ajax . onreadystatechange = function () { i f ( a j a x . r e a d y S t a t e == 4 ) {

14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

i f ( a j a x . s t a t u s == 2 0 0 ) {
} }

document . getElementById ( " texto " ) . innerHTML = a j a x . r e s p o n s e T e x t ;

} </ s c r i p t > </head> <body> <d i v i d=" texto "></div> <i n p u t type=" button " v a l u e=" Carregar " o n C l i c k=" carregar () "/> </body> </html>

} a j a x . send ( n u l l ) ;

Na linha 8 ocorre a chamada para a funo ajaxInit() que esta dentro do arquivo referenciado na linha 5. A linha 9 getElementByid('texto') 1 e innerHTML2 inserem o texto Carregando dentro do DIV com o id igual a texto. Nas linhas 11, 12 e 13 so vericados o status do pedido, e do retorno e efetiva insero do contedo do arquivo texto.txt no DIV, respectivamente. Neste primeiro exemplo no houve nenhum processamento por parte de uma linguagem de programao no servidor, porm no mundo real geralmente uma chamada no modo assncrono se comunica com um script (PHP, JSP, ASP, Ruby, CGI, PERL ...), que faz um processamento sobre os dados a ele enviados e por m retorna o resultado, nosso prximo exemplo mostrar exatamente isto.

4 Exemplo 2 Criando uma calculadora

Em nosso segundo exemplo iremos introduzir o uso de uma linguagem server-side realizando um processamento sobre os dados enviados no modo assncrono, isto ser feito criando uma calculadora. Nossa calculadora ser composta de 2 caixas de texto para a entrada dos valores e uma label para exibio dos resultados, a nica operao que ela realiza a soma. Cdigo 3: 'Calculadora HTML'
1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!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 > < s c r i p t type=" text / javascript " s r c=" ajaxInit . js "></s c r i p t > < s c r i p t type=" text / javascript "> function calcular () { ajax = a j a x I n i t () ; document . getElementById ( " resultado " ) . innerHTML = " Calculando ... " ; i f ( ajax ) { ajax . onreadystatechange = resultado ; v1 = document . getElementById ( " v1 " ) . v a l u e ; v2 = document . getElementById ( " v2 " ) . v a l u e ; u r l = ' http ://200.201.81.38/ anselmo / ciclo / calcular . php ? v1 = '+v1+'& v2 = '+v2 ;

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

15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

a j a x . open ( ' GET ' , u r l , t r u e ) ; a j a x . send ( n u l l ) ;

function resultado () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( a j a x . s t a t u s == 2 0 0 ) { document . getElementById ( " resultado " ) . innerHTML = a j a x . r e s p o n s e T e x t ; } } } </ s c r i p t > </head> <body> <form name=" calculadora "> <i n p u t type=" text " name=" v1 " i d=" v1 " s i z e="3" /> + <i n p u t type=" text " name=" v2 " i d=" v2 " s i z e="3 "/> = <l a b e l i d=" resultado "></l a b e l > <br/> <i n p u t type=" button " v a l u e=" Carregar " o n C l i c k=" calcular () "/> </form> </body> </html>

Cdigo 4: 'Calculadora PHP'

1 2 3

<? ?>

echo $_GET[ 'v1 ' ] + $_GET[ 'v2 ' ] ;

Na linha 11 o mtodo onreadystatechange assume uma funo externa a funo que cria o objeto ajax. A linha 12 e 13 cria duas variveis que armazenam os valores dos campos que esto no formulrio, este dado so pegos atravs do value 3 . A varivel url da linha 14 ir conter o endereo e as variveis que sero usadas pelo PHP para calcular a soma dos resultados. O arquivo PHP que realiza o clculo da soma realmente simples, ele pega as duas variveis v1 e v2 do array $_GET do PHP, soma seus valores e escreve o resultado. At o momento o resultado de nossas chamadas assncronas foram escritos de forma direta atravs do mtodo innerHTML, o uso deste mtodo desaconselhado pelo W3C pelas seguinte razes.

uma propriedade desenvolvida pela Microsoft, por esta razo proprietria, porm a maior parte dos navegadores incorporou-a. Por no ser padro esta sendo abolida das novas verses destes navegadores O resultado um string ao passo que o DOM uma estrutura hierrquica em XHTML
Os prximos dois exemplo so idnticos, diferenciando apena a forma como os dados so passados do servidor para o cliente, o primeiro usando texto normal e o outro uma string no formato JSON, usando ento o DOM para exibir o resultado da requisio.
3 Propiedade

de alguns objetos em Javascript que retorna o contedo do mesmo

5 Exemplo 3 Preenchimento um SELECT a partir de outro SELECT

Um exemplo clssico do preenchimento de um SELECT a partir de outro a escolha das cidades de um determinado estado. Este recurso uma das maiores 'pedras no sapato' dos programadores de sistema web, pois quando o usurio seleciona o estado toda a pgina deve ser recarregada, inclusive os valores dos demais campos j preenchidos, para que o SELECT com as cidades seja exibido. Com AJAX esta tarefa ca bem mais fcil pois basta que seja feita uma consulta das cidades do estado que esta no primeiro SELECT e inserir as cidades no segundo SELECT.

5.1 Usando InnerHTML

Cdigo 5: 'Cidades HTML'
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<!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 "> <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 type=" text / javascript " s r c=" ajaxInit . js "></s c r i p t > < s c r i p t type=" text / javascript "> function selecionaCidade ( estado ) { ajax = a j a x I n i t () ; i f ( ajax ) { ajax . onreadystatechange = escreveCidades ; 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 ) ; a j a x . send ( n u l l ) ; } } function escreveCidades () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( a j a x . s t a t u s == 2 0 0 ) { document . getElementById ( " cidade " ) . innerHTML = a j a x . r e s p o n s e T e x t ; } } } </ 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 > < 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=" 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 ><br/> <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 > </form> </body>

43

</html>

Cdigo 6: 'Cidades PHP'

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<? h e a d e r ( " Content - Type : text / html ; charset = iso -8859 -1 " ) ; $ e s t a d o = $_GET[ ' estado ' ] ; $ c i d a d e s = "" ; i f ( $ 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 >" ; }

i f ( $ e s t a d o==" sp " ) {

$ c i d a d e s .= " < option value =\"5\" > Mogi </ option >" ; $ c i d a d e s .= " < option value =\"6\" > Palmeiras </ option >" ; $ c i d a d e s .= " < option value =\"7\" > Santos </ option > " ;

echo $ c i d a d e s ; ?>

O arquivo Cidades.php gera os elementos options que sero inseridos dentro do SELECT das cidades. Esta abordagem no muito inteligente pois a quantidade de informao transmitidas do servidor para o cliente em sua maioria foi desnecessria. Da cidade apenas o cdigo e o nome deveriam ser transmitidos, as demais informaes so repetidas e podem ser geradas pelo navegador. Na linha 31 do cdigo fonte 5 feita a vericao se um dos elementos do SELECT estado foi selecionado, se sim ento envie o valor para a funo selecionaCidade. O cdigo fonte 6 a varivel estado recebida e de acordo com ela passado ao navegador as opes do SELECT cidade.

5.2 Usando JSON

JSON (com a mesma pronuncia do nome "Jason"em ingls), um acrnimo para Javascript Object Notation, um formato leve para intercmbio de dados computacionais. JSON um subconjunto da notao de objeto de Javascript, mas seu uso no requer Javascript exclusivamente. A simplicidade de JSON tem resultado em seu uso difundido, especialmente como uma alternativa para XML em AJAX. Uma das vantagens reivindicadas de JSON sobre XML como um formato para intercmbio de dados neste contexto, o fato de ser muito mais fcil escrever um analisador JSON. Em Javascript mesmo, JSON pode ser analisado trivialmente usando a funo eval(). Isto foi importante para a aceitao de JSON dentro da comunidade AJAX devido a presena deste recurso de Javascript em todos os navegadores web atuais. Na prtica, os argumentos a respeito da facilidade de desenvolvimento e performance do analisador so raramente relevados devido aos interesses de segurana no uso de eval() e a crescente integrao de processamento XML nos navegadores web modernos. Por esta 8

razo JSON tipicamente usado em ambientes onde o tamanho do uxo de dados entre o cliente e o servidor de supra importncia (da seu uso por Google, Yahoo, etc., os quais servem milhes de usurios), onde a fonte dos dados pode ser explicitamente convel, e onde a perda dos recursos de processamento XSLT no lado cliente para manipulao de dados ou gerao da interface, no uma considerao. Enquanto JSON freqentemente posicionado "em confronto"com XML, no incomum ver tanto JSON como XML sendo usados na mesma aplicao. Por exemplo, uma aplicao no lado cliente a qual integra dados do Google Maps com dados atmosfricos atravs de SOAP, requer suporte para ambos formatos de dados.

Figura 2: Automato que gera a linguagem JSON A gura 2 ilustra em forma de um autmato nito a gramtica da linguagem JSON. A string abaixo mostra um retorno das cidades do estado do Paran.

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

Usando a funo eval 4 do Javascript podemos transformar esta string em uma estrutura de objetos facilmente manipulveis. Se usarmos a funo eval no retorno das cidades poderiamos por exemplo acessar o cdigo da cidade de Pato Branco atravs do seguinte comando:

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

Na primeira linha aplicada a funo eval e seu resultado armazenado na varivel Json, na linha 2 acessado o atributo cidades, que um vetor, na posio 3 no atributo cdg. Para um exemplo completo veja os cdigos abaixo.
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

Cdigo 7: 'Cidades HTML'

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

<!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 "> <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 type=" text / javascript " s r c=" ajaxInit . js "></s c r i p t > < s c r i p t type=" text / javascript "> function selecionaCidadeJson ( estado ) { ajax = a j a x I n i t () ; i f ( ajax ) { ajax . onreadystatechange = escreveCidadesJson ; 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 . send ( n u l l ) ; } } function escreveCidadesJson () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( a j a x . s t a t u s == 2 0 0 ) { var x = 0 ; var 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 " ) ;

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 ) ; o p t i o n . appendChild ( document . createTextNode ( j s o n . c i d a d e s [ x ] . nm) ) ; document . getElementById ( document . createTextNode ( j s o n . c i d a d e s [ x ] . nm) ) ; } document . getElementById ( " cidade2 " ) . appendChild ( o p t i o n ) ;

/
/

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

function limparDestino ( destino ) { o b j = document . getElementById ( d e s t i n o ) ; while ( o b j . f i r s t C h i l d ) o b j . removeChild ( o b j . f i r s t C h i l d ) ; } </ 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 > < 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 > </ s e l e c t ><br/>

10

64 65 66 67 68 69

<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 "> </ s e l e c t > </form> </body> </html>

Cdigo 8: 'Cidades PHP'

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<? h e a d e r ( " Content - Type : text / html ; charset = iso -8859 -1 " ) ; $ e s t a d o = $_GET[ ' estado ' ] ; $ c i d a d e s = "{' cidades ':[ " ; i f ( $ 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 '}]} " ; }

i f ( $ e s t a d o==" sp " ) {

$ c i d a d e s .= "{' cdg ': '5 ' , ' nm ':' Mogi '}, {' cdg ': '6 ' , ' nm ':' Palmeiras '} , {' cdg ': '7 ' , ' nm ':' Santos '}]} " ;

echo $ c i d a d e s ; ?>

Revisando o Cdigo 8 podemos ver que a linha 2 chama a funo header, nela passado o comando charset=iso88591, isto muito importante pois diz a codicao do texto que esta sendo retornado, evitando assim que o navegador do usurio exiba de forma incorreta os acentos e outros caracteres especiais. Com os exemplos acima pudemos ter uma boa noo de como utilizar o ajax em nossas aplicaes web, mas, queremos coisas mais dinmicas e com efeitos por isso vamos fazer um pequeno Google Sugest

6 Sugerindo um Contedo
Nosso prximo exemplo consistir em um campo de texto que a cada tecla pressionada ir ao servidor e trar uma lista de palavras que comecem com o que j foi escrito. Isto ser exibido em uma DIV. Quando clicarmos em uma das palavras que vieram do servidor a DIV ir sumir e o texto ir para dentro da caixa de texto. Este sistema utilizado por exemplo no servio de e-mail do Yahoo, nele, quando digita-se o nome do contato ele j vai ltrando os que comeam com as letras j digitadas. Cdigo 9: 'Auto Completar HTML'
1 2 3 4 5 6 7

<!DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 3.2 Final // EN "> <html> <head> < t i t l e >Auto Completar </ t i t l e > < s c r i p t type=" text / javascript " s r c=" ajaxInit . js "></s c r i p t > < s c r i p t type=" text / javascript "> function sugerir ( s ) {

11

8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

ajax = a j a x I n i t () ; document . getElementById ( " resultado " ) . innerHTML = " Calculando ... " ; i f ( ajax ) { ajax . onreadystatechange = resultado ; 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 . send ( n u l l ) ; }

29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

function resultado () { i f ( a j a x . r e a d y S t a t e == 4 ) { i f ( 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+") " ) ; var x = 0 ; l i m p a r D e s t i n o ( " resultado " ) ; document . getElementById ( ' resultado ' ) . s t y l e . v i s i b i l i t y =' visible ' ; 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 . appendChild ( document . createTextNode ( 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 . getElementById ( " resultado " ) . appendChild (P) ; } } } }

/
/

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

function limparDestino ( destino ) { o b j = document . getElementById ( d e s t i n o ) ; while ( o b j . f i r s t C h i l d ) o b j . removeChild ( o b j . f i r s t C h i l d ) ; } </ s c r i p t > < s t y l e type=" text / css "> #r e s u l t a d o { background c o l o r : #e 5 e 5 e 5 ; border : 1px s o l i d #000; width : 150 px ; padding : 0px ; margin : 0px ; position : relative ; margin l e f t : 45 px ; margin top : 0px ; } p { l i n e h e i g h t : 15 px ; margin : 0px ; font : 18 px " Arial " , sans s e r i f ; padding : 5px ; } p : hover { background c o l o r : #cdcdcd ; cursor : pointer ; } </ 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=" pal ">Palavra </ l a b e l > <i n p u t type=" text " i d=" pal " name=" pal " onKeyUp=" sugerir ( document . getElementById

12

71 72 73 74

(' pal '). value )"/> <d i v i d=" resultado " s t y l e=" visibility : hidden "></div> </form> </body> </html>

Cdigo 10: 'Auto Completar PHP'

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<?

$p [ 0 ] $p [ 1 ] $p [ 2 ] $p [ 3 ] $p [ 4 ] $p [ 5 ] $p [ 6 ] $p [ 7 ] $p [ 8 ] $p [ 9 ] $p [ 1 0 ] $p [ 1 1 ]

= = = = = = = = = = = =

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

?>

$ s e a r c h = $_GET[ 's ' ] ; $x = 0 ; $ r e s = "{ ' pal ':[ " ; for ( $x = 0 ; $x <11; $x++){ i f ( $ 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 ) ) ) { $ 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 .= " ]} " ; echo $ r e s ;

Vamos analisar o Cdigo 9, na linha 24 chamada a funo style 5 .visibility 6 dene que o resultado esta oculto. Na linha 28 duas funes so adicionadas ao pargrafo com o texto que veio do servidor, a primeira funo coloca a palavra dentro da caixa de texto e a segunda funo esconde o DIV resultado. Agora vamos ver o Cdigo 10 em PHP, existe um vetor chamado $p com 12 palavras, a linha 17 e 20 montam a string no formato json, a linha 23 remove a virgula da ltima palavra.

6.1 Ligando a um Banco de Dados

A integrao de AJAX com bancos de dados no difere em nada do que foi feito at agora, pois ao m do uso do banco de dados pelo cliente o servidor envia uma string de volta. Nosso exemplo usar o mesmo arquivo HTML do cdigo anterior, apenas modicaremos o arquivo .php que ser chamado por ele. Cdigo 11: 'Conexo com o Banco'
5 Acessa 6 Atributo

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

13

1 2 3 4 5 6 7 8 9 10 11

# FileName=" Connection_php_mysql . htm " # Type=" MYSQL " # HTTP=" true "

<?php

$hostname_conexao = " localhost " ; $database_conexao = " test " ; $username_conexao = " aluno " ; $password_conexao = " aluno " ; $conexao = mysql_pconnect ( $hostname_conexao , $username_conexao , $password_conexao ) o r d i e ( mysql_error ( ) ) ; mysql_select_db ( $database_conexao , $conexao ) ; ?>

Cdigo 12: 'Auto Completar Usando Banco de Dados'

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?

i n c l u d e ( " conexao . php " ) ; $ s e a r c h = $_GET[ 's ' ] ; $ 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 , $conexao ) ; $ l i n h a s = mysql_fetch_array ( $ c o n s u l t a ) ;

do {

$ r e s = "{ ' pal ':[ " ;

$ 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 = mysql_fetch_array ( $ c o n s u l t a ) ) ; $ 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 .= " ]} " ; echo $ r e s ;

?>

O cdigo 11 cria uma conexo com o banco de dados, a linha 9 conecta com o servidor usando o usurio e senha e a linha 10 inicia o uso do banco de dados text. O cdigo 12 faz a pesquisa dos municpios no banco de dados, na linha 2 includa o arquivo que faz a conexo, na linha 4 a varivel $search recebe a palavra que foi digitada na caixa de texto, na linha 13 o comando str_replace 7 foi utilizado para evitar problemas com palavras que por ventura contenham aspas simples como por exemplo d'agua, se este tratamento no for feito na hora de chamar a funo eval ocorreria um erro.

7 Vantagens no uso do Ajax

Alguns benefcios que temos ao usar AJAX so:

Torna possvel utilizar uma aplicao baseada na web com recurso e funcionalidades parecidos com os que possumos hoje em nossos sistemas Desktop. Isto torna o uso dos aplicativos web realmente usveis; Como a modicao das informaes da tela so parciais uma grande quantidade de informaes deixa de trafegar inutimente pela rede;
7 Substitui

todas as ocorrncias da string procurada na string de retorno

14

 O servidor que roda a aplicao ca menor carregado pois existe uma diviso de tarefas com o cliente; AJAX no uma tecnologia por isto no necessrio pagar para a utilizar.
Porm como j dizia o poeta "nem tudo so ores ", temos que:

AJAX no a soluo milagrosa para todos os males e se usado de forma inadequada pode piorar uma situao que j era feia; Os Navegadores usam diferentes mtodos por isso temos que estar atentos quanto a eles para no impossibilitar o uso de nossos sistemas por tais navegadores; Como existe uma diviso de processamente entre o cliente e o servidor, temos que minimizar este processamento pois os Navegador em geral no suporta uma carga muito pesada de scripts ; Os boto voltar, avana e histrico no funcionam muito bem com AJAX.

Referncias
[1] Erko Bridee de Almeida Cabrera. AJAX Viso Conceitual. Portal Java, 2005. [2] Steve Ganz. Alternatives to innerHTML. SlayerOce, 2006. [3] Jesse James Garrett. Ajax: A new approach to web applications, http://adaptivepath.com/publications/essays/archives/000385.php. 2005.

7.1 Para Saber Mais

Artigo muito bom sobre AJAX http://adaptivepath.com/publications/essays/archives/000385.php Usando POST com AJAX http://www.dotpix.com.br/ wendel/projetos/ajax/postXMLHttpRequest/sumGet.html No use innerHTML http://slayeroce.com/articles/innerHTML_alternatives/#intro Pgina ocial do JSON http://www.json.org/

15

 DHTML http://www.quirksmode.org/js/cross_dhtml.html Exemplos em Ajax http://www.japs.etc.br/ajax/ Material sobre Css http://www.maujor.com DOM XHTML e HTML http://www.amtechs.com/w3c/introduction.html

16