1
SCE 0265 ICMC-USP
Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax
Prof: Dra. Renata Pontin de Mattos Fortes
Aluno PAE: Willian Massami Watanabe
quinta-feira, 18 de março de 2010
2
Introdução
O que é AJAX ?
quinta-feira, 18 de março de 2010
3
Introdução
O que é AJAX ?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
quinta-feira, 18 de março de 2010
4
Introdução
O que é AJAX ?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
XML
SVG
JSON
quinta-feira, 18 de março de 2010
5
Introdução
O que é AJAX ?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
XML
SVG
JSON
JAVA
.netPHP Python
RUBY
quinta-feira, 18 de março de 2010
6
Sumário
Relembrando: DHTML e Aplicações Dinâmicas AJAX e Ajax? Objeto XMLHTTPRequest Padrões de projeto Ajax e Exemplos Webservices e Ajax
quinta-feira, 18 de março de 2010
7
Sumário
Relembrando: DHTML e Aplicações Dinâmicas
AJAX e Ajax? Objeto XMLHTTPRequest Padrões de projeto Ajax e Exemplos Webservices e Ajax
quinta-feira, 18 de março de 2010
8
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas
quinta-feira, 18 de março de 2010
9
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmica
Usuário Aplicação Web
Interação sem processamento no
servidor
quinta-feira, 18 de março de 2010
10
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmica
Usuário Aplicação Web
Interação sem processamento no
servidor
Processamento no navegador
quinta-feira, 18 de março de 2010
11
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas− Interações com o servidor menos freqüentes
Link, Âncora ou Input
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
quinta-feira, 18 de março de 2010
12
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
http://watinha-watanabe.appspot.com
quinta-feira, 18 de março de 2010
13
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Como funciona?
quinta-feira, 18 de março de 2010
14
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Usuário interagindo
com o Navegador
Servidor Web
quinta-feira, 18 de março de 2010
15
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
quinta-feira, 18 de março de 2010
16
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
quinta-feira, 18 de março de 2010
17
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP GET
quinta-feira, 18 de março de 2010
18
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmica: DHTML
Usuário Aplicação Web
Cliques nas abas e apresentação
Processamento no navegador
quinta-feira, 18 de março de 2010
19
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmica: DHTML
Usuário Aplicação Web
Cliques nas abas e apresentação
Processamento no navegador
Javascript
HTML Events
DOM HTML
CSS
quinta-feira, 18 de março de 2010
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmica: DHTML Captura do Evento HTML Função Javascript para tratamento do evento Recuperação do elemento HTML que representa
o conteúdo da aba por DOM HTML Atribuição no atributo CSS referente ao elemento
Javascript
HTML Events
DOM HTML
CSS
quinta-feira, 18 de março de 2010
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmica: DHTML Captura do Evento HTML Função Javascript para tratamento do evento Recuperação do elemento HTML que representa
o conteúdo da aba por DOM HTML Atribuição no atributo CSS referente ao elemento
Javascript
HTML Events
DOM HTML
CSS
Onde estavam os dados que atualizaram a interface?
quinta-feira, 18 de março de 2010
22
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP GET
quinta-feira, 18 de março de 2010
23
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP GET
• HTML• CSS• Javascript
DADOS
quinta-feira, 18 de março de 2010
24
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML Scraps no Orkut
quinta-feira, 18 de março de 2010
25
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: Limitações Limitação 1: Impossível passar todos os dados
contidos no servidor para o cliente Limitação 2: Sobrecarga no download inicial da
página
quinta-feira, 18 de março de 2010
26
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: Limitações Limitação 1: Google Suggest, Google Reader
htttp://www.google.com http://reader.google.com
quinta-feira, 18 de março de 2010
27
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: Limitações Limitação 2: Exemplo - Funcionalidade de
Suggest implementada localmente
quinta-feira, 18 de março de 2010
28
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP GET
• HTML• CSS• Javascript
DADOS
quinta-feira, 18 de março de 2010
29
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: Limitações Limitação 2:
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP GET
• HTML• CSS• Javascript
DADOS ++
quinta-feira, 18 de março de 2010
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: Limitações Limitação 2:
Agravante: toda necessidade por dados atualizados leva ao recarregamento da página inteira
DADOS ++
• HTML• CSS• Javascript
DADOS ++
quinta-feira, 18 de março de 2010
31
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: Solução
AJAX
quinta-feira, 18 de março de 2010
32
Sumário
Relembrando: DHTML e Aplicações Dinâmicas AJAX e Ajax? Objeto XMLHTTPRequest Padrões de projeto Ajax e Exemplos Webservices e Ajax
quinta-feira, 18 de março de 2010
33
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
quinta-feira, 18 de março de 2010
34
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
Teoria
quinta-feira, 18 de março de 2010
35
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
Teoria
Javascript XML
quinta-feira, 18 de março de 2010
36
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
Teoria
Javascript XML
quinta-feira, 18 de março de 2010
37
AJAX e Ajax
Definição AJAX Requisições remotas por meio de
Javascript
Prática
Javascript
TextoHTTP
quinta-feira, 18 de março de 2010
38
AJAX e Ajax
Como funciona?
quinta-feira, 18 de março de 2010
39
AJAX e Ajax Como funciona: Acesso inicial a uma página
Acessa a página web
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP GET
• HTML• CSS• Javascript
DADOS
quinta-feira, 18 de março de 2010
40
AJAX e Ajax Como funciona: Interações em lado cliente
Usuário Aplicação Web
Cliques nas abas e apresentação
Processamento no navegador
Javascript
HTML Events
DOM HTML
CSS
quinta-feira, 18 de março de 2010
41
AJAX e Ajax Como funciona: Atualização de dados
Atualização de dados
Usuário interagindo
com o Navegador
Servidor Web
Retorna novos dados
HTTP Request
DADOS
quinta-feira, 18 de março de 2010
42
AJAX e Ajax Como funciona: Atualização de dados
Atualização de dados
Usuário interagindo
com o Navegador
Servidor Web
Retorna APENAS dados
HTTP Request
DADOS
Javascript
TextoHTTP
quinta-feira, 18 de março de 2010
43
AJAX e Ajax Explicação
Javascript realiza uma requição HTTP Atualização apenas de partes de uma página Não há necessidade de baixar informações
layout (CSS) e apresentação (HTML e Javascript) novamente
Requisição assíncrona
quinta-feira, 18 de março de 2010
44
AJAX e Ajax Exemplos AJAX
GMail Google Reader Orkut Maps Facebook Amazon entre outros..........
quinta-feira, 18 de março de 2010
45
AJAX e Ajax Importante estudar
Javascript (DHTML !!!) Formatos de comunicação de dados Protocolo de comunicação HTTP
quinta-feira, 18 de março de 2010
46
AJAX e Ajax
O que é AJAX ?
quinta-feira, 18 de março de 2010
47
AJAX e Ajax Importante estudar
Javascript (DHTML) Formatos de comunicação de dados Protocolo de comunicação HTTP
quinta-feira, 18 de março de 2010
48
O que é AJAX?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
AJAX e Ajax
quinta-feira, 18 de março de 2010
49
AJAX e Ajax Importante estudar
Javascript Formatos de comunicação de dados Protocolo de comunicação HTTP
quinta-feira, 18 de março de 2010
50
O que é AJAX?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
XML
SVG
JSON
AJAX e Ajax
quinta-feira, 18 de março de 2010
51
AJAX e Ajax Importante estudar
Javascript Formatos de comunicação de dados Protocolo de comunicação HTTP
quinta-feira, 18 de março de 2010
52
AJAX e Ajax
Atualização de dados
Usuário interagindo
com o Navegador
Servidor Web
Retorna APENAS dados
HTTP Request
DADOS
CGI
quinta-feira, 18 de março de 2010
53
AJAXJavascript
HTML Events
DOM HTMLDHTML
CSS
HTML
XML
SVG
JSON
JAVA
.netPHP Python
RUBYAJAX e Ajax
quinta-feira, 18 de março de 2010
54
AJAX e Ajax AJAX == Web 2.0 ?
quinta-feira, 18 de março de 2010
55
AJAX e Ajax AJAX == Web 2.0 ?
Web 2.0 => AJAX ! (AJAX => Web 2.0)
quinta-feira, 18 de março de 2010
56
AJAX e Ajax AJAX == Ajax ?
quinta-feira, 18 de março de 2010
57
AJAX e Ajax AJAX == Ajax ?
AJAX == “Chamadas remotas por Javascript”
Ajax == ?
quinta-feira, 18 de março de 2010
58
AJAX e Ajax Definição Ajax
“Estilo arquitetural por diferentes idéias e tecnologias relacionadas”, Mahemoff 2006
“Uma aplicação Ajax construída sobre tecnoloigas web padrão para entregar uma experiência de usuário responsiva e rica.”, Mahemoff 2007
quinta-feira, 18 de março de 2010
59
AJAX e Ajax
Ajax == (AJAX + HTML + CSS + Javascript + ...)
quinta-feira, 18 de março de 2010
60
AJAX e Ajax
Experiência de usuário
Ajax == (AJAX + HTML + CSS + Javascript + ...)
quinta-feira, 18 de março de 2010
61
Sumário
Relembrando: DHTML e Aplicações Dinâmicas AJAX e Ajax? Objeto XMLHTTPRequest Padrões de projeto Ajax e Exemplos Webservices e Ajax
quinta-feira, 18 de março de 2010
62
Objeto XMLHTTPRequest
Objeto XMLHTTPRequest Implementa uma interface de exposição a
linguagens de script que permite que o script realize requições HTTP partindo do cliente.
quinta-feira, 18 de março de 2010
63
Objeto XMLHTTPRequest Implementação (Exemplo)
quinta-feira, 18 de março de 2010
64
Objeto XMLHTTPRequest Examinando o código
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
quinta-feira, 18 de março de 2010
65
Objeto XMLHTTPRequest Examinando o código
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
Handler Click
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
66
Objeto XMLHTTPRequest Examinando o código
Objeto AJAX
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
67
Objeto XMLHTTPRequest Examinando o código
Objeto AJAX IE
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
68
Objeto XMLHTTPRequest Examinando o código
DOM HTML
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
69
Objeto XMLHTTPRequest Examinando o código
Parâmetros da Requisição
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
70
Objeto XMLHTTPRequest Examinando o código Requisição
GET
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
71
Objeto XMLHTTPRequest Examinando o código URL para
chamada
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
72
Objeto XMLHTTPRequest Examinando o código
Assíncrono == false
quinta-feira, 18 de março de 2010
<html> <head> <script type="text/javascript"> function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById('test').innerHTML=xmlhttp.responseText; } </script> </head> <body>.................. </body></html>
73
Objeto XMLHTTPRequest Examinando o código Realização da
requisição
quinta-feira, 18 de março de 2010
74
Objeto XMLHTTPRequest Considerações do exemplo
Requisição Síncrona Nenhum dado é enviado Requisição tipo GET
quinta-feira, 18 de março de 2010
75
Objeto XMLHTTPRequest Implementação (Exemplo 2)
quinta-feira, 18 de março de 2010
76
Objeto XMLHTTPRequest Examinando o código
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
quinta-feira, 18 de março de 2010
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
77
Objeto XMLHTTPRequest Examinando o código AJAX
Assíncrono
quinta-feira, 18 de março de 2010
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
78
Objeto XMLHTTPRequest Examinando o código Callback AJAX
quinta-feira, 18 de março de 2010
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
79
Objeto XMLHTTPRequest Examinando o código Estado da
Chamada
quinta-feira, 18 de março de 2010
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
80
Objeto XMLHTTPRequest Examinando o código Status HTTP
quinta-feira, 18 de março de 2010
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
81
Objeto XMLHTTPRequest Examinando o código HTTP == 200 ?
quinta-feira, 18 de março de 2010
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
82
Objeto XMLHTTPRequest Examinando o código
O que significa?
quinta-feira, 18 de março de 2010
function loadXMLDoc(url) { if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();} else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} document.getElementById('test').innerHTML="Carregando..."; xmlhttp.open("GET",url,true); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ document.getElementById('test').innerHTML=xmlhttp.responseText; }else{ if(xmlhttp.readyState == 4) document.getElementById('test').innerHTML= "ERRO .........."; } } xmlhttp.send(null); }
83
Objeto XMLHTTPRequest Examinando o código Qual a vantagem de
ser assíncrono?
quinta-feira, 18 de março de 2010
84
Objeto XMLHTTPRequest
E o que mais? Envio de dados por GET e POST Formato xxx-url-encoded Tratamento de callbacks Requisições múltiplas Referência objeto XMLHTTPRequest
http://www.w3.org/TR/XMLHttpRequest/
quinta-feira, 18 de março de 2010
85
Objeto XMLHTTPRequest
Limitações Same-policy origin
quinta-feira, 18 de março de 2010
86
Objeto XMLHTTPRequest
Limitações
quinta-feira, 18 de março de 2010
87
Objeto XMLHTTPRequest
Limitações alternativas
IFrame Call On-Demand Javascript Cross-Domain Proxy
quinta-feira, 18 de março de 2010
88
Sumário
Relembrando: DHTML e Aplicações Dinâmicas AJAX e Ajax? Objeto XMLHTTPRequest Padrões de projeto Ajax e Exemplos Webservices e Ajax
quinta-feira, 18 de março de 2010
89
Padrões de Projeto Ajax e Exemplos
Padrões de projeto Ajax (Mahemoff, 2007) Scheduling - Placar de jogo ao vivo Submission Throttling - Amazon Multi-stage download - Gmail Guesstimate - Gmail storage counter Progress Indicator - Twitter Portlets - Yahoo .....................
quinta-feira, 18 de março de 2010
90
Sumário
Relembrando: DHTML e Aplicações Dinâmicas AJAX e Ajax? Objeto XMLHTTPRequest Padrões de projeto Ajax e Exemplos Webservices e Ajax
quinta-feira, 18 de março de 2010
91
Webservices e Ajax
Atualização de dados
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP Request
DADOS
quinta-feira, 18 de março de 2010
92
Webservices e Ajax
Atualização de dados
Usuário interagindo
com o Navegador
Servidor Web
Retorna nova página
HTTP Request
DADOS
Texto
quinta-feira, 18 de março de 2010
93
Webservices e Ajax
Ajax Dados trafegando por HTTP em formato texto
DADOS
Texto
quinta-feira, 18 de março de 2010
94
Webservices e Ajax
Ajax Formatos de encapsulamento dos dados
Texto Puro HTML XML JSON Entre outros
quinta-feira, 18 de março de 2010
95
Webservices e Ajax
Se o protocolo utilizado é o HTTP, é possível realizar a busca por esses
dados por outras plataformas que não sejam necessariamente Javascript?
quinta-feira, 18 de março de 2010
96
Webservices e Ajax
DADOS
Texto
HTTP
Webservices
quinta-feira, 18 de março de 2010
97
Webservices e Ajax
Webservices XML-RPC SOAP JSON-RPC RestFul Corba (é webservice mas não utiliza Texto nem
HTTP) Entre outros
quinta-feira, 18 de março de 2010
98
Webservices e Ajax
Webservices == Ajax?
quinta-feira, 18 de março de 2010
99
AJAX e Ajax
Exercício Receber o arquivo objeto.js por meio de AJAX e
apresentar as informações sobre horário nele apresentadas na agenda desenvolvida nas tarefas anteriores.
Os horários representados em objeto.js devem ser apresentados na página web seguindo o mesmo padrão de apresentação do exercício anterior.
http://vinho.intermidia.icmc.usp.br/watinha/objeto.js
quinta-feira, 18 de março de 2010
100
AJAX e Ajax Exercício
Dica: http://www.json.org/js.html
quinta-feira, 18 de março de 2010