Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
-
Upload
loiane-groner -
Category
Technology
-
view
4.275 -
download
0
description
Transcript of Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy
![Page 1: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/1.jpg)
CursoExt JS 4
Data Package: JsonP Proxy
![Page 2: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/2.jpg)
Agenda
• Introdução à JsonP
• JsonP Proxy com Reader
•Problemas com Writer
•Exemplo prático
![Page 3: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/3.jpg)
Requisitos
![Page 4: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/4.jpg)
Ext JS 4 SDK
Servidor (Apache)
Editor de Texto
Browser (Firefox c/ Firebug ou Chrome)
PHP + MySQL (ou outra linguagem)
Domínio Diferente
![Page 5: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/5.jpg)
![Page 6: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/6.jpg)
![Page 7: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/7.jpg)
![Page 8: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/8.jpg)
![Page 9: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/9.jpg)
![Page 10: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/10.jpg)
O que é JsonP?
![Page 12: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/12.jpg)
Cross-Domain Ajax
http://json-p.org/
![Page 13: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/13.jpg)
Cross-Domain Ajax
http://json-p.org/
Same-origin policy - browsers
![Page 15: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/15.jpg)
<script src="http://domainB.com/users?callback=someCallback"></script>
Envia
![Page 18: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/18.jpg)
Recebe
someCallback({ contatos: [ { id: 1, nome: "Loiane Groner", email: "[email protected]" } ]});
Função Javascript com retorno JSON
![Page 20: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/20.jpg)
Faz sentido?
<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>[email protected]</email> <contatos>});</script>
![Page 21: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/21.jpg)
Faz sentido?
<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>[email protected]</email> <contatos>});</script>
Vai compilar?
![Page 22: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/22.jpg)
Faz sentido?
<script type="text/javascript">someCallback({ <contatos> <id>1</id> <nome>Loiane</nome> <email>[email protected]</email> <contatos>});</script>
Vai compilar? NÃO!
![Page 23: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/23.jpg)
Vamos voltar...Mais um problema
![Page 24: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/24.jpg)
<script src="http://domainB.com/users?callback=someCallback"></script>
Envia
![Page 25: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/25.jpg)
<script src="http://domainB.com/users?callback=someCallback"></script>
Envia
![Page 26: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/26.jpg)
<script src="http://domainB.com/users?callback=someCallback"></script>
Envia
REQUEST_METODO == GET
![Page 27: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/27.jpg)
e POST,PUT,
DELETE?
![Page 28: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/28.jpg)
Sorry,Não foi criado para isso!
![Page 29: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/29.jpg)
Objetivo é buscar dados em outro domínio
![Page 30: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/30.jpg)
Show me the code!
![Page 31: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/31.jpg)
https://github.com/loiane/curso-extjs4
Código Fonte da Aula
![Page 32: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/32.jpg)
http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/
Link do Curso com todas as aulas publicadas
![Page 33: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/33.jpg)
http://amzn.com/1849516669
http://www.packtpub.com/ext-js-4-first-look/book
![Page 34: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/34.jpg)
contato = {email: ‘[email protected]’,blog: ‘loiane.com’,facebook: ‘facebook.com/loianegroner’,twitter: ‘@loiane’,github: ‘loiane’,vimeo: ‘loiane’,youtube: ‘loianeg’}
![Page 35: Curso ExtJS 4 - Aula 23: Data Package: JsonP Proxy](https://reader033.fdocuments.us/reader033/viewer/2022051411/547b7b76b479597c098b4dfc/html5/thumbnails/35.jpg)
Obrigada!