SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
Treinamento AJAX

Waelson Negreiros
Email: waelson@gmail.com
Blog: http://waelson.com.br
Agenda
O

que é Ajax?
 Por que usar?
 Quando usar?
 Arquitetura Web
 XML
 Minha Primeira Aplicação Ajax
O que é Ajax?
 Solução

Client-Side;
 Assyncronous JavaScript And XML
 Não é uma linguagem;
Por que usar?
 Comunicação




Cada requisição uma resposta;
Cada resposta vem um página inteira;
É preciso esperar a página ser carregada para
usar a aplicação.

 Ajax



HTTP ineficiente;

e a comunicação assíncrona

Pequenos trechos podem ser transmitidos
assincronamente;
Permite usar a aplicação enquanto os dados são
transferidos;
Por que usar?
Por que usar?
Quando usar Ajax?
 Em

formulários (envio e validação);
 Comunicação user-to-user;
 Votação;
 Filtrar e ordenar dados;
 Sugestão de texto.
Arquitetura Web
 Baseada

no protocolo HTTP;
 Protocolo leve, não mantém estado;
Arquitetura Web


Exemplo: Pedido / Resposta
XML
 Metalinguagem;
 Definida

pela W3C;
 Define informações estruturadas;
 Usada para troca de informações;
 Estrutura em árvore;
XML
Minha Primeira Aplicação Ajax
 Definição

da Tela
Minha Primeira Aplicação Ajax
 Passos





Recupere o XMLHttpRequest;
Crie um request;
Obtenha a resposta;
Trate a resposta
Minha Primeira Aplicação Ajax
 Recupere

o XMLHttpRequest



Responsável pela comunicação assíncrona;



Recuperado nos browsers modelos (IE 7 e Firefox)
httpRequest = new XMLHttpRequest();



Browsers Microsoft antigos;
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
Minha Primeira Aplicação Ajax
Minha Primeira Aplicação Ajax
Minha Primeira Aplicação Ajax
 Entendendo








o Método “consultarNomePorId()”

Pegue o parâmetro que será enviado ao servidor
Monte a URL para onde se deseja enviar a
requisição
Abra uma conexão com o servidor
Defina a função que será chamada quando
terminar;
Envie a requisição;
Minha Primeira Aplicação Ajax
 Entendendo






o Método “atualizarPagina()”

Não faça nada até que o readyState seja 4
Se a resposta da requisição for 200 (sucesso)
Use o método responseText do objeto
XMLHttpRequest para recuperar a resposta do
servidor;
Exiba a resposta na caixa de texto.
Minha Primeira Aplicação Ajax
 Ready





States

Pode haver 5 estados durante a requisição e
resposta assíncrona;
São lidos através da propriedade readyState
São eles:






0 – não inicializado
1 – não enviado
2 – sendo processado (cabeçalho)
3 – sendo processado (parte dos dados)
4 - concluído
Fonte: Introdução a Ajax (Helder Rocha)
http://www.argonavis.com.br

Mais conteúdo relacionado

Semelhante a Treinamento AJAX: Introdução à tecnologia e passos para criar aplicações

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 / 3David Ruiz
 
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 1infinitopublicidade
 
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 AbbottTchelinux
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com AjaxAdler Medrado
 
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 FrameworkRafael 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 FrameworkRafael Dohms
 
CóPia De Minicurso Smsi
CóPia De Minicurso SmsiCóPia De Minicurso Smsi
CóPia De Minicurso Smsitaniamaciel
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)kidh0
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!Lucas Brasilino
 
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 androidAlexandre Antunes
 

Semelhante a Treinamento AJAX: Introdução à tecnologia e passos para criar aplicações (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
 
Ajax como comecar
Ajax como comecarAjax como comecar
Ajax como comecar
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
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
 
Ajax
AjaxAjax
Ajax
 
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
 
8159540 Tutorial De Ajax
8159540 Tutorial De Ajax8159540 Tutorial De Ajax
8159540 Tutorial De Ajax
 
ASP.NET AJAX
ASP.NET AJAXASP.NET AJAX
ASP.NET AJAX
 
Minicurso de PHP Com Ajax
Minicurso de PHP Com AjaxMinicurso de PHP Com Ajax
Minicurso de PHP Com Ajax
 
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
 
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
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Aplicacoes Web Com AJAX
Aplicacoes Web Com AJAXAplicacoes Web Com AJAX
Aplicacoes Web Com AJAX
 
CóPia De Minicurso Smsi
CóPia De Minicurso SmsiCóPia De Minicurso Smsi
CóPia De Minicurso Smsi
 
Minicurso Smsi
Minicurso SmsiMinicurso Smsi
Minicurso Smsi
 
Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)Ajax (Asynchronous Javascript And Xml)
Ajax (Asynchronous Javascript And Xml)
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
 
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
 
Ajax
AjaxAjax
Ajax
 

Mais de Waelson Negreiros Nunes

HornetQ - 13.Alta Disponibilidade e Failover
HornetQ - 13.Alta Disponibilidade e FailoverHornetQ - 13.Alta Disponibilidade e Failover
HornetQ - 13.Alta Disponibilidade e FailoverWaelson Negreiros Nunes
 
HornetQ - 10.Reentrega de Mensagens e DLQ
HornetQ - 10.Reentrega de Mensagens e DLQHornetQ - 10.Reentrega de Mensagens e DLQ
HornetQ - 10.Reentrega de Mensagens e DLQWaelson Negreiros Nunes
 
HornetQ - 2.1.HornetQ no Modo Standalone
HornetQ - 2.1.HornetQ no Modo StandaloneHornetQ - 2.1.HornetQ no Modo Standalone
HornetQ - 2.1.HornetQ no Modo StandaloneWaelson Negreiros Nunes
 
HornetQ - 16.Divert e Splitting de Mensagem
HornetQ - 16.Divert e Splitting de MensagemHornetQ - 16.Divert e Splitting de Mensagem
HornetQ - 16.Divert e Splitting de MensagemWaelson Negreiros Nunes
 

Mais de Waelson Negreiros Nunes (20)

Treinamento ajax 05
Treinamento ajax   05Treinamento ajax   05
Treinamento ajax 05
 
Treinamento ajax 04
Treinamento ajax   04Treinamento ajax   04
Treinamento ajax 04
 
Treinamento ajax 03
Treinamento ajax   03Treinamento ajax   03
Treinamento ajax 03
 
Treinamento ajax modulo javascript
Treinamento ajax   modulo javascriptTreinamento ajax   modulo javascript
Treinamento ajax modulo javascript
 
Desvendando o mundo iOS
Desvendando o mundo iOSDesvendando o mundo iOS
Desvendando o mundo iOS
 
HornetQ - 15.Bridge
HornetQ - 15.BridgeHornetQ - 15.Bridge
HornetQ - 15.Bridge
 
HornetQ - 14.Cluster
HornetQ - 14.ClusterHornetQ - 14.Cluster
HornetQ - 14.Cluster
 
HornetQ - 13.Alta Disponibilidade e Failover
HornetQ - 13.Alta Disponibilidade e FailoverHornetQ - 13.Alta Disponibilidade e Failover
HornetQ - 13.Alta Disponibilidade e Failover
 
HornetQ - 12.Paginação
HornetQ - 12.PaginaçãoHornetQ - 12.Paginação
HornetQ - 12.Paginação
 
HornetQ - 11.Mensagens Expiradas
HornetQ - 11.Mensagens ExpiradasHornetQ - 11.Mensagens Expiradas
HornetQ - 11.Mensagens Expiradas
 
HornetQ - 10.Reentrega de Mensagens e DLQ
HornetQ - 10.Reentrega de Mensagens e DLQHornetQ - 10.Reentrega de Mensagens e DLQ
HornetQ - 10.Reentrega de Mensagens e DLQ
 
HornetQ - 9.Mecanismo de Log
HornetQ - 9.Mecanismo de LogHornetQ - 9.Mecanismo de Log
HornetQ - 9.Mecanismo de Log
 
HornetQ - 8.Segurança
HornetQ - 8.SegurançaHornetQ - 8.Segurança
HornetQ - 8.Segurança
 
HornetQ - 6.Integração com JBoss 5
HornetQ - 6.Integração com JBoss 5HornetQ - 6.Integração com JBoss 5
HornetQ - 6.Integração com JBoss 5
 
HornetQ - 5.Transports
HornetQ - 5.TransportsHornetQ - 5.Transports
HornetQ - 5.Transports
 
HornetQ - 4.Persistência
HornetQ - 4.PersistênciaHornetQ - 4.Persistência
HornetQ - 4.Persistência
 
HornetQ - 2.Arquitetura do HornetQ
HornetQ - 2.Arquitetura do HornetQHornetQ - 2.Arquitetura do HornetQ
HornetQ - 2.Arquitetura do HornetQ
 
HornetQ - 2.1.HornetQ no Modo Standalone
HornetQ - 2.1.HornetQ no Modo StandaloneHornetQ - 2.1.HornetQ no Modo Standalone
HornetQ - 2.1.HornetQ no Modo Standalone
 
Hornet - 1.Conceitos de Mensageria
Hornet - 1.Conceitos de MensageriaHornet - 1.Conceitos de Mensageria
Hornet - 1.Conceitos de Mensageria
 
HornetQ - 16.Divert e Splitting de Mensagem
HornetQ - 16.Divert e Splitting de MensagemHornetQ - 16.Divert e Splitting de Mensagem
HornetQ - 16.Divert e Splitting de Mensagem
 

Treinamento AJAX: Introdução à tecnologia e passos para criar aplicações

  • 1. Treinamento AJAX Waelson Negreiros Email: waelson@gmail.com Blog: http://waelson.com.br
  • 2. Agenda O que é Ajax?  Por que usar?  Quando usar?  Arquitetura Web  XML  Minha Primeira Aplicação Ajax
  • 3. O que é Ajax?  Solução Client-Side;  Assyncronous JavaScript And XML  Não é uma linguagem;
  • 4. Por que usar?  Comunicação    Cada requisição uma resposta; Cada resposta vem um página inteira; É preciso esperar a página ser carregada para usar a aplicação.  Ajax   HTTP ineficiente; e a comunicação assíncrona Pequenos trechos podem ser transmitidos assincronamente; Permite usar a aplicação enquanto os dados são transferidos;
  • 7. Quando usar Ajax?  Em formulários (envio e validação);  Comunicação user-to-user;  Votação;  Filtrar e ordenar dados;  Sugestão de texto.
  • 8. Arquitetura Web  Baseada no protocolo HTTP;  Protocolo leve, não mantém estado;
  • 10. XML  Metalinguagem;  Definida pela W3C;  Define informações estruturadas;  Usada para troca de informações;  Estrutura em árvore;
  • 11. XML
  • 12. Minha Primeira Aplicação Ajax  Definição da Tela
  • 13. Minha Primeira Aplicação Ajax  Passos     Recupere o XMLHttpRequest; Crie um request; Obtenha a resposta; Trate a resposta
  • 14. Minha Primeira Aplicação Ajax  Recupere o XMLHttpRequest  Responsável pela comunicação assíncrona;  Recuperado nos browsers modelos (IE 7 e Firefox) httpRequest = new XMLHttpRequest();  Browsers Microsoft antigos; http_request = new ActiveXObject("Msxml2.XMLHTTP"); http_request = new ActiveXObject("Microsoft.XMLHTTP");
  • 17. Minha Primeira Aplicação Ajax  Entendendo      o Método “consultarNomePorId()” Pegue o parâmetro que será enviado ao servidor Monte a URL para onde se deseja enviar a requisição Abra uma conexão com o servidor Defina a função que será chamada quando terminar; Envie a requisição;
  • 18. Minha Primeira Aplicação Ajax  Entendendo     o Método “atualizarPagina()” Não faça nada até que o readyState seja 4 Se a resposta da requisição for 200 (sucesso) Use o método responseText do objeto XMLHttpRequest para recuperar a resposta do servidor; Exiba a resposta na caixa de texto.
  • 19. Minha Primeira Aplicação Ajax  Ready    States Pode haver 5 estados durante a requisição e resposta assíncrona; São lidos através da propriedade readyState São eles:      0 – não inicializado 1 – não enviado 2 – sendo processado (cabeçalho) 3 – sendo processado (parte dos dados) 4 - concluído
  • 20. Fonte: Introdução a Ajax (Helder Rocha) http://www.argonavis.com.br