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