AJAX

ASSYNCHRONOUS JAVASCRIPT AND XML

Prof. Jos Rodolfo Beluzo Bacharel em Cincias da Computao 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 Formatao de Fonte

Abrir Navegador WEB (de preferncia 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)

RELAO CLIENTE X SERVIDOR NA WEB

o Cliente Navegador WEB do usurio (Internet Explorer, Firefox, Opera, etc...) oServidor Servidor WEB onde est hospedado o site Acessado. Pode ser: Esttico (Arquivos HTML ) Dinmico (Arquivos PHP, ASP.NET, JSP, etc...)

HTML DINMICO - DHTML

Alterao de trechos dinmicamente Javascript DHTML Cliente
Clculos com valores do formulrio

DHTML Servidor
Clculos com valores do servidor - FRETE

WEB 2.0 E AJAX

RIA: Rich Internet Aplications RIA + AJAX = 100% (so complementares) WEB 2.0
Servios ao invs de pacotes Filosofia Participativa dos usurios Inteligncia Coletiva Informao mais precisa Interface mais simplificada

FUNCIONALIDADE DO AJAX
Exemplo clssico:
o Usurio informa CEP o Pgina reconhece preenchimento do campo o Realiza comunicao assncrona com o servidor o Servidor processa informao de acordo com a regra o Informaes do endereo so preenchidas automaticamente

Transmisso e Processamento de dados Design e Interface para o usurio final

MODELO TRADICIONAL X AJAX

Modelo Tradicional
Protocolo HTTP

Modelo Ajax
Protocolo HTTP e Objeto XMLHttpRequest

Refresh a cada requisio Navegador renderiza todo HTML Servidor processa e gera HTML Servidor devolve todo HTML da pgina a cada requisio Workflow da aplicao fica no servidor

Sem refresh. Atualizao Pontual e Dinmica Navegador renderiza pontualmente o HTML Servidor processa e gera XML Servidor devolve apenas XML Workflow da aplicao fica no cliente

EXEMPLOS DE APLICAO AJAX

Google Maps Google Spreadsheets Facebook Gmail Twitter

O OBJETO XMLHTTPREQUEST
Histrico
Iniciou com objeto XMLHttp, parte integrante do MSXML Microsoft XML core Services pacote de controles ActiveX para manipulao 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)

PROPRIEDADES DO XMLHTTPREQUEST
Propriedade onreadystatechange Descrio Define a funo 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 no codificados, podendo ser do tipo UTF-8, UCS-2, UCS-4, Shift_JIS, entre outros;

PROPRIEDADES DO XMLHTTPREQUEST
Propriedade responseTxt responseXML Descrio Representa a resposta do servidor no formato texto Representa a resposta do servidor no formato XML e pode ser manipulado pela estrutura DOM. Descreve o estado do servidor web. Pode assumir diversos cdigos. Os principais so: 200 para OK, 403 para probido, 404 para no encontrado, 500 para erro interno do servidor, entre outros cdigos. Descreve o estado do servidor http em formato texto. Exemplo: Ok, Forbidden, Internal Server Error, entre outros. Guarda o estado da requisio. Somente leitura. Pode assumir 5 estados possveis, de acordo com a prxima tabela.

Status

StatusText

readyState

PROPRIEDADES DO XMLHTTPREQUEST
Possveis valores para o readyState:
Valor Estado
0 1 2 No Iniciado Carregando Carregado

Descrio
O Objeto foi criado, mas no foi inicializado, ou seja, o mtodo open ainda no foi chamado. O Objeto foi criado e ainda no foi chamado o mtodo send. O mtodo send foi chamado mas o status e os headers (protocolo http) ainda no esto disponveis. 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 no esto disponveis. Todos os dados foram transmitidos e esto disponveis atravs das propriedades responseBody e responseTxt.

Transmitindo

Completo

MTODOS DO XMLHTTPREQUEST
Mtodo
abort()

Descrio
Cancela Requisio HTTP e muda o estado do objeto para readyState=0 (no iniciado). Para continuar, deve-se chamar o open. Retorna os valores do cabealho do protocolo HTTP no formato texto.

getAllResponseHeaders()

getResponseHeader(header) Retorna o valor em formato texto de um item do cabealho do protocolo HTTP da mensagem. open(method, url, [async, user, password]) Inicializa o objeto XMLHttpRequest definindo o mtodo e a URL a ser chamada. Depois de chamado este mtodo, voc deve chamar o send() para enviar a requisio ao servidor. Apesar do nome do mtodo ser open (abrir), no significa que aberta uma conexo com o servidor. A chamada do open() na verdade configura o objeto XMLHttpRequest para posterior transmisso de dados com o mtodo send().

MTODOS DO XMLHTTPREQUEST
Mtodo
send( content)

Descrio
Envia os dados para o servidor HTTP e recebe a resposta. Esse mtodo pode ser assncrono ou sncrono e varia de acordo com o parmetro informado no mtodo open(). Se for sncrono, o objeto aguarda at o trmino da resposta do servidor ser recebida ou at expirar o tempo de espera do protocolo HTTP. O modo assncrono responde de imediato. Atribui um valor (value) a um dado campo do cabealho (header) que ento formam os pares de dados do cabealho do protocolo HTTP. S pode ser chamado aps o mtodo open().

setRequestHeader( header, value)

O OBJETO XMLHTTPREQUEST
Ainda no so um padro W3C IE implementa com controle ActiveX Demais navegadores incorporam nativamente Cdigo para criar o objeto no IE difere de outros navegadores

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

FUNCIONAMENTO DO AJAX

E O EXEMPLO??? CHEGA DE TEORIA N?

EXEMPLOS:
Exemplo 1: Carregar informaes de endereo atravs do CEP Exemplo2: Ajax + Jquery.

REFERNCIAS
Bibliogrficas
Borba, Fernando Emmanoel. Ajax Guia de Programao. 1 edio, 2006. Editora rica Ltda. Silva, Maurcio Samy. Ajax com JQuery Requisies Ajax com a simplicidade de JQuery. 1 edio, 2009. Editora Novatec.

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