tw course ajax 2007 ap01
TRANSCRIPT
Overview do XHR (XMLHttpRquest)
Christiano Milfont
Anatomia de uma operao Ajax Mtodos e Propriedades do XHR Melhores prticas com XHR
Ajax [Hype Vs Reality] ...
Anatomia de uma operao Ajax ...
Anatomia de uma operao Ajax ...
Ocorre um evento no cliente
Um XHR instanciado
A instncia configurada
Solicita uma conexo assncrona
A requisio processada pelo servidor
O servidor retorna um XML
O XHR chama o callback e repassa o XML
O HTML DOM processa o XML.
1. Ocorre um evento no cliente
Um evento mapeado acionado no cliente:
2. Um XHR instanciado
Instancia uma verso do objeto XHR dependendo do Browser, a Microsoft (criadora do objeto) tem algumas implementaes dependendo da verso do Internet Explorer.
3. A instncia configurada
O mtodo open do objeto XHR cria uma conexo e recebe como parmetros: o mtodo de conexo (POST ou GET); a url do servidor; e um booleano que indica se a conexo assncrona (TRUE) ou sncrona (FALSE).
Associa-se uma funo callback que processar o resultado do servidor.
Submete os dados caso a conexo seja POST.
4. Solicita uma conexo assncrona
Quando a propriedade readStatedo objeto XHR recebe o valor 4 a conexo foi terminada, podemos processar diretamente ou somente quando a propriedade status receber o valor 200.
5. A requisio processada pelo servidor
O servidor processa uma requisio como outra qualquer e devolve um XML ou um texto.
6. O servidor retorna um XML ou um texto
comum utilizar na resposta um texto com o objeto no formato JSON para ser processado na funo callback.
7 e 8. Callback processa retorno
A funo callback processa o retorno utilizando DOM.
Mtodos e propriedades do XHR
Status do readyState0: No inicializado.1: Conexo estabelecida.2: Requisio recebida.3: Em processo.4: Finalizada.
AtributosreadyState: Troca valores de 0 a 4 que indicam que est Ready.Status: Cdigos de status do response HTTP.responseText: Processa a resposta como texto.responseXML: Processa a resposta como um objeto XML.onreadystatechange: Propriedade que recebe uma funo que invocada quando o evento readystatechange disparado.
Mtodosopen(mode, url, boolean): inicializa aconexo e recebe os parametros mode(conexo), url e booleano (sncrono ouassncrono).send("string"): Null para GET ou uma String dos parametros e valores para o POST.
Melhores prticas do XHR
Namespaces contra funes globais
Deteco otimizada
Bridge encapsula diferenas de Cross Browser
Delegao de eventos
New School suplanta Old School
Separao em camadas
Orientao a objetos contra prog. funcional
DOM contra innerHTML