AJAX - Tutorial

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

18 de agosto de 2006

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Agenda
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

Introducao
Sincrono X Assncrono
O que e Ajax?
Para que Serve?
Exemplo 1 - Carregando um Arquivo
ajaxInit
Metodos e Atributos
Exibindo o Resultado
Exemplo 2 - Calculadora
Exemplo 3a - Alimentacao de Select
Json
Exemplo 3b - Alimentacao de Select com Json
Sugestao de Conte
udo
Conclusao
Referencias

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Sncrono X Assncrono!

Sncrono
I
I
I

Faz uma solicitacao ao servidor;

O usuario fica esperando a reposta do servidor;
Quando vem a resposta toda a pagina e recarregada e o
conte
udo exibido.

Assncrono
I

I
I

Faz uma solicitacao ao servidor de forma que o usuario do

sistema nao tome consciencia disto;
O usuario continua trabalhando com o sistema;
Ap
os o recebimento do conte
udo usa-se Javascript para
processar e exibir o resultado na tela.

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

O que e AJAX

AJAX (acronimo em lngua inglesa de Asyncronous Javascript

And XML);
Um conjunto de Tecnologia
I
I
I
I
I
I
I

Objeto capaz de fazer requisic

oes assncronas;
HTML;
JavaScript;
XML eXtensible Markup Language;
Json JavaScript Object Notation;
DHTML;
CSS.

AJAX nao e somente um modelo, e tambem uma iniciativa na

construcao de aplicac
oes web mais dinamicas.

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Para que Serve?

Criar WEB sites mais dinamicos;

Acelerar o acesso a informacao;

Diminuir o trafego de informac

oes entre cliente X servidor

Produzir aplicac
oes WEB mais semelhantes as Desktop.

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Tradicional X AJAX

http://adaptivepath.com/images/publications/essays/ajaxfig1.png

http://adaptivepath.com/images/publications/essays/ajaxfig2.png

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

C
odigo Fonte 1: ajaxInit.js
1

function

a j a x I n i t () {

var xmlhttp ;

3
4

try {
x m l h t t p = new XMLHttpRequest ( ) ;
} catch ( ee ) {
try {
x m l h t t p = new A c t i v e X O b j e c t ( " Msxml2 . XMLHTTP " ) ;
} catch ( e ) {
try {
x m l h t t p = new A c t i v e X O b j e c t ( " Microsoft . XMLHTTP " ) ;
} catch (E) {
xmlhttp = f a l s e ;
}
}
}

5
6
7
8
9
10
11
12
13
14
15
16
17
18

return xmlhttp ;

19
20

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Exemplo 1

Carrega um arquivo chamado texto.txt

Insere seu conte

udo no DIV cujo id e texto

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 2: Funcao do Exemplo 1

function carregar () {
ajax = 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 ... " ;
i f ( ajax ) {
a j a x . open ( GET , http : / / 2 0 0 . 2 0 1 . 81 . 3 8 / 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 ) {
i f ( 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 ( " texto " ) .
innerHTML = a j a x . r e s p o n s e T e x t ;
}
}
}
}
a j a x . send ( n u l l ) ;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Metodos e Atributos
I

Metodos
I

open(mode, url, boolean), mode e POST ou GET, url e o

endereco, pode ser relativo, o u
ltimo parametro e TRUE para
conexao assncrona e FALSE para conexao sncrona.
o metodo SEND que ativa a conexao e faz a
send() E
requisicao de informac
oes ao documento aberto pelo metodo
OPEN;

Atributos
I

status : Status do retorno do html, sao os codigos padroes do

html 200 ok, 400 no found;
responseText : Retorna a cadeia de caracteres que o servidor
enviou;
onreadystatechange : Define qual funcao sera chamada para
fazer a manipulacao dos dados assim que houver um retorno;
readyState : C
odigo que diz o status da solicitacao
I
I
I
I
I

0
1
2
3
4

(uninitialized);
(a carregar);
(carregado);
(interactivo);
(completo).

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Exibindo os Resultados

Para exibir o resultado da consulta pode-se usar dois metodos

o innerHTML ou o DOM;

innerHTML simplesmente interpreta o texto que vem do

servidor como sendo HTML e joga dentro do objeto de
destino;
a definicao da
DOM (Modelo de Objeto de Documentos) E
estrutura logica dos documentos e o meio pelo qual um
documento e acessado e manipulado

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Calculadora

Nossa calculadora sera composta de 2 caixas de texto para a

entrada dos valores e uma label para exibicao dos resultados,
au
nica operacao que ela realiza e a soma;

O arquivo PHP que realiza o calculo da soma e realmente

simples, ele pega as duas variaveis v1 e v2 do array $ GET do
PHP, soma seus valores e escreve o resultado;

http://200.201.81.38/anselmo/ciclo/exemplo2.html.

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 3: Funcao do Exemplo 2

1
2
3
4
5
6
7
8
9
10
11
12

function calcular () {
ajax = 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 ... " ;
i f ( ajax ) {
ajax . onreadystatechange = resultado ;
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 : / / 2 0 0 . 2 0 1 . 8 1 . 3 8 / anselmo / ciclo /
calcular . php ? v1 = +v1+& v2 = +v2 ;
a j a x . open ( GET , u r l , t r u e ) ;
a j a x . send ( n u l l ) ;
}
}

13
14
15
16
17
18
19
20

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 . 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 ;
}
}
}

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 4: Calculadora PHP

1

<?
e c h o $ GET [ v1 ] + $ GET [ v2 ] ;

2
3

?>

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Exemplo 3a - Alimentacao de Select

Um exemplo classico do preenchimento de um SELECT a

partir de outro e a escolha das cidades de um determinado
estado. Este recurso e uma das maiores pedras no sapato
dos programadores de sistema WEB, pois quando o usuario
seleciona o estado toda a pagina deve ser recarregada,
inclusive os valores dos demais campos ja preenchidos, para
que o SELECT com as cidades seja exibido.

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 5: Cidades PHP

1
2

<?
h e a d e r ( " Content - Type : text / html ; charset = iso -8859 -1 " ) ;

3
4
5
6
7
8
9
10
11

$ 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\" > Tup~
a 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 > " ;
$ c i d a d e s .= " < option value =\"4\" > Pato Branco </ option > " ;
}

12
13
14
15
16
17

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 > " ;
}

18
19
20

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

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 6: Funcao do Exemplo 3

1
2
3
4
5
6
7
8
9

function selecionaCidade ( estado ) {

ajax = a j a x I n i t () ;
i f ( ajax ) {
ajax . onreadystatechange = escreveCidades ;
u r l = http : / / 2 0 0 . 2 0 1 . 8 1 . 3 8 / 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 ) ;
}
}

10
11
12
13
14
15
16
17

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 . g e t E l e m e n t B y I d ( " cidade " ) . innerHTML =
ajax . responseText ;
}
}
}

18
19

< s e l e c t name=" estado " i d=" estado " onChange=" if ( this . options
[ this . selectedIndex ]. value ) { s e l ec i o n a C id ad e ( this . options
[ this . selectedIndex ]. value ) } ">

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Json

JSON JavaScript Object Notation

http://www.json.org/

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 7: Cidades PHP

1
2

<?
h e a d e r ( " Content - Type : text / html ; charset = iso -8859 -1 " ) ;

3
4
5
6
7
8
9
10
11

$ 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 : Tup~
a ssi } ,
{ cdg : 2 , nm : Toledo } ,
{ cdg : 3 , nm : Cascavel } ,
{ cdg : 4 , nm : Pato Branco }]} " ;
}

12
13
14
15
16
17

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 }]} " ;
}

18
19
20

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

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 8: Funcao que Chama as Cidades

1
2
3
4
5
6
7
8
9

function selecionaCidadeJson ( estado ) {

ajax = a j a x I n i t () ;
i f ( ajax ) {
ajax . onreadystatechange = escreveCidadesJson ;
u r l = http : / / 2 0 0 . 2 0 1 . 8 1 . 3 8 / 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 ) ;
}
}

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 9: Funcao que Exibe o Resultado

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

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;
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 " ) ;
f o r ( 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 . 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) ) ;
document . g e t E l e m e n t B y I d ( " cidade2 " ) .
appendChild ( option ) ;
}
}
}
}

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 10: Funcao que Remove Tods os elementos

1
2
3
4
5
6
7
8

/
Remove t o d o s o s e l e m e n t o s f i l h o s de um e l e m e n t o
/
function limparDestino ( destino ) {
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 ( obj . f i r s t C h i l d )
obj . removeChild ( obj . f i r s t C h i l d ) ;
}

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 11: Funcao para conectar ao banco de dados

1
2
3
4
5
6
7
8
9

10
11

<?php
# F i l e N a m e=" C o n n e c t i o n _ p h p _ m y s q l . htm "
# Type=" 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 " ;
$conexao = mysql pconnect ( $hostname conexao ,
$username conexao , $password conexao ) or d i e ( m y s q l e r r o r
() ) ;
m y s q l s e l e c t d b ( $database conexao , $conexao ) ;
?>

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Codigo Fonte 12: Auto Completar Usando Banco de Dados

1

<?
i n c l u d e ( " conexao . php " ) ;

2
3

$ s e a r c h = $ GET [ s ] ;

4
5

$ s q l= " SELECT * FROM municipio WHERE mnc_descricao like

" . $ s e a r c h . "%" ;

6
7

$ c o n s u l t a = mysql query ( $sql , $conexao ) ;

$linhas = mysql fetch array ( $consulta ) ;

8
9
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 ( $linhas = mysql fetch array ( $consulta ) ) ;

11
12
13
14
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 .= " ]} " ;
echo $ r e s ;

16
17
18
19

?>

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Vantagens

Como a modificacao das informac

oes da tela sao parciais uma
grande quantidade de informac
oes deixa de trafegar
inultimente pela rede;

O servidor que roda a aplicacao fica menor carregado pois

existe uma divisao de tarefas com o cliente;

AJAX nao e uma tecnologia por isto nao e necessario pagar

para a utilizar.

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Problemas

AJAX nao e a solucao milagrosa para todos os males e se

usado de forma inadequada pode piorar uma situacao que ja
era feia;

Os Navegadores usam diferentes metodos por isso temos que

estar atentos

Os Navegador em geral nao suporta uma carga muito pesada

de scripts;

Os botao voltar, avanca e hist

orico nao funcionam muito bem
com AJAX.

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial

Referencias
I

Artigo muito bom sobre AJAX

http://adaptivepath.com/publications/essays/archives/000385.php

Nao use innerHTML

http://slayeroffice.com/articles/innerHTML alternatives/#intro

Pagina oficial do Json

http://www.json.org/

DHTML
http://www.quirksmode.org/js/cross dhtml.html

Material sobre Css

http://www.maujor.com

DOM XHTML e HTML

http://www.amtechs.com/w3c/introduction.html

Anselmo Luiz Eden

Battisti, Christiano Julio Pilger de Brito

AJAX - Tutorial