Você está na página 1de 20
AJAX A SSYNCHRONOUS J AVASCRIPT AND XML Prof. José Rodolfo Beluzo Bacharel em Ciências da

AJAX

ASSYNCHRONOUS JAVASCRIPT AND XML

Prof. José Rodolfo Beluzo Bacharel em Ciências da Computação – ICMC/USP Especialista em Desenvolvimento de Sistemas para WEB – UNIFAFIBE

Bacharel em Ciências da Computação – ICMC/USP Especialista em Desenvolvimento de Sistemas para WEB – UNIFAFIBE

SOFTWARES DESKTOP X SOFTWARES WEB

Editor de Texto Microsoft Word 2007

o Abrir item de Formatação de Fonte

Abrir Navegador WEB (de preferência Firefox 7.0 ou superior)

o

Desabilitar Javascript

o Realizar pesquisa no Google (como utilizar ajax)

o

Habilitar Javascript

o Realizar pesquisa no Google (como utilizar ajax)

pesquisa no Google (como utilizar ajax) o Habilitar Javascript o Realizar pesquisa no Google (como utilizar
R ELAÇÃO C LIENTE X S ERVIDOR NA WEB o Cliente – Navegador WEB do

RELAÇÃO CLIENTE X SERVIDOR NA WEB

o Cliente – Navegador WEB do usuário (Internet Explorer,

Firefox, Opera, etc

)

oServidor – Servidor WEB onde está hospedado o site Acessado. Pode ser:

Estático (Arquivos HTML )

Dinâmico (Arquivos PHP, ASP.NET, JSP, etc

)

hospedado o site Acessado. Pode ser: • Estático (Arquivos HTML ) • Dinâmico (Arquivos PHP, ASP.NET,
hospedado o site Acessado. Pode ser: • Estático (Arquivos HTML ) • Dinâmico (Arquivos PHP, ASP.NET,
hospedado o site Acessado. Pode ser: • Estático (Arquivos HTML ) • Dinâmico (Arquivos PHP, ASP.NET,
HTML D INÂMICO - DHTML Alteração de “trechos” dinâmicamente Javascript DHTML – Cliente Cálculos com

HTML DINÂMICO - DHTML

Alteração de “trechos” dinâmicamente

Javascript

DHTML – Cliente

Cálculos com valores do formulário

DHTML – Servidor

Cálculos com valores do servidor - FRETE

DHTML – Cliente Cálculos com valores do formulário DHTML – Servidor Cálculos com valores do servidor
WEB 2.0 E A JAX RIA: Rich Internet Aplications RIA + AJAX = 100% (são

WEB 2.0 E AJAX

RIA: Rich Internet Aplications

RIA + AJAX = 100% (são complementares)

WEB 2.0

Serviços ao invés de pacotes Filosofia Participativa dos usuários Inteligência Coletiva Informação mais precisa Interface mais simplificada

Participativa dos usuários Inteligência Coletiva Informação mais precisa Interface mais simplificada

FUNCIONALIDADE DO AJAX

Exemplo clássico:

o

Usuário informa CEP

o

Página reconhece preenchimento do campo

o

Realiza comunicação “assíncrona” com o servidor

o

Servidor “processa” informação de acordo com a regra

o

Informações do endereço são preenchidas automaticamente

Transmissão e Processamento de dados Design e Interface para o usuário final

são preenchidas automaticamente Transmissão e Processamento de dados Design e Interface para o usuário final
M ODELO T RADICIONAL X A JAX Modelo Tradicional Modelo Ajax Protocolo HTTP Protocolo HTTP

MODELO TRADICIONAL X AJAX

Modelo Tradicional

Modelo Ajax

Protocolo HTTP

Protocolo HTTP e Objeto XMLHttpRequest

Refresh a cada requisição

Sem refresh. Atualização Pontual e Dinâmica

Navegador “renderiza” todo HTML

Navegador “renderiza” pontualmente o HTML

Servidor processa e gera HTML

Servidor processa e gera XML

Servidor devolve todo HTML da página a cada requisição

Servidor devolve apenas XML

Workflow da aplicação fica no servidor

Workflow da aplicação fica no cliente

Servidor devolve apenas XML Workflow da aplicação fica no servidor Workflow da aplicação fica no cliente
Servidor devolve apenas XML Workflow da aplicação fica no servidor Workflow da aplicação fica no cliente
E XEMPLOS DE APLICAÇÃO AJAX Google Maps Google Spreadsheets Facebook Gmail Twitter

EXEMPLOS DE APLICAÇÃO AJAX

Google Maps

Google Spreadsheets

Facebook

Gmail

Twitter

E XEMPLOS DE APLICAÇÃO AJAX Google Maps Google Spreadsheets Facebook Gmail Twitter
O O BJETO XMLH TTP R EQUEST Histórico Iniciou com objeto XMLHttp, parte integrante do

O OBJETO XMLHTTPREQUEST Histórico

Iniciou com objeto XMLHttp, parte integrante do MSXML – Microsoft XML core Services – pacote de controles ActiveX para manipulação de XML – IE5

Em seguida outros navegadores criaram um objeto similar em funcionalidades e API

Navegadores

Apple Safari (1.2 em diante) Mozilla Firefox (0.7.3 em diante) Opera (7.6 P1+ em diante) Konqueror KDE/Linux Internet Explorer (5 em diante)

Mozilla Firefox (0.7.3 em diante) Opera (7.6 P1+ em diante) Konqueror KDE/Linux Internet Explorer (5 em
P ROPRIEDADES DO XMLH TTP R EQUEST Propriedade Descrição onreadystatechange Define a função javaScript que

PROPRIEDADES DO XMLHTTPREQUEST

Propriedade

Descrição

onreadystatechange

Define a função javaScript que tratará o evento quando mudar a propriedade readyState.

Exemplo:

oXMLHttpRequest.onreadystatechange = function tratarMudancaEstado{ /faz alguma coisa

}

responseBody

Representa uma forma de retorno do HTTP resonse. Recebe diretamente do servidor dados não codificados, podendo ser do tipo UTF-8, UCS-2, UCS-4, Shift_JIS, entre outros;

Recebe diretamente do servidor dados não codificados, podendo ser do tipo UTF-8, UCS-2, UCS-4, Shift_JIS, entre
P ROPRIEDADES DO XMLH TTP R EQUEST Propriedade Descrição responseTxt Representa a resposta do servidor

PROPRIEDADES DO XMLHTTPREQUEST

Propriedade

Descrição

responseTxt

Representa a resposta do servidor no formato texto

responseXML

Representa a resposta do servidor no formato XML e pode ser manipulado pela estrutura DOM.

Status

Descreve o estado do servidor web. Pode assumir diversos códigos. Os principais são:

200 para OK, 403 para proíbido, 404 para não encontrado, 500 para erro interno do servidor, entre outros códigos.

StatusText

Descreve o estado do servidor http em formato texto. Exemplo: Ok, Forbidden, Internal Server Error, entre outros.

readyState

Guarda o estado da requisição. Somente leitura. Pode assumir 5 estados possíveis, de acordo com a próxima tabela.

Guarda o estado da requisição. Somente leitura. Pode assumir 5 estados possíveis, de acordo com a

PROPRIEDADES DO XMLHTTPREQUEST

 

Possíveis valores para o readyState:

Valor

Estado

Descrição

0

Não Iniciado

O

Objeto foi criado, mas não foi inicializado, ou

seja, o método open ainda não foi chamado.

1

Carregando

O

Objeto foi criado e ainda não foi chamado o

método send.

2

Carregado

O

método send foi chamado mas o status e os

headers (protocolo http) ainda não estão disponíveis.

3

Transmitindo

Alguns dados foram transmitidos. Acessar as propriedades responseBody e responseTxt nesse estado para obter resultados parciais pode retornar um erro, porque status e o reponse headers ainda não estão disponíveis.

4

Completo

Todos os dados foram transmitidos e estão disponíveis através das propriedades responseBody e responseTxt.

Todos os dados foram transmitidos e estão disponíveis através das propriedades responseBody e responseTxt.
M ÉTODOS DO XMLH TTP R EQUEST Método Descrição abort() Cancela Requisição HTTP e muda

MÉTODOS DO XMLHTTPREQUEST

Método

Descrição

abort()

Cancela Requisição HTTP e muda o estado do objeto para readyState=0 (não iniciado). Para continuar, deve-se chamar o open.

getAllResponseHeaders()

Retorna os valores do cabeçalho do protocolo HTTP no formato texto.

getResponseHeader(header)

Retorna o valor em formato texto de um item do cabeçalho do protocolo HTTP da mensagem.

open(method, url, [async, user, password])

Inicializa o objeto XMLHttpRequest definindo o método e a URL a ser chamada. Depois de chamado este método, você deve chamar o send() para enviar a requisição ao servidor. Apesar do nome do método ser open (abrir), não significa que é aberta uma conexão com o servidor. A chamada do open() na verdade configura o objeto XMLHttpRequest para posterior transmissão de dados com o método send().

chamada do open() na verdade configura o objeto XMLHttpRequest para posterior transmissão de dados com o
M ÉTODOS DO XMLH TTP R EQUEST Método Descrição send( content) Envia os dados para

MÉTODOS DO XMLHTTPREQUEST

Método

Descrição

send( content)

Envia os dados para o servidor HTTP e recebe a resposta. Esse método pode ser assíncrono ou síncrono e varia de acordo com o parâmetro informado no método open(). Se for síncrono, o objeto aguarda até o término da resposta do servidor ser recebida ou até expirar o tempo de espera do protocolo HTTP. O modo assíncrono responde de imediato.

setRequestHeader( header, value)

Atribui um valor (value) a um dado campo do cabeçalho (header) que então formam os pares de dados do cabeçalho do protocolo HTTP. Só pode ser chamado após o método open().

(header) que então formam os pares de dados do cabeçalho do protocolo HTTP. Só pode ser
O O BJETO XMLH TTP R EQUEST Ainda não são um padrão W3C IE implementa

O OBJETO XMLHTTPREQUEST

Ainda não são um padrão W3C

IE implementa com controle ActiveX

Demais navegadores incorporam nativamente

Código para criar o objeto no IE difere de outros navegadores

controle ActiveX Demais navegadores incorporam nativamente Código para criar o objeto no IE difere de outros

O OBJETO XMLHTTPREQUEST

Criando um objeto:

try{

//IE novo xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP); } catch(e){ try{

//IE antigo xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP);

} catch(e){

try{

// Mozilla, Safari, Opera, etc xmlhttp = new XMLHttpRequest();

}

}

}

} catch(e){

xmlhttp = false;

}

} catch(e){ try{ // Mozilla, Safari, Opera, etc xmlhttp = new XMLHttpRequest(); } } } }
F UNCIONAMENTO DO AJAX

FUNCIONAMENTO DO AJAX

F UNCIONAMENTO DO AJAX
F UNCIONAMENTO DO AJAX
E O EXEMPLO ??? C HEGA DE T EORIA NÉ ?

E O EXEMPLO??? CHEGA DE TEORIA NÉ?

E O EXEMPLO ??? C HEGA DE T EORIA NÉ ?
E O EXEMPLO ??? C HEGA DE T EORIA NÉ ?
E XEMPLOS : Exemplo 1: Carregar informações de endereço através do CEP Exemplo2: Ajax +

EXEMPLOS:

Exemplo 1: Carregar informações de endereço através do CEP

Exemplo2: Ajax + Jquery.

E XEMPLOS : Exemplo 1: Carregar informações de endereço através do CEP Exemplo2: Ajax + Jquery.
R EFERÊNCIAS Bibliográficas Borba, Fernando Emmanoel. Ajax – Guia de Programação. 1ª edição, 2006. Editora

REFERÊNCIAS

Bibliográficas

Borba, Fernando Emmanoel. Ajax – Guia de Programação. 1ª edição, 2006. Editora Érica Ltda. Silva, Maurício Samy. Ajax com JQuery – Requisições Ajax com a simplicidade de JQuery. 1ª edição, 2009. Editora Novatec.

WEB

http://www.maujor.com/blog/2009/02/03/requisicao- ajax-com-o-metodo-load-da-jquery/

edição, 2009. Editora Novatec. WEB http://www.maujor.com/blog/2009/02/03/requisicao- ajax-com-o-metodo-load-da-jquery/