sce 0265 icmc-uspwiki.icmc.usp.br/images/c/cf/scc265_aula4_ajax.pdf · aula 4 – arquitetura de...
TRANSCRIPT
![Page 1: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/1.jpg)
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
![Page 2: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/2.jpg)
2
Introdução
O que é AJAX ?
quinta-feira, 18 de março de 2010
![Page 3: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/3.jpg)
3
Introdução
O que é AJAX ?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
quinta-feira, 18 de março de 2010
![Page 4: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/4.jpg)
4
Introdução
O que é AJAX ?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
XML
SVG
JSON
quinta-feira, 18 de março de 2010
![Page 5: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/5.jpg)
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
![Page 6: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/6.jpg)
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
![Page 7: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/7.jpg)
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
![Page 8: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/8.jpg)
8
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas
quinta-feira, 18 de março de 2010
![Page 9: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/9.jpg)
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
![Page 10: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/10.jpg)
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
![Page 11: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/11.jpg)
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
![Page 12: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/12.jpg)
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
![Page 13: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/13.jpg)
13
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML
Como funciona?
quinta-feira, 18 de março de 2010
![Page 14: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/14.jpg)
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
![Page 15: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/15.jpg)
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
![Page 16: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/16.jpg)
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
![Page 17: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/17.jpg)
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
![Page 18: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/18.jpg)
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
![Page 19: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/19.jpg)
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
![Page 20: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/20.jpg)
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
![Page 21: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/21.jpg)
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
![Page 22: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/22.jpg)
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
![Page 23: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/23.jpg)
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
![Page 24: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/24.jpg)
24
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: DHTML Scraps no Orkut
quinta-feira, 18 de março de 2010
![Page 25: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/25.jpg)
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
![Page 26: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/26.jpg)
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
![Page 27: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/27.jpg)
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
![Page 28: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/28.jpg)
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
![Page 29: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/29.jpg)
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
![Page 30: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/30.jpg)
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
![Page 31: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/31.jpg)
31
Relembrando: DHTML e Aplicações Dinâmicas
Aplicações Dinâmicas: Solução
AJAX
quinta-feira, 18 de março de 2010
![Page 32: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/32.jpg)
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
![Page 33: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/33.jpg)
33
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
quinta-feira, 18 de março de 2010
![Page 34: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/34.jpg)
34
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
Teoria
quinta-feira, 18 de março de 2010
![Page 35: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/35.jpg)
35
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
Teoria
Javascript XML
quinta-feira, 18 de março de 2010
![Page 36: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/36.jpg)
36
AJAX e Ajax
Definição AJAX Asynchronous Javascript And XML
Teoria
Javascript XML
quinta-feira, 18 de março de 2010
![Page 37: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/37.jpg)
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
![Page 38: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/38.jpg)
38
AJAX e Ajax
Como funciona?
quinta-feira, 18 de março de 2010
![Page 39: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/39.jpg)
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
![Page 40: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/40.jpg)
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
![Page 41: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/41.jpg)
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
![Page 42: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/42.jpg)
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
![Page 43: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/43.jpg)
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
![Page 44: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/44.jpg)
44
AJAX e Ajax Exemplos AJAX
GMail Google Reader Orkut Maps Facebook Amazon entre outros..........
quinta-feira, 18 de março de 2010
![Page 45: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/45.jpg)
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
![Page 46: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/46.jpg)
46
AJAX e Ajax
O que é AJAX ?
quinta-feira, 18 de março de 2010
![Page 47: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/47.jpg)
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
![Page 48: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/48.jpg)
48
O que é AJAX?Javascript
HTML Events
DOM HTMLDHTML
CSS
HTML
AJAX e Ajax
quinta-feira, 18 de março de 2010
![Page 49: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/49.jpg)
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
![Page 50: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/50.jpg)
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
![Page 51: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/51.jpg)
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
![Page 52: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/52.jpg)
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
![Page 53: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/53.jpg)
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
![Page 54: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/54.jpg)
54
AJAX e Ajax AJAX == Web 2.0 ?
quinta-feira, 18 de março de 2010
![Page 55: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/55.jpg)
55
AJAX e Ajax AJAX == Web 2.0 ?
Web 2.0 => AJAX ! (AJAX => Web 2.0)
quinta-feira, 18 de março de 2010
![Page 56: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/56.jpg)
56
AJAX e Ajax AJAX == Ajax ?
quinta-feira, 18 de março de 2010
![Page 57: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/57.jpg)
57
AJAX e Ajax AJAX == Ajax ?
AJAX == “Chamadas remotas por Javascript”
Ajax == ?
quinta-feira, 18 de março de 2010
![Page 58: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/58.jpg)
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
![Page 59: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/59.jpg)
59
AJAX e Ajax
Ajax == (AJAX + HTML + CSS + Javascript + ...)
quinta-feira, 18 de março de 2010
![Page 60: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/60.jpg)
60
AJAX e Ajax
Experiência de usuário
Ajax == (AJAX + HTML + CSS + Javascript + ...)
quinta-feira, 18 de março de 2010
![Page 61: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/61.jpg)
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
![Page 62: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/62.jpg)
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
![Page 63: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/63.jpg)
63
Objeto XMLHTTPRequest Implementação (Exemplo)
quinta-feira, 18 de março de 2010
![Page 64: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/64.jpg)
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
![Page 65: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/65.jpg)
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
![Page 66: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/66.jpg)
<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
![Page 67: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/67.jpg)
<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
![Page 68: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/68.jpg)
<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
![Page 69: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/69.jpg)
<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
![Page 70: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/70.jpg)
<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
![Page 71: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/71.jpg)
<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
![Page 72: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/72.jpg)
<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
![Page 73: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/73.jpg)
<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
![Page 74: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/74.jpg)
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
![Page 75: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/75.jpg)
75
Objeto XMLHTTPRequest Implementação (Exemplo 2)
quinta-feira, 18 de março de 2010
![Page 76: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/76.jpg)
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
![Page 77: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/77.jpg)
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
![Page 78: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/78.jpg)
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
![Page 79: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/79.jpg)
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
![Page 80: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/80.jpg)
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
![Page 81: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/81.jpg)
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
![Page 82: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/82.jpg)
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
![Page 83: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/83.jpg)
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
![Page 84: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/84.jpg)
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
![Page 85: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/85.jpg)
85
Objeto XMLHTTPRequest
Limitações Same-policy origin
quinta-feira, 18 de março de 2010
![Page 86: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/86.jpg)
86
Objeto XMLHTTPRequest
Limitações
quinta-feira, 18 de março de 2010
![Page 87: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/87.jpg)
87
Objeto XMLHTTPRequest
Limitações alternativas
IFrame Call On-Demand Javascript Cross-Domain Proxy
quinta-feira, 18 de março de 2010
![Page 88: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/88.jpg)
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
![Page 89: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/89.jpg)
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
![Page 90: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/90.jpg)
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
![Page 91: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/91.jpg)
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
![Page 92: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/92.jpg)
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
![Page 93: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/93.jpg)
93
Webservices e Ajax
Ajax Dados trafegando por HTTP em formato texto
DADOS
Texto
quinta-feira, 18 de março de 2010
![Page 94: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/94.jpg)
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
![Page 95: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/95.jpg)
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
![Page 96: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/96.jpg)
96
Webservices e Ajax
DADOS
Texto
HTTP
Webservices
quinta-feira, 18 de março de 2010
![Page 97: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/97.jpg)
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
![Page 98: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/98.jpg)
98
Webservices e Ajax
Webservices == Ajax?
quinta-feira, 18 de março de 2010
![Page 99: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/99.jpg)
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
![Page 100: SCE 0265 ICMC-USPwiki.icmc.usp.br/images/c/cf/Scc265_aula4_ajax.pdf · Aula 4 – Arquitetura de software na Web atual: AJAX e Ajax Prof: Dra. Renata Pontin de Mattos Fortes Aluno](https://reader034.vdocuments.net/reader034/viewer/2022043017/5f395631fe8ce87349484ad8/html5/thumbnails/100.jpg)
100
AJAX e Ajax Exercício
Dica: http://www.json.org/js.html
quinta-feira, 18 de março de 2010