Overview do XHR (XMLHttpRquest) Christiano Milfont Anatomia de uma operação Ajax Métodos e Propriedades do XHR Melhores pr...
Ajax [Hype Vs Reality] ...
Anatomia de uma operação Ajax ...
Anatomia de uma operação Ajax ... <ul><li>Ocorre um evento no cliente </li></ul><ul><li>Um XHR é instanciado </li></ul><ul...
1. Ocorre um evento no cliente <ul><li>Um evento mapeado é acionado no cliente : </li></ul>
2. Um XHR é instanciado <ul><li>Instancia uma versão do objeto XHR dependendo do Browser, a Microsoft (criadora do objeto)...
3. A instância é configurada <ul><li>O método “open” do objeto XHR cria uma conexão e recebe como parâmetros: o método de ...
4. Solicita uma conexão assíncrona <ul><li>Quando a propriedade readStatedo objeto XHR recebe o valor 4 a conexão foi term...
5. A requisição é processada pelo servidor <ul><li>O servidor processa uma requisição como outra qualquer e devolve um XML...
7 e 8. Callback processa retorno <ul><li>A função callback processa o retorno utilizando DOM. </li></ul>
Métodos e propriedades do XHR Status do readyState 0:  Não inicializado. 1:  Conexão estabelecida. 2:  Requisição recebida...
Melhores práticas do XHR <ul><li>N amespaces contra funções globais </li></ul><ul><li>Detecção otimizada </li></ul><ul><li...
Upcoming SlideShare
Loading in...5
×

Tw Course Ajax 2007 Ap01

690

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
690
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tw Course Ajax 2007 Ap01

  1. 1. Overview do XHR (XMLHttpRquest) Christiano Milfont Anatomia de uma operação Ajax Métodos e Propriedades do XHR Melhores práticas com XHR
  2. 2. Ajax [Hype Vs Reality] ...
  3. 3. Anatomia de uma operação Ajax ...
  4. 4. Anatomia de uma operação Ajax ... <ul><li>Ocorre um evento no cliente </li></ul><ul><li>Um XHR é instanciado </li></ul><ul><li>A instância é configurada </li></ul><ul><li>Solicita uma conexão assíncrona </li></ul><ul><li>A requisição é processada pelo servidor </li></ul><ul><li>O servidor retorna um XML </li></ul><ul><li>O XHR chama o callback e repassa o XML </li></ul><ul><li>O HTML DOM processa o XML. </li></ul>
  5. 5. 1. Ocorre um evento no cliente <ul><li>Um evento mapeado é acionado no cliente : </li></ul>
  6. 6. 2. Um XHR é instanciado <ul><li>Instancia uma versão do objeto XHR dependendo do Browser, a Microsoft (criadora do objeto) tem algumas implementações dependendo da versão do Internet Explorer. </li></ul>
  7. 7. 3. A instância é configurada <ul><li>O método “open” do objeto XHR cria uma conexão e recebe como parâmetros: o método de conexão (“POST” ou “GET”); a “url” do servidor; e um booleano que indica se a conexão é assíncrona (TRUE) ou síncrona (FALSE). </li></ul><ul><li>Associa-se uma função “callback” que processará o resultado do servidor. </li></ul><ul><li>Submete os dados caso a conexão seja POST. </li></ul>
  8. 8. 4. Solicita uma conexão assíncrona <ul><li>Quando a propriedade readStatedo objeto XHR recebe o valor 4 a conexão foi terminada, podemos processar diretamente ou somente quando a propriedade status receber o valor “200”. </li></ul>
  9. 9. 5. A requisição é processada pelo servidor <ul><li>O servidor processa uma requisição como outra qualquer e devolve um XML ou um texto. </li></ul>6. O servidor retorna um XML ou um texto <ul><li>É comum utilizar na resposta um texto com o objeto no formato JSON para ser processado na função callback. </li></ul>
  10. 10. 7 e 8. Callback processa retorno <ul><li>A função callback processa o retorno utilizando DOM. </li></ul>
  11. 11. Métodos e propriedades do XHR Status do readyState 0: Não inicializado. 1: Conexão estabelecida. 2: Requisição recebida. 3: Em processo. 4: Finalizada. Atributos readyState: Troca valores de 0 a 4 que indicam que está “Ready”. Status: Códigos de status do response HTTP. responseText: Processa a resposta como texto. responseXML: Processa a resposta como um objeto XML. onreadystatechange: Propriedade que recebe uma função que é invocada quando o evento readystatechange é disparado. Métodos open(mode, url, boolean): inicializa a conexão e recebe os parametros mode (conexão), url e booleano (síncrono ou assíncrono). send(&quot;string&quot;): Null para GET ou uma String dos parametros e valores para o POST.
  12. 12. Melhores práticas do XHR <ul><li>N amespaces contra funções globais </li></ul><ul><li>Detecção otimizada </li></ul><ul><li>Bridge encapsula diferenças de Cross Browser </li></ul><ul><li>Delegação de eventos </li></ul><ul><li>New School suplanta Old School </li></ul><ul><li>Separação em camadas </li></ul><ul><li>Orientação a objetos contra prog. funcional </li></ul><ul><li>DOM contra innerHTML </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×