SlideShare uma empresa Scribd logo
Overview do XHR (XMLHttpRquest) Christiano Milfont Anatomia de uma operação Ajax Métodos e Propriedades do XHR Melhores práticas com XHR
Ajax [Hype Vs Reality] ...
Anatomia de uma operação Ajax ...
Anatomia de uma operação Ajax ... Ocorre um evento no cliente Um XHR é instanciado A instância é configurada Solicita uma conexão assíncrona A requisição é 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 versão do objeto XHR dependendo do Browser, a Microsoft (criadora do objeto) tem algumas implementações dependendo da versão do Internet Explorer.
3. A instância é configurada 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).   Associa-se uma função “callback” que processará o resultado do servidor.   Submete os dados caso a conexão seja POST.
4. Solicita uma conexão assíncrona 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”.
5. A requisição é processada pelo servidor O servidor processa uma requisição 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 função callback.
7 e 8. Callback processa retorno A função callback processa o retorno utilizando DOM.
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("string"):  Null para GET ou uma  String dos parametros e valores para o POST.
Melhores práticas do XHR N amespaces contra funções globais Detecção otimizada Bridge encapsula diferenças de Cross Browser Delegação de eventos New School suplanta Old School Separação em camadas Orientação a objetos contra prog. funcional DOM contra innerHTML

Mais conteúdo relacionado

Semelhante a Tw Course Ajax 2007 Ap01

Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
Milfont Consulting
 
Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3
David Ruiz
 
Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão Abbott
Tchelinux
 
Implementando MVC com AJAX
Implementando MVC com AJAXImplementando MVC com AJAX
Implementando MVC com AJAX
cejug
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
Igor Ferreira
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
Waelson Negreiros Nunes
 
Ajax O Objeto Xml Http Request Parte 2
Ajax   O Objeto Xml Http Request   Parte 2Ajax   O Objeto Xml Http Request   Parte 2
Ajax O Objeto Xml Http Request Parte 2
infinitopublicidade
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
Adler Medrado
 
Ajax
AjaxAjax
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAX
Rafael Dohms
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
Rafael Dohms
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
elliando dias
 
RMI em Java
RMI em JavaRMI em Java
RMI em Java
Charleston Anjos
 
ASP.NET AJAX
ASP.NET AJAXASP.NET AJAX
ASP.NET AJAX
Nelson Correia
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
Clayton Silva
 
Desenvolvimento de apps e games para android parte 8
Desenvolvimento de apps e games para android   parte 8Desenvolvimento de apps e games para android   parte 8
Desenvolvimento de apps e games para android parte 8
Erisvaldo Junior
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1
infinitopublicidade
 
Escalabilidade e performance da infraestrutura Plone/Zope com CacheFU e Varnish
Escalabilidade e performance da infraestrutura Plone/Zope com CacheFU e VarnishEscalabilidade e performance da infraestrutura Plone/Zope com CacheFU e Varnish
Escalabilidade e performance da infraestrutura Plone/Zope com CacheFU e Varnish
Lucas Brasilino
 
A Web é uma API
A Web é uma APIA Web é uma API
A Web é uma API
Osvaldo Santana Neto
 
Consumindo dados via web service no android
Consumindo dados via web service no androidConsumindo dados via web service no android
Consumindo dados via web service no android
Alexandre Antunes
 

Semelhante a Tw Course Ajax 2007 Ap01 (20)

Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
 
Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3Web 2.0 e AJAX - Parte 2 / 3
Web 2.0 e AJAX - Parte 2 / 3
 
Aplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão AbbottAplicações Web com AJAX - Er Galvão Abbott
Aplicações Web com AJAX - Er Galvão Abbott
 
Implementando MVC com AJAX
Implementando MVC com AJAXImplementando MVC com AJAX
Implementando MVC com AJAX
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
 
Treinamento ajax 02
Treinamento ajax   02Treinamento ajax   02
Treinamento ajax 02
 
Ajax O Objeto Xml Http Request Parte 2
Ajax   O Objeto Xml Http Request   Parte 2Ajax   O Objeto Xml Http Request   Parte 2
Ajax O Objeto Xml Http Request Parte 2
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
Ajax
AjaxAjax
Ajax
 
PHP e Ajax com XAJAX
PHP e Ajax com XAJAXPHP e Ajax com XAJAX
PHP e Ajax com XAJAX
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 
RMI em Java
RMI em JavaRMI em Java
RMI em Java
 
ASP.NET AJAX
ASP.NET AJAXASP.NET AJAX
ASP.NET AJAX
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
Desenvolvimento de apps e games para android parte 8
Desenvolvimento de apps e games para android   parte 8Desenvolvimento de apps e games para android   parte 8
Desenvolvimento de apps e games para android parte 8
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1
 
Escalabilidade e performance da infraestrutura Plone/Zope com CacheFU e Varnish
Escalabilidade e performance da infraestrutura Plone/Zope com CacheFU e VarnishEscalabilidade e performance da infraestrutura Plone/Zope com CacheFU e Varnish
Escalabilidade e performance da infraestrutura Plone/Zope com CacheFU e Varnish
 
A Web é uma API
A Web é uma APIA Web é uma API
A Web é uma API
 
Consumindo dados via web service no android
Consumindo dados via web service no androidConsumindo dados via web service no android
Consumindo dados via web service no android
 

Mais de Milfont Consulting

Continuous integration e continuous delivery para salvar o seu projeto!
Continuous integration e continuous delivery para salvar o seu projeto!Continuous integration e continuous delivery para salvar o seu projeto!
Continuous integration e continuous delivery para salvar o seu projeto!
Milfont Consulting
 
Equipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridasEquipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridas
Milfont Consulting
 
Mvc sem Controller
Mvc sem ControllerMvc sem Controller
Mvc sem Controller
Milfont Consulting
 
Beagajs
BeagajsBeagajs
Combinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma práticaCombinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma prática
Milfont Consulting
 
Engine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML SpritesEngine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML Sprites
Milfont Consulting
 
MVC Model 3
MVC Model 3MVC Model 3
MVC Model 3
Milfont Consulting
 
Dar caos à ordem
Dar caos à ordemDar caos à ordem
Dar caos à ordem
Milfont Consulting
 
I TDD my jQuery code without Browser
I TDD my jQuery code without BrowserI TDD my jQuery code without Browser
I TDD my jQuery code without Browser
Milfont Consulting
 
Oxente BDD
Oxente BDDOxente BDD
Oxente BDD
Milfont Consulting
 
Construindo WebApps ricas com Rails e Sencha
Construindo WebApps ricas com Rails e SenchaConstruindo WebApps ricas com Rails e Sencha
Construindo WebApps ricas com Rails e Sencha
Milfont Consulting
 
Dar Ordem ao Caos
Dar Ordem ao CaosDar Ordem ao Caos
Dar Ordem ao Caos
Milfont Consulting
 
Domain driven design
Domain driven designDomain driven design
Domain driven design
Milfont Consulting
 
BDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e RailsBDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e Rails
Milfont Consulting
 
Mare de Agilidade - BDD e TDD
Mare de Agilidade - BDD e TDDMare de Agilidade - BDD e TDD
Mare de Agilidade - BDD e TDD
Milfont Consulting
 
Apresentando Extreme Programming
Apresentando Extreme ProgrammingApresentando Extreme Programming
Apresentando Extreme Programming
Milfont Consulting
 
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
Milfont Consulting
 
Behaviour Driven Development
Behaviour Driven DevelopmentBehaviour Driven Development
Behaviour Driven Development
Milfont Consulting
 
Primeiro Dia Livre Opensocial
Primeiro Dia Livre OpensocialPrimeiro Dia Livre Opensocial
Primeiro Dia Livre Opensocial
Milfont Consulting
 
Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01
Milfont Consulting
 

Mais de Milfont Consulting (20)

Continuous integration e continuous delivery para salvar o seu projeto!
Continuous integration e continuous delivery para salvar o seu projeto!Continuous integration e continuous delivery para salvar o seu projeto!
Continuous integration e continuous delivery para salvar o seu projeto!
 
Equipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridasEquipes sem Líderes formais e realmente autogeridas
Equipes sem Líderes formais e realmente autogeridas
 
Mvc sem Controller
Mvc sem ControllerMvc sem Controller
Mvc sem Controller
 
Beagajs
BeagajsBeagajs
Beagajs
 
Combinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma práticaCombinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma prática
 
Engine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML SpritesEngine de template em Javascript com HTML Sprites
Engine de template em Javascript com HTML Sprites
 
MVC Model 3
MVC Model 3MVC Model 3
MVC Model 3
 
Dar caos à ordem
Dar caos à ordemDar caos à ordem
Dar caos à ordem
 
I TDD my jQuery code without Browser
I TDD my jQuery code without BrowserI TDD my jQuery code without Browser
I TDD my jQuery code without Browser
 
Oxente BDD
Oxente BDDOxente BDD
Oxente BDD
 
Construindo WebApps ricas com Rails e Sencha
Construindo WebApps ricas com Rails e SenchaConstruindo WebApps ricas com Rails e Sencha
Construindo WebApps ricas com Rails e Sencha
 
Dar Ordem ao Caos
Dar Ordem ao CaosDar Ordem ao Caos
Dar Ordem ao Caos
 
Domain driven design
Domain driven designDomain driven design
Domain driven design
 
BDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e RailsBDD com Cucumber, Selenium e Rails
BDD com Cucumber, Selenium e Rails
 
Mare de Agilidade - BDD e TDD
Mare de Agilidade - BDD e TDDMare de Agilidade - BDD e TDD
Mare de Agilidade - BDD e TDD
 
Apresentando Extreme Programming
Apresentando Extreme ProgrammingApresentando Extreme Programming
Apresentando Extreme Programming
 
Test Driven Development
Test Driven DevelopmentTest Driven Development
Test Driven Development
 
Behaviour Driven Development
Behaviour Driven DevelopmentBehaviour Driven Development
Behaviour Driven Development
 
Primeiro Dia Livre Opensocial
Primeiro Dia Livre OpensocialPrimeiro Dia Livre Opensocial
Primeiro Dia Livre Opensocial
 
Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01
 

Último

INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
Faga1939
 
Apresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimizaçãoApresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimização
snerdct
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
ronaldos10
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
Ismael Ash
 
Aula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústriaAula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústria
zetec10
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ismael Ash
 

Último (6)

INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
INTELIGÊNCIA ARTIFICIAL + COMPUTAÇÃO QUÂNTICA = MAIOR REVOLUÇÃO TECNOLÓGICA D...
 
Apresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimizaçãoApresentação sobre Deep Web e anonimização
Apresentação sobre Deep Web e anonimização
 
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docxse38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
se38_layout_erro_xxxxxxxxxxxxxxxxxx.docx
 
Subindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWSSubindo uma aplicação WordPress em docker na AWS
Subindo uma aplicação WordPress em docker na AWS
 
Aula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústriaAula combustiveis mais utilizados na indústria
Aula combustiveis mais utilizados na indústria
 
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de   DevOps/CLoudFerramentas que irão te ajudar a entrar no mundo de   DevOps/CLoud
Ferramentas que irão te ajudar a entrar no mundo de DevOps/CLoud
 

Tw Course Ajax 2007 Ap01

  • 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. Ajax [Hype Vs Reality] ...
  • 3. Anatomia de uma operação Ajax ...
  • 4. Anatomia de uma operação Ajax ... Ocorre um evento no cliente Um XHR é instanciado A instância é configurada Solicita uma conexão assíncrona A requisição é processada pelo servidor O servidor retorna um XML O XHR chama o callback e repassa o XML O HTML DOM processa o XML.
  • 5. 1. Ocorre um evento no cliente Um evento mapeado é acionado no cliente :
  • 6. 2. Um XHR é instanciado 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.
  • 7. 3. A instância é configurada 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). Associa-se uma função “callback” que processará o resultado do servidor. Submete os dados caso a conexão seja POST.
  • 8. 4. Solicita uma conexão assíncrona 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”.
  • 9. 5. A requisição é processada pelo servidor O servidor processa uma requisição 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 função callback.
  • 10. 7 e 8. Callback processa retorno A função callback processa o retorno utilizando DOM.
  • 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("string"): Null para GET ou uma String dos parametros e valores para o POST.
  • 12. Melhores práticas do XHR N amespaces contra funções globais Detecção otimizada Bridge encapsula diferenças de Cross Browser Delegação de eventos New School suplanta Old School Separação em camadas Orientação a objetos contra prog. funcional DOM contra innerHTML